best practices for responsive web design

Design in the browser

reasons to Design in the browser


highlights considerations early on

saves time as code can be passed to developer

Tools

Mobile/content first



http://www.abookapart.com/products/mobile-first )

 Reasons to design "mobile" first


Demonstrates source order of document

Sometimes the simple solution is the best solution

It is much harder to design and develop backwards from a large screen

progressive enhancement

progressive enhancement example


Adaptive Map Pattern from Brad Frost's This is Responsive

What can i use?





Reference


device agnostic

Device Fragmentation


http://opensignal.com/reports/fragmentation-2013/ )

device fragmentation

http://opensignal.com/reports/fragmentation-2013/ )
 

device fragmentation

( http://www.lukew.com/ff/entry.asp?1679 )

Device agnostic reference



think fluid

fonts render differently across browsers and operating systems


http://blog.typekit.com/2010/10/05/type-rendering-on-the-web )
http://blog.typekit.com/2010/10/15/type-rendering-operating-systems )

pixels are an arbitrary measurement

http://inamidst.com/stuff/notes/csspx )

http://alistapart.com/article/a-pixel-identity-crisis )

fluid design tips:


use relative units: ems and percentages

define relationships between different elements

give your objects room to flex

Wrong: No margin for error


right: room to breath




documenting your design

  +
  +

writing features



"the gallery will respond to swipes as well as navigational buttons"


"after the tenth paragraph there will be a break and a full bleed image will be revealed"

writing interactive features



Code is written in conditions (if/then),
it’s good to think of your description in psudeocode:


 “if this element moves in to the browser window
then it’s opacity increases”


"if the user clicks the hide caption button
then the caption is hidden
and the icon changes to reflect it's closed state"

writing responsive features


if the screen is small
then the caption will sit below the image
otherwise the caption will rest over the image, anchored to the bottom”

"if the screen is small the image will be 100% width,
if the screen is a medium size it will be 50% width,
if the screen is large it will be 25% width"

define...


...explicitly

...for different screen sizes (small, medium, and large is a good start)

...for progressive enhancement

workflow

1. Designer and developer
analyze content and brainstorm
ideas and solutions

2. If A template is possible, 
developer provides the skeleton

3. Designer provides prototype 
accompanied by feature list


(prototype can be html, jpg, ai, etc...)

4. Iterate!

Made with Slides.com