A primer on responsive design, various aspects on this technique, various examples, challenges and best practices in form of a case study of a past project as well as considerations and lessons learned.
10. New Devices Since 09/12
4"-5" Smartphones 9"-10" Tablets
Apple iPhone 5 (4" Apple iOS 6.0) iPad Gen 4 (9.7" Apple iOS 6.0)
Nokia Lumia 920 (4.5" Microsoft Windows 8) Microsoft Surface Tablet (10.6" Microsoft Windows 8)
HTC Windows Phone 8X (4.3" Microsoft Windows 8) Kindle Fire HD (8.9" Google Android 4.0 modified)
HTC Windows Phone 8S (4.0" Microsoft Windows 8) Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8)
Motorola Droid RAZR HD (4.7" Google Android 4.0) Acer Iconia Tab W510 (10.1" Microsoft Windows 8)
Motorola Droid RAZR M (4.3" Google Android 4.0) Dell Latitude 10 (10.1" Microsoft Windows 8)
Google/LG Nexus 4 (4.7" Google Android 4.2) Dell XPS 10 (10.1" Microsoft Windows 8)
Asus Vivo Tab RT (10.1" Microsoft Windows 8)
5"-6" Phone/Tablet Hybrids Google/LG Nexus 10 (10.055” Google Android 4.2)
Samsung Galaxy Note II (5.5" Google Android 4.0)
11"-17" Laptops & Convertibles (Tablet/Laptop)
7"-8" Tablets 13" MacBook Pro with Retina (13" Apple OSX 10.8)
iPad Mini (7.9" Apple iOS 6.0) Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8)
Kindle Fire HD (7" Google Android 4.0 modified) Lenovo ThinkPad Twist (12.5" Microsoft Windows 8)
Kindle Fire (7" Google Android 4.0 modified) Toshiba Satellite U925T (12.5" Microsoft Windows 8)
Google/LG Nexus 7 (7" Google Android 4.2) Dell XPS 12 (12.5" Microsoft Windows 8)
Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8)
20"-30" Desktops Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8)
Sony Tap 20 (20" touch screen Microsoft Windows 8) Acer Iconia W700 (11.6" Microsoft Windows 8)
21.5-inch iMac (21.5" Apple OSX 10.8) Sony Vaio Duo 11 (11.6" Microsoft Windows 8)
27-inch iMac (27" Apple OSX 10.8) Samsung Chromebook (11.6" Google Chrome OS)
http://www.lukew.com/ff/entry.asp?1646
11. “ It is the nature of the web to be
flexible, and it should be our role
as designers and developers to
embrace this.
– John Allsopp
http://www.alistapart.com/articles/dao/
12. What Is RWD?
★ Fluid Grids
★ Flexible Images
★ Media Queries
http://www.macrojuice.com/multimedia/responsive-web-design/
29. Content Strategy
★ Content First!
★ Simplify Structure, What’s Needed?
★ Design With Final Content
30. Designing In The Browser
★ Quick results & real testing
★ Use advantages of HTML5/CSS3
★ Prototyping extremely fast
★ Easy Changes (Colors, Fontsize, etc.)
★ Decide right in the browser
31. “ Using photoshop/fireworks for
responsive design is like bringing
a knife to a gunfight.
– Andy Clarke (@malarkey)
32.
33. The Common Workflow
Content
Strategy
Planning
And
Strategy
User
Research Copy
Wireframes
Visual
Lorem Ipsum Design
Dev
Lorem Ipsum
Test
Pon Kattera (@pkattera) - Design Process in the Responsive Age
34. The RWD Process
User Content Iterative Design & Development Prototype Handover
Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual Tech
Test
Prototype
User Content
Sketch RWD
Research Strategy
Prototype
Visual
Design
Wireframe
Pon Kattera (@pkattera) - Design Process in the Responsive Age
53. The Waterfall Process
Content
Strategy
Planning
And
Strategy
User
Research Copy
Wireframes
Visual
Lorem Ipsum Design
Dev
Lorem Ipsum
Test
Pon Kattera (@pkattera) - Design Process in the Responsive Age
54. The RWD Process
User Content Iterative Design & Development Prototype Handover
Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech
Test
Prototype
User Content
Sketch RWD
Research Strategy
Prototype
Visual
Design
Wireframe
Pon Kattera (@pkattera) - Design Process in the Responsive Age
55. Frontend
★ Rebuild Prototype?
★ Produce valid & clean code
★ Build Modules not pages
★ Create re-usable Code
56. Into The Unknown
★ Display Size & Resolution
★ Different Browsers & -versions
★ Different Device Capabilities
★ Connection Speed, Bandwidth
57. A Website doesn’t have to look
exactly the same on different
devices!
70. Responsive Images
★ Avoid unnecessary data
★ Same images for all devices
★ When to use Retina images?
★ <img> Tag isn’t ready yet
★ Polyfills = Just a workaround
80. Lessons Learned
★ Do not rush, set timing generously
(Content Strategy, RWD, Frontend, CMS)
★ Mobile First - Content First Design
★ Separate Layout & Design
★ Use LESS/Sass & Compass
83. The Last 3 Years
Year 2010 2011 2012
Mobile 3.300 9.000 20.400
(%) (2,5%) (6%) (14%)
Jul-Aug 1.900 4.500 12.500
(%) (3,5%) (7.5%) (18%)
84. The fact is that responsive web design
costs more… than doing nothing. Sure, you
could continue building sites the old
fashioned way and ignore the multitude of
web-enabled devices accessing the web
now and in the future. But this is 2012. At
the very least a web experience should
have at least some mobile consideration,
and at the very most a site should be full-
on mobile optimized.
http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/
85. “ If you want to be relevant on the
web today, your website must
adapt and perform on all the
devices that use the web.
– Mobify