New Rules of The Responsive Web
-
Upload
matt-carver -
Category
Technology
-
view
4.325 -
download
1
Transcript of New Rules of The Responsive Web
![Page 1: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/1.jpg)
#rwdrules
![Page 2: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/2.jpg)
About Me
• Senior Technologist at Big Spaceship
• Author of “The Responsive Web”
• Spoke at HTML5.tx 2011
![Page 3: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/3.jpg)
The Responsive Webprogramming for the user
![Page 4: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/4.jpg)
4 days - 1,547 Miles
![Page 5: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/5.jpg)
![Page 6: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/6.jpg)
Hipster level: ~25
![Page 7: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/7.jpg)
Hipster level: 99
![Page 8: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/8.jpg)
A technology can completely change in a
year and a half.
![Page 9: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/9.jpg)
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.
![Page 10: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/10.jpg)
Work
Work
Home
Subway / Toilet
![Page 11: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/11.jpg)
Creating
Creating
Consuming
Consuming
![Page 12: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/12.jpg)
This is a revolutionary change.
![Page 13: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/13.jpg)
~ F!anz Kafk"
Every revolution evaporates and leaves behind only the slime of a
new bureaucracy.
~ F!anz Kafk"
![Page 14: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/14.jpg)
#rwdrules
Responsive Design Doesn’t End With Squishy
Rul# Numbe$ 1
![Page 15: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/15.jpg)
Q: When somebody tells you to “check out this responsive site” what’s the first thing you do?
A: Scale the browser
![Page 16: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/16.jpg)
In the infancy of responsive design, sites weren’t as
“responsive” as much as they were “squishy”.
![Page 17: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/17.jpg)
Most sites strive to be responsive by scaling down the
layout only, resulting in site bloat.
![Page 18: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/18.jpg)
display:none only hides the content
![Page 19: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/19.jpg)
Variations to consider
• Browsers (inc. mobile)
• Screen size and orientation
• Capabilities
• Input types
![Page 20: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/20.jpg)
Variations to consider
• Libraries / Frameworks used
• Assets Served
• Forms used
• Button size and placement
![Page 21: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/21.jpg)
Devices released in one month in 2012
![Page 22: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/22.jpg)
Optimize based on capabilities rather than on linear scale.
![Page 23: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/23.jpg)
Linear scale is like Metroid.
![Page 24: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/24.jpg)
The responsive web should be like Skyrim
![Page 25: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/25.jpg)
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.
![Page 26: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/26.jpg)
Mobile site.
![Page 27: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/27.jpg)
Desktop site.
![Page 28: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/28.jpg)
In Skyrim you can advance your character in a variety of ways and complete quests at will.
![Page 29: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/29.jpg)
Don’t build for this
![Page 30: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/30.jpg)
Start with a core, then ask:“Is anything available that I can
use to improve the user’s experience on this site?”
![Page 31: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/31.jpg)
Feature Detection
![Page 32: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/32.jpg)
#rwdrules
There is no responsive pixie dust.
Rul# Numbe$ 2
![Page 33: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/33.jpg)
I eat at restaurants way too much.
![Page 34: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/34.jpg)
![Page 35: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/35.jpg)
Most responses to rule number 1 include adding new things to the
project, like deliverables and designs.
![Page 36: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/36.jpg)
To avoid unnecessary over complication, we need a
streamlined process with new, streamlined deliverables.
![Page 37: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/37.jpg)
Rapid prototypes
![Page 38: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/38.jpg)
~ Jonathan Smile% “Dive Into Responsive Prototyping With Foundation”
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.
http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation
![Page 39: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/39.jpg)
The temptation here is to adjust the project workflow to go from
this:
Wireframe Comp Website
![Page 40: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/40.jpg)
To this:
Wireframe
Comp Website
Prototype
![Page 41: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/41.jpg)
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.
![Page 42: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/42.jpg)
Foundation
![Page 43: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/43.jpg)
#rwdrules
Your workflow will change.
Rul# Numbe$ 3
![Page 44: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/44.jpg)
~ Albert Einstien
Insanity: doing the same thing over and over again and
expecting different results.
![Page 45: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/45.jpg)
Responsive web design requires meaningful deliverables.
![Page 46: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/46.jpg)
~ Mar& Boulton
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
http://www.markboulton.co.uk/journal/responsive-summit-workflow
![Page 47: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/47.jpg)
![Page 48: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/48.jpg)
![Page 49: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/49.jpg)
Style Tiles
![Page 50: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/50.jpg)
~ Samanth" Warren'tyletil.es
Style Tiles are a design deliverable consisting of fonts, colors and interface elements
that communicate the essence of a visual brand for the web.
![Page 51: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/51.jpg)
Iterate and communicate with the client, using style tiles and rapid prototypes to articulate
the end product.
![Page 52: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/52.jpg)
#rwdrules
Your tools will change
Rul# Numbe$ 4
![Page 53: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/53.jpg)
In my first apartment, I used one appliance to prepare 100% of my
food.
![Page 54: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/54.jpg)
![Page 55: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/55.jpg)
![Page 56: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/56.jpg)
![Page 57: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/57.jpg)
![Page 58: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/58.jpg)
CSS Preprocessors SCSS, SASS, or LESS
![Page 59: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/59.jpg)
Preprocessors can be used to streamline and organize CSS.
![Page 60: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/60.jpg)
SMACSSScalable and Modular Architecture for CSS
![Page 61: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/61.jpg)
Building scalable and efficient CSS is crucial to optimizing and maintaining responsive sites.
![Page 62: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/62.jpg)
#rwdrules
The web is responsive by default.
Rul# Numbe$ 5
![Page 63: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/63.jpg)
~ Si$ Tim Berners-Le#
[The web] should be accessible from any kind of hardware that
can connect to the internet: stationary or mobile, small
screen or large.
http://www.scientificamerican.com/article.cfm?id=long-live-the-web
![Page 64: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/64.jpg)
In the responsive web, what you say trumps how you say it.
![Page 65: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/65.jpg)
![Page 66: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/66.jpg)
~ Zach B!and, S!. Directo$ of Technolog% at NPR
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.
http://blog.programmableweb.com/2011/04/18/what-we-did-wrong-npr-improves-its-api-architecture/
![Page 67: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/67.jpg)
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/
![Page 68: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/68.jpg)
Expensive
Expensive
Affordable
Affordable
![Page 69: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/69.jpg)
Creating
Creating
Consuming
Consuming
![Page 70: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/70.jpg)
![Page 71: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/71.jpg)
Luxury
Luxury
Entertainment
Emergency
![Page 72: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/72.jpg)
Determine what you have to say, and the format will become
obvious.
![Page 73: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/73.jpg)
![Page 74: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/74.jpg)
![Page 75: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/75.jpg)
![Page 76: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/76.jpg)
~ Paul Robert Lloyd
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.
http://alistapart.com/article/the-web-aesthetic
![Page 77: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/77.jpg)
#rwdrules
Embrace unpredictability.
Rul# Numbe$ 6
![Page 78: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/78.jpg)
![Page 79: New Rules of The Responsive Web](https://reader031.fdocuments.us/reader031/viewer/2022013101/559e041d1a28ab086a8b47f8/html5/thumbnails/79.jpg)
@Matthew_Carver
“The Responsive Web”manning.com/carver
37% off with this code: 13rw37
matthewcarver.com