New Malaysia Responsive Leaders, Participative Rakyat Ali ...
New Rules of The Responsive Web
-
Upload
matt-carver -
Category
Technology
-
view
4.325 -
download
1
Transcript of New Rules of The Responsive Web
#rwdrules
About Me
• Senior Technologist at Big Spaceship
• Author of “The Responsive Web”
• Spoke at HTML5.tx 2011
The Responsive Webprogramming for the user
4 days - 1,547 Miles
Hipster level: ~25
Hipster level: 99
A technology can completely change in a
year and a half.
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.
Work
Work
Home
Subway / Toilet
Creating
Creating
Consuming
Consuming
This is a revolutionary change.
~ F!anz Kafk"
Every revolution evaporates and leaves behind only the slime of a
new bureaucracy.
~ F!anz Kafk"
#rwdrules
Responsive Design Doesn’t End With Squishy
Rul# Numbe$ 1
Q: When somebody tells you to “check out this responsive site” what’s the first thing you do?
A: Scale the browser
In the infancy of responsive design, sites weren’t as
“responsive” as much as they were “squishy”.
Most sites strive to be responsive by scaling down the
layout only, resulting in site bloat.
display:none only hides the content
Variations to consider
• Browsers (inc. mobile)
• Screen size and orientation
• Capabilities
• Input types
Variations to consider
• Libraries / Frameworks used
• Assets Served
• Forms used
• Button size and placement
Devices released in one month in 2012
Optimize based on capabilities rather than on linear scale.
Linear scale is like Metroid.
The responsive web should be like Skyrim
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.
Mobile site.
Desktop site.
In Skyrim you can advance your character in a variety of ways and complete quests at will.
Don’t build for this
Start with a core, then ask:“Is anything available that I can
use to improve the user’s experience on this site?”
Feature Detection
#rwdrules
There is no responsive pixie dust.
Rul# Numbe$ 2
I eat at restaurants way too much.
Most responses to rule number 1 include adding new things to the
project, like deliverables and designs.
To avoid unnecessary over complication, we need a
streamlined process with new, streamlined deliverables.
Rapid prototypes
~ 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
The temptation here is to adjust the project workflow to go from
this:
Wireframe Comp Website
To this:
Wireframe
Comp Website
Prototype
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.
Foundation
#rwdrules
Your workflow will change.
Rul# Numbe$ 3
~ Albert Einstien
Insanity: doing the same thing over and over again and
expecting different results.
Responsive web design requires meaningful deliverables.
~ 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
Style Tiles
~ 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.
Iterate and communicate with the client, using style tiles and rapid prototypes to articulate
the end product.
#rwdrules
Your tools will change
Rul# Numbe$ 4
In my first apartment, I used one appliance to prepare 100% of my
food.
CSS Preprocessors SCSS, SASS, or LESS
Preprocessors can be used to streamline and organize CSS.
SMACSSScalable and Modular Architecture for CSS
Building scalable and efficient CSS is crucial to optimizing and maintaining responsive sites.
#rwdrules
The web is responsive by default.
Rul# Numbe$ 5
~ 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
In the responsive web, what you say trumps how you say it.
~ 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/
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/
Expensive
Expensive
Affordable
Affordable
Creating
Creating
Consuming
Consuming
Luxury
Luxury
Entertainment
Emergency
Determine what you have to say, and the format will become
obvious.
~ 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
#rwdrules
Embrace unpredictability.
Rul# Numbe$ 6
@Matthew_Carver
“The Responsive Web”manning.com/carver
37% off with this code: 13rw37
matthewcarver.com