New Rules of The Responsive Web
18 likes9,552 views
This document discusses 6 rules for responsive web design: 1. Responsive design doesn't end with squishy layouts - optimize based on user capabilities rather than just screen size. 2. There is no responsive pixie dust - streamline workflows and use rapid prototypes and style tiles to communicate fluid layouts. 3. Your workflow will change - iterate designs quickly through prototypes rather than big reveals. 4. Your tools will change - leverage preprocessors like SASS and frameworks like Foundation for responsive coding. 5. The web is responsive by default - prioritize content and build APIs to support multiple platforms. 6. Embrace unpredictability - acknowledge the constraints of different devices
![The aim is to remove The Big
Reveal: [...] the thing designers
do where they squirrel away for
a few days and then come back
and go ‘ta da, look what I made!’.
That’s just so risky
~ Mark Boulton
http://www.markboulton.co.uk/journal/responsive-
summit-workflow](https://image.slidesharecdn.com/newrules-130202103015-phpapp01/85/New-Rules-of-The-Responsive-Web-46-320.jpg)
![[The web] should be accessible
from any kind of hardware that
can connect to the internet:
stationary or mobile, small
screen or large.
~ Sir Tim Berners-Lee
http://www.scientificamerican.com/article.cfm?id=long-
live-the-web](https://image.slidesharecdn.com/newrules-130202103015-phpapp01/85/New-Rules-of-The-Responsive-Web-63-320.jpg)
![[html5tx] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-html5tx-130202100125-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[wvbcn] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv13v2-130629093334-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![Progressive Enhancement & Mobile [Funka 2012]](https://cdn.slidesharecdn.com/ss_thumbnails/progressiveenhancementmobile-120418173201-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to New Rules of The Responsive Web (20)
Ad
Recently uploaded (20)
Ad
New Rules of The Responsive Web
- 1. #rwdrules
- 2. About Me • Senior Technologist at Big Spaceship • Author of “The Responsive Web” • Spoke at HTML5.tx 2011
- 3. The Responsive Web programming for the user
- 4. 4 days - 1,547 Miles
- 8. A technology can completely change in a year and a half.
- 9. Since then: • 2 iPhones have been released • Smart phones have become the norm • Tablets have grown in both reach and variety • Responsive web design has become a near ubiquitous buzzword.
- 10. Work Work Home Subway / Toilet
- 11. Creating Creating Consuming Consuming
- 12. This is a revolutionary change.
- 13. Every revolution evaporates and leaves behind only the slime of a new bureaucracy. ~ Franz Kafka
- 14. Rule Number 1 Responsive Design Doesn’t End With Squishy #rwdrules
- 15. Q: When somebody tells you to “check out this responsive site” what’s the first thing you do? A: Scale the browser
- 16. In the infancy of responsive design, sites weren’t as “responsive” as much as they were “squishy”.
- 17. Most sites strive to be responsive by scaling down the layout only, resulting in site bloat.
- 18. display:none only hides the content
- 19. Variations to consider • Screen size and orientation • Browsers (inc. mobile) • Capabilities • Input types
- 20. Variations to consider • Libraries / Frameworks used • Assets Served • Forms used • Button size and placement
- 21. Devices released in one month in 2012
- 22. Optimize based on capabilities rather than on linear scale.
- 23. Linear scale is like Metroid.
- 24. The responsive web should be like Skyrim
- 25. In Metroid you start with a simple gun and add new weapons, tools, and abilities as you progress through the game, but ultimately the game follows a linear path.
- 26. Mobile site.
- 27. Desktop site.
- 28. In Skyrim you can advance your character in a variety of ways and complete quests at will.
- 29. Don’t build for this
- 30. Start with a core, then ask: “Is anything available that I can use to improve the user’s experience on this site?”
- 32. Rule Number 2 There is no responsive pixie dust. #rwdrules
- 33. I eat at restaurants way too much.
- 35. Most responses to rule number 1 include adding new things to the project, like deliverables and designs.
- 36. To avoid unnecessary over complication, we need a streamlined process with new, streamlined deliverables.
- 37. Rapid prototypes
- 38. In the next five years, devices will be the name of the game and that’s not just screen size or browser we’re talking about. Interfaces will change, input will change, the way we use the web will change. We need to start gearing up for that right now. ~ Jonathan Smiley “Dive Into Responsive Prototyping With Foundation” http://alistapart.com/article/dive-into-responsive- prototyping-with-foundation
- 39. The temptation here is to adjust the project workflow to go from this: Wireframe Comp Website
- 40. To this: Wireframe Prototype Comp Website
- 41. This is just adding a layer of complication to the process. It does little to solve our root problem, which is the need to articulate fluid layout.
- 42. Foundation
- 43. Rule Number 3 Your workflow will change. #rwdrules
- 44. Insanity: doing the same thing over and over again and expecting different results. ~ Albert Einstien
- 45. Responsive web design requires meaningful deliverables.
- 46. The aim is to remove The Big Reveal: [...] the thing designers do where they squirrel away for a few days and then come back and go ‘ta da, look what I made!’. That’s just so risky ~ Mark Boulton http://www.markboulton.co.uk/journal/responsive- summit-workflow
- 49. Style Tiles
- 50. Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. ~ Samantha Warren styletil.es
- 51. Iterate and communicate with the client, using style tiles and rapid prototypes to articulate the end product.
- 52. Rule Number 4 Your tools will change #rwdrules
- 53. In my first apartment, I used one appliance to prepare 100% of my food.
- 58. CSS Preprocessors SCSS, SASS, or LESS
- 59. Preprocessors can be used to streamline and organize CSS.
- 60. SMACSS Scalable and Modular Architecture for CSS
- 61. Building scalable and efficient CSS is crucial to optimizing and maintaining responsive sites.
- 62. Rule Number 5 The web is responsive by default. #rwdrules
- 63. [The web] should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large. ~ Sir Tim Berners-Lee http://www.scientificamerican.com/article.cfm?id=long- live-the-web
- 64. In the responsive web, what you say trumps how you say it.
- 66. Having an API has allowed us at NPR.org to be highly efficient at building new platforms such as iPhone, Android, iPad and Chrome app because we only have to build the presentation logic – the ‘data’ is already ready to go. ~ Zach Brand, Sr. Director of Technology at NPR http://blog.programmableweb.com/2011/04/18/what-we- did-wrong-npr-improves-its-api-architecture/
- 67. Smartphone use by teenagers has tripled in 2 years. - Consumer Reports In five years, most Africans will have smartphones ~ TechCrunch http://news.consumerreports.org/electronics/2011/07/ teenage-smart-phone-use-triples-in-two-years.html http://techcrunch.com/2012/06/09/feature-phones-are- not-the-future/
- 68. Expensive Expensive Affordable Affordable
- 69. Creating Creating Consuming Consuming
- 71. Luxury Luxury Entertainment Emergency
- 72. Determine what you have to say, and the format will become obvious.
- 76. As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all. ~ Paul Robert Lloyd http://alistapart.com/article/the-web-aesthetic
- 77. Rule Number 6 Embrace unpredictability. #rwdrules
- 79. “The Responsive Web” manning.com/carver 37% off with this code: 13rw37 @Matthew_Carver matthewcarver.com