The Web back in these days
flexible by default
Responsive Web Design
short intro to the history
Responsive layout ingredients
- Flexible layouts
- Flexible media
- Media queries
RWD
Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web.
Developing backend systems seems easier
- you have one server
- you have one database
- you have one coding language
- developing bullet proof modern frontends is difficult
What do we know about "the users web"?
Nowadays we don't know how and where the user visits our website
- we don't know the screen size
- we don't know the browser capabilities
- we don't know the connection speed
Current workflow
The common process in web projects
Changing design for client needs
Changing design for client needs
Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight
Photoshop looks good,
websites can't look that good!
Mobile first
Mobile first
- start to design for small screens
- concentrate on the important things
- try to reduce site navigation
- important content first
Content first
The web development workflow I follow is Coffee First.
Content first
Content first
Responsive content priority: The smaller the device, the greater need to show the most important content - top to bottom
Users can read your content differently, think of
- RSS
- Readability, Instapaper
- SEO?!
Steven Hay's workflow
Content first
Steven Hay's workflow
- Content inventory
- Content reference wireframes
- Design in text (structured content)
- Linear design
- Breakpoint graph
- Design for various breakpoints
- HTML design prototype
- Present prototype screenshots
- Present prototype after revision
- Document for production
It's impossible to predict all the complications of a responsive design up front. We need a more fluid workflow!
Style Tiles
Present clients with interface choices without making the investment in multiple photoshop mockups
Designing in the Browser
- take advantage of HTML5/CSS3
- Prototyping in browser can be faster
- Changes can be done faster
- if you do not want to design in the browser, decide in browser
Adobe Edge Reflow
Adobe Edge Reflow
Adobe newest baby (sneak preview)
You can't mockup performance in Photoshop
Performance
There's no correlation between the size of the screen and the amount of bandwidth available to it.
Performance
A potential consideration
- small screens + touch (mostly smartphones)
- large screens + touch (mostly tablets)
- large screens + keyboard/mouse (mostly desktops/laptops)
- desktop with UMTS stick » mobile?
Common Breakpoints
don't mix up CSS pixels and device pixel (Video)
- 320 pixels - smartphone portrait
- 480 pixels - smartphone landscape
- 768 pixels - a tablet in landscape
- 1024 pixels - some tablets, notebooks, desktop monitors
- 1200 pixels - widescreen display monitors
missing some?
- 360 pixels - Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)
- 600 pixels - small tablets (7") in portrait
- 1600 pixels - large monitors, TV?
- 603 pixels - huh, Nexus 7 device width is more than 600px (portrait)
- 568 pixels - haha, iPhone 5 in landscape
Future Breakpoints
What's next?
- ??? pixels - Kindle Fire HD, iPad Mini?, ...
- Blogpost from Luke Wroblewski "This Week In Mobile..." (7. September 2012)
Let the content choose your breakpoints!
Finding Breakpoints
Responsive Images
Testing
Real device testing is important
- consider early device testing
- not only testing the design, test the feeling too
- remote testing and debugging with Adobe Edge Inspect
Open Device Lab
- started from Jeremy Keith in Brighton
- list of Open Device Labs
Frameworks and Resources
Frameworks and Resources
- Foundation Framework
- Responsive Patterns
- Sass & Compass for faster development
- Styleguides – Pattern Primer
Trends are poison. It's such a shame that Responsive design is often degraded to being a “Web design trend”. It isn't. It's a new mindset.
Thank You!
</end>
Contact me via