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
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
What can i use?
Reference
device agnostic
Device Fragmentation
device fragmentation
device fragmentation
Device agnostic reference
think fluid
fonts render differently across browsers and operating systems
pixels are an arbitrary measurement
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...)