Responsive web design is changing the definition of a “page,” as it aims to address the growing variety of device form factors and locations where content is consumed. Additionally, as the web evolves, rules and limitations must be better understood in order to create truly unique content. This session will focus on design philosophy and development techniques to create and adapt your content for maximum impact, regardless of where and how it is consumed.
Reasons to build an app
- device-specific capability leverage
- deep hardware implementation
- alternative: cardova from Adobe? (HTML5 + phone gap)
Responsive design: have a firm center and a soft, adaptable periphery (Akido); let go of peripheral control. Let content fill edge to edge. Responsive design is not just adapting to small screen, but to large screens as well. ADD MOAR CONTENT if you have the real estate!
Ethan Marcotte (Boston Globe’s responsive design; Book: Responsive Web Design)
- flexible or fluid grid as foundation
- fixed v. fluid v. golden
- fixed: 960 grid system; absolutely positioned, device-specific breakpoints
- fluid: start at a fixed grid, find percentages; apply equation ( target / context = result )
- take one of the fixed grid columns, measure it (e.g., 960w = 60px column, so target container might be 240px)
- measure the entire grid context
- divide target / context (e.g., 230/960 = 23.95%)
- apply result as widths to containers
- is fluid always the appropriate layout for every device?
- golden: 1.1618…, anderson weiss? vertical thirds as well as horizontal
- flexible images and content
- max-width: 100%, github.com/: responsive images
- CSS Regions: define the regions where text will flow between containers
- flexible box model
- object-oriented CSS
- frameworks: HTML5 boilerplate. skeleton grid, bootstrap
- media queries
Progressive enhancement shout-out! Think of layout as an enhancement. Use media query specs (care about width, orientation, -webkit-device-pixel-ratio); min-width/max-width; define the most common attributes for your target audience most
Aside: Web experiences don’t have to be the same in every browser, every device. don’t design for LCM. create experiences targeting the people you want to target. Do IE6 users even put their credit cards into websites anyway?
Half of the images on the web are used for styling. If we use html and css correctly, we can get rid of half.
- Start with low res graphics first
- Be resolution independent CSS, SVG, @font-face
- Don’t die by the grid (rules are meant to be broken) but make sure you understand the rules you are breaking before you break them
- Think about modules of information (chunking); relationships between modules: make content stay relevant to its neighbors; when you drop things off, ask what is important and leave that in, remove everything else.
Dom order also helps with what happens when screen size changes
Interaction and hierarchy: Be task oriented and give those tasks prominence when on small screens, push large amounts of data down in primacy.
- mobile: think about what a user is going to do within 30 seconds.
- mobile: think about where the user is likely to be (location).