Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3

Responsive Web Design Summit - Day 3

Responsive Web Design Summit - Day 3I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 3 of 3. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Today’s presentations focus on code. Extremely informative!

Fractal CSS: There Is No Breakpoint, by Ben Callahan

  • Major Approaches
    • Single CSS File
    • Multiple CSS Files (global.css, local.css)
    • Breakpoint Based Partials (base.css, no-mq.css)
    • Module Based Partials (mq.css, no-mq.css or mq.scss, no-mq.scss)
  • Major breakpoints with minor “tweakpoints” inbetween

Responsive Web Design with SASS+Compass, by Sam Richards

  • “The Web is an Inherently Unstable Medium” — Ethan Marcotte
  • Media Queries
    • “Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!” — Stephen Hay
  • Fluid Grids using Singularity
    • Symmetric Grids
    • Asymmetric Grids
    • Semantic Grids (HTML, SASS)
    • Responsive Grid Context (SASS)
    • Nested Grid
  • Fluid Media using Toolkit
    • Basic Fluid Media
    • Intrinsic Ratios (SASS, CSS)

Responsive Layouts beyond the Sidebar, by Jen Simmons

  • Previous workflow
    • PSDs as final handoff to client without developer involvement
    • 960 grid – 1 or 2 sidebars – fixed/fluid/responsive
  • Design content structure
    • Blocks vs. chunks
  • Design source order
    • Turn off design styles to make sure your hierarchy is correct and site is accessible
  • Design narrowest layout, then wider and wider layouts
  • Recommendations
    • Learn HTML, CSS, layout CSS
    • Let a framework do the heavy lifting

Navigation in Responsive Web Design by Erick Arbé

  • RWD can be difficult
    • Explaining RWD to clients; the lack of a static design phase; navigation; images; tables; converting old fixed-width sites; what to serve users of old versions of IE; testing time and cost
  • Content strategy
    • Retro-fitting an existing website to become responsive can be difficult, especially one with a large menu
    • Smaller sitemap = easier to build responsive nav
  • Building your responsive navigation
    • Hover vs. Touch; top level menu items; two sets of navigation?; a simple JS function; some easy CSS to implement; position: fixed; mobile first!; using your mobile nav as your desktop nav
  • Navigation patterns and examples
    • Avoid position: fixed; build mobile first; can use mobile nav patterns on desktop
    • Add padding; grid/percentage based; multi-toggle/accordion; footer nav; select nav; off-canvas/page slide; no sub-nav

Rebuilding a university homepage to be “responsive”. Twice. In less than a year. by Erik Runyon

  • Why RWD Matters
  • Our Path to Responsive
  • 2011 Redesign
  • 2012 Redesign
    • 1. Global
      2. Screen
      3. @media queries as needed
      4. Hi-res/retina specific
      5. Print (yes, print)
    • Hiding content is NOT a mobile strategy
  • Responsible Responsive
    • Modem speeds moving to broadband speeds
    • But outside of 3G and Edge areas, speeds are still very slow
    • Web page sizes are getting bigger
    • Conclusion: RWD is not mobile friendly e.g. because all images are downloaded, even ones that aren’t used with mobile
    • But the web is, and RWD CAN be

Environments for Humans online Responsive Web Design Summit 2013 – Day 2 of 3

Responsive Web Design Summit - Day 2

Responsive Web Design Summit - Day 2I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 2 of 3. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Mobile Development on a Shoestring Connection by Jenifer Hanen

  • How do we design and develop for varying data and bandwidth scenarios?
  • Is your app or mobile site a Data Sipper or a Data Chugger?
  • How to make it flexible for either
  • Let the customer choose whether to data sip or chug
  • No cat images, one dog

The New Responsive Web Design Workflow by Trent Walton

  • Moving from separate teams of planning/designing/developing to a much more collaborative approach
  • Embracing the reality of the multi-device web
  • Design systems, not pages
  • Cat images

Responsive Web Design is Hard/Easy – Be Afraid/Don’t Worry! by Dan Mall

  • RWD takes a new design approach: both more complicated and less
  • Moving from “Here’s what your site will look like” to “Here’s what your site will feel like” – use mood and/or element collages
  • Collaborating with clients as well as more collaborative in-house teams
  • Cat images

Content Strategy for the Future by Sara Wachter-Boettcher

  • “Build on what we do know: content.” – Chris Armstrong, The Infinite Grid
  • Break content into chunks.
  • 3 challenges for organizations: mass-production mentality; compartmentalized teams; obsession with control
  • 3 ways to work differently: make mobile an entry point, not the end point; don’t sell solutions — collaborate; do less — facilitate more
  • “Use mobile as a wedge to create a better experience for ALL users.” – Karen McGrane
  • No cats

Universal Typography by Tim Brown

  • Short history of print and web typography
  • “People can be affected by good typography without being actively aware of it.” — Thomas Phinney
  • Current state of web typography is very similar to traditional print; just as much attention to quality needed
  • No cats

RWD and Client Management by Matt Griffin

  •  Initial client contact: listen, interpret, give feedback, gauge response, refine
  • Deliverables: user stories, written specifications, style prototypes, HTML & CSS wireframes, low-fidelity static mock-ups, HTML & CSS interactive mock-ups, HTML & CSS styleguides
  • The Mythical Mobile User: we can’t predict content needs based on devices; RWD focuses on optimizing content presentation.
  • Cat on unicorn with rainbow
  • Also Storm Troopers

Environments for Humans online Responsive Web Design Summit 2013 – Day 1 of 3

Responsive Web Design Summit - Day 1

Responsive Web Design Summit - Day 1I’m attending the Environments for Humans online Responsive Web Design Summit 2013 – Day 1 of 3.

Great, informative talks! Today is mostly for developers, but I’m getting a lot out of it. A recurring point is that you should design/develop completely differently for different devices, including: images optimized for different screen sizes/resolutions, testing on multiple devices, clean code, and involving clients in the effort to keep image sizes and thus page load times down. I’m summarizing the talks rather than going into detail to avoid infringing on the presenters’ copyrights.

Measuring Web Performance, by Dave Olsen, Creator of Mobile in Higher Ed

  • Tools for measuring web performance
  • Setting up a device lab
  • Responsive design and serverside solutions
  • Included pictures of cats

CSS & Mobile Performance, by Estelle Weyl, Author of HTML5 and CSS3 in the Real World

  • Images vs. fonts vs. iconfonts
  • Media queries
  • Included pictures of cats

Maximizing Performance, with SPDY & SSL, by Billy Hoffman, Founder and CEO of Zoompf. Not my area of expertise, but useful.

  • Setting the Stage for SPDY
  • Optimizing SPDY
  • Tools to help
  • Did not include pictures of cats

Image Optimization Methodology, by Tobias Baldauf, Freelance Web Performance Consultant

  • Image numbers per page have remained almost static, but image sizes have risen dramatically over the past year, probably due to an increase in high-resolution displays.
  • Which formats are best for which kinds of images? PNG-8, PNG-24, WebP, SVG, JPG, GIF, iconfonts
  • Optimizing different formats
  • Included pictures of cats

Optimizing Media Queries, by Kimberly Blessing, Director at Think Brownstone

  • Does the way we write media queries impact page performance? Which technique yields the best performance?
  • Conclusion: Media query syntax and code structure have an impact on performance, but writing optimized CSS overall is best. Focus on mobile users as their page load times are significantly slower.
  • Did not include pictures of cats

From dribbble: Free responsive wireframes (GIF)

wireframes Photoshop file

wireframes Photoshop fileFrom Chris Bannister at dribbble:

So after the extremely amazing reception that I received off you guys with these wireframes it’s time that I say thanks for all the love. The amount of people that requested the psd [Photoshop file] was surprising and overwhelming and as I promised you can download them here.

I’d like to hear what what you guys think of them and getting some feedback of how to improve them would be awesome. It would also be cool to see what you guys do with them. You can catch me on twitter for this as well.

Terms are obvious, don’t sell, rent in existing or modified form – attribution isn’t necessary but would be much appreciated.


[Full article]

Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)

Perspective drawing of letterforms

Perspective drawing of letterformsBy Nick Sherman in Typography & Web Fonts via A List Apart:

For ideal typography, web designers need to know as much as possible about each user’s reading environment. That may seem obvious, but the act of specifying web typography is currently like ordering slices of pizza without knowing how large the slices are or what toppings they are covered with.

If someone asked me how many slices of pizza I wanted for lunch, I would probably say it depends on how large the slices are. Then—even if they told me that each slice was one eighth of a whole pie, or that they themselves were ordering two slices, or even that the slices were coming from Joe’s Pizza—any answer I might give would still be based on relative knowledge and inexact assumptions.

Such is the current situation with the physical presentation of responsive typography on the web. The information at a designer’s disposal for responsive design is virtually nonexistent outside the realm of software. Very little knowledge about the physical presentation of content is available to inform the design. The media query features of today can only relay a very fragmented view of the content’s actual presentation, and related terms from CSS are confusing if not downright misleading.

[Kind of long article]