Responsive Web Design
5 likes2,007 views
The document discusses responsive web design, which involves creating experiences that adapt to different environments and people. It notes that responsive design originated in architecture and is spreading to other fields like product design. The key idea is that a website should provide a singular experience that responds to different screen sizes, like desktops, tablets, and phones. Currently, many sites are designed for older desktop resolutions, but screens are increasingly diverse. Responsive design helps sites work well on all device types from small phones to large desktop monitors.
Responsive Web Design
- 1. RESPONSIVE WEB DESIGN Tuesday, 10 April, 12 two stories: responsive web design, but also a much bigger story. A clear trend that has really only emerged in the last two months, which is that we are on the cusp of the death of the PC.
- 2. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.” John Allsopp, “A Dao of Web Design” http://www.alistapart.com/articles/dao/ (April 7, 2000) Tuesday, 10 April, 12 This was written in 2000, almost 12 years ago and we have forgotten it.
- 3. WHAT IS RESPONSIVE DESIGN? Responsive design is about creating objects and experiences that respond or adapt to the people using them and to their changing environment. Tuesday, 10 April, 12 The term stems from a discipline within architecture called Responsive Architecture and is spreading to all fields of design.
- 4. Tuesday, 10 April, 12 A building that adapts to the people inside of it as well as the environment around it.
- 5. Tuesday, 10 April, 12 This car (FORD EVOS) knows its driver and adapts the seating position, temperature, music, GPS routes, gear shift timing, suspension stiffness, etc. to the driver’s preferred settings, past habits and data from the cloud.
- 6. Tuesday, 10 April, 12 Table leaving behind an imprint from a previous person
- 7. HOW DOES IT APPLY TO THE WEB? Responsive web design is about creating a singular experience that adapts and responds to the canvas or medium it is presented on. Tuesday, 10 April, 12
- 8. HOW CAN WE USE RESPONSIVE WEB DESIGN TO IMPROVE HOW WE BUILD SITES TODAY? Tuesday, 10 April, 12
- 9. 1920 pixels wide 960 pixels wide (1024 x 768) Tuesday, 10 April, 12 Let’s look at how we build sites today
- 10. 1920 pixels wide 960 pixels wide (1024 x 768) Tuesday, 10 April, 12 Let’s look at how we build sites today
- 11. 1920 pixels wide 960 pixels wide (1024 x 768) Tuesday, 10 April, 12 Let’s look at how we build sites today
- 12. HOW WE USED TO SURF (1024 x 768) Tuesday, 10 April, 12 We are building sites for how we used to surf
- 13. HOW WE SURF TODAY Tuesday, 10 April, 12 But this is how we surf today
- 14. We build for a screen size that represents less than 13% of desktop and laptop users today. Mobile devices (phones and tablets) now account for nearly 11% of all devices out there. In 2010, PCs outsold tablets 20 to 1. In 2011 it was 6 to 1. In all of 2011, 488 million smartphones were sold globally compared to only 415 million PCs. Tuesday, 10 April, 12
- 15. WHAT ABOUT TOMORROW? Tuesday, 10 April, 12
- 16. In 2012, 5% of tablets sold will be to households that already have one. By 2015 there will be 7.1 billion connected mobile devices worldwide. By 2016 half a billion connected consumer electronic devices (Blu-Ray players, TVs, game consoles, etc.) will be sold. Tuesday, 10 April, 12
- 17. WHAT SCREEN SIZE SHOULD WE BE BUILDING FOR? Tuesday, 10 April, 12 Let’s look at the displays out there
- 18. 6 MOST COMMON COMPUTER DISPLAY SIZES (DESKTOPS AND LAPTOPS) 1680 x 1050 1280 x 1024 1440 x 900 1280 x 800 1366 x 768 1024 x 768 Tuesday, 10 April, 12 The good news is displays with resolutions higher than 1024x768 now cover 85% of desktop displays...1024x768 is at 13% and dropping...though the iPad and iPad 2 caused a slight rebound in that number
- 19. iOS DEVICES 768 x 1024 iPad 640 x 960 Phone 4 and higher 1024 x 768 iPad 960 x 640 iPhone 4 and higher 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lower Tuesday, 10 April, 12 iPhone, landscape... and portrait. iPhone 4 has the same screen size, but double the resolution... iPad
- 20. 6 MOST COMMON ANDROID DEVICES 800 x 1280 600 x 1024 480 x 854 1280 x 800 480 x 800 480 x 640 1024 x 600 854800 x 480 640 x 480 x 480 320 x 480 480 x 320 Tuesday, 10 April, 12 yuk
- 21. HDTV 1920 x 1080 Tuesday, 10 April, 12
- 22. 2048 x 1536 FUTURE DEVICES? (iPAD 3) 768 x 1024 iPad 640 x 960 Phone 4 and higher 1024 x 768 iPad 960 x 640 iPhone 4 and higher 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lower Tuesday, 10 April, 12 This is the rumoured display size of an iPad 3
- 23. WE ARE ENTERING THE ERA OF... Tuesday, 10 April, 12
- 24. 2048 x 1536 CANVAS HELL 800 x 1280 Terms like ‘screen size’ and ‘page fold’ are 1920 x 1080 1680 x 1050 1280 x 1024 768 x 1024 600 x 1024 becoming meaningless. iPad 640 x 960 Phone 4 and higher 1440 x 900 480 x 854 1280 x 800 480 x 800 1366 x 768 1024 x 768 iPad 960 x 640 480 x 640 1024 x 600 4 and higher iPhone 854800 x 480640 x 480 x 480 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lower Tuesday, 10 April, 12 I think Cam got a hold of the slide... How could you ever build a website that caters to and effectively displays your content on each of these screens?
- 25. HOW DO WE SOLVE THIS PROBLEM WITH RESPONSIVE WEB DESIGN? Tuesday, 10 April, 12
- 26. HOW DO WE SOLVE THIS PROBLEM WITH RESPONSIVE WEB DESIGN? 4 STEPS Tuesday, 10 April, 12
- 27. STEP 1 SIMPLIFY OUR CANVAS: Tuesday, 10 April, 12
- 28. 4 COMMON RANGES 1920 + HDTV/Large Display 1280 ish Laptop/Tablet 700 - 1024 ish Tablet 320 - 640 ish Low-res Phone HDTVs/large monitors/ 1920- ∞ ish Laptops/ 1200-1600 ish Tablets (portrait)/ 800-1024 ish iPhone 3 &ish 320-480 4 (portrait) unknown future devices tablets (landscape) iPhone 4 (landscape) Tuesday, 10 April, 12 Not screen sizes, but ranges.
- 29. WHAT DOES THIS LOOK LIKE? Tuesday, 10 April, 12
- 30. http://www.breadandpepper.com/en/company/ http://upperdog.se/ http://designmodo.com/responsive-design-examples/ http://foodsense.is/ http://stephencaver.com/ https://jux.com/ Tuesday, 10 April, 12 This site will work from 1920px wide to 320px wide. And they don’t just stretch to fit each screen, they adapt and change themselves. http://stunningcss3.com/code/bakery/index.html
- 31. STEP 2 ADOPT A FLUID GRID SYSTEM: Tuesday, 10 April, 12
- 32. WHAT IS A GRID SYSTEM? Tuesday, 10 April, 12 The standard grid, not flexible. It is the structure that we build our designs around.
- 33. WHAT IS A FLUID GRID SYSTEM? Tuesday, 10 April, 12 A fluid grid-system adapts and changes in real-time
- 34. WIRE-FRAMING FOR A FLEXIBLE GRID SYSTEM Tuesday, 10 April, 12 Process will still need to be worked out, it will change how we work
- 35. DESIGNING FOR A FLEXIBLE GRID SYSTEM Tuesday, 10 April, 12
- 36. POPULAR FLEXIBLE GRID SYSTEMS Tuesday, 10 April, 12 These are all designed for a 1024 x 768 pixel display and smaller...
- 37. Tuesday, 10 April, 12 This grid system will scale down, or up, to any width. http://framelessgrid.com/
- 38. Tuesday, 10 April, 12 This one dynamically changes it’s columns and gutters in a very fluid way. http://goldengridsystem.com/
- 39. STEP 3 USE FLEXIBLE MEDIA: Tuesday, 10 April, 12
- 40. Tuesday, 10 April, 12 This image scales to fit each design. If we source the highest resolution images we can, we can adapt them for any screen.
- 41. STEP 4 MEDIA TYPES AND MEDIA QUERIES: Tuesday, 10 April, 12
- 42. MEDIA TYPES AND MEDIA QUERIES ALLOW: • Screen-size specific layouts • Screen-orientation specific layouts • Select media optimized for a device or screen resolution • Colours optimized for a device or screen • Different input options based on device (finger vs. mouse) Tuesday, 10 April, 12
- 43. SO, WHAT ARE WE SELLING? Tuesday, 10 April, 12
- 44. RIGHT NOW, WE SELL THIS: THEN WE SELL THIS: Tuesday, 10 April, 12
- 45. WE NEED TO START SELLING THIS: Your Website ? Phone Tablet Laptop Desktop HDTV Future Tuesday, 10 April, 12
- 46. WHAT’S NEXT FOR RESPONSIVE DESIGN? Tuesday, 10 April, 12
- 47. IT’S NOT JUST SIZE THAT MATTERS... Tuesday, 10 April, 12
- 48. ...IT’S HOW YOU USE IT... Tuesday, 10 April, 12 As the sensors in these devices get better we can do more. High contrast version of a site when sunlight is detected. Larger buttons when put into your biker jacket. Detecting a TV near by. Knowing that you’re taking a macro photo. Knowing that you’re an infant.
- 49. ...AND IT’S ABOUT THE LITTLE THINGS... iPHONE 3GS iPHONE 4S 3.5 INCH SCREEN 3.5 INCH SCREEN 480 x 320 960 x 640 163 PPI 326 PPI Tuesday, 10 April, 12 This is a trend we can expect to see in more and more displays...not just in mobile devices, but laptops and desktops too.
- 50. ...AND IT’S ABOUT MORE THAN JUST ADAPTING. IT’S ABOUT RESPONDING. Tuesday, 10 April, 12 Responsive is going to mean a whole lot more as more and more technology becomes more and more aware of its surroundings. It’s not going to just be about adapting, it’s going to be about responding.