responsive web design (headstart techtalks)
DESCRIPTION
Introduction to Responsive Web Design.TRANSCRIPT
The Chronicles Of Responsive Web Design
HeadStart TechTalks Mumbai November 02, 2012
“Stop Thinking in Pages. Start Thinking in Systems.” - Jeremy Keith
Demands Customers today access your website from heterogeneous
devices. Web as a platform is forced to become device
agnostic.
Option 1 Dynamically serving different HTML on the same URL
Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on
whether the user agent is a desktop or a mobile device. GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
Option 2 Separate mobile URLs
A common practice followed by many i.e., pages on www.example.com serving desktop users having corresponding
m.example.com pages serving mobile users.
Annotations on the desktop page
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com/page-1" >
Annotations on the mobile page
<link rel="canonical" href="http://www.example.com/page-1" >
Option 3 Responsive Web Design aka RWD
And this is what we gonna talk about...
What is RWD? ONE URL
+ SINGLE CONTENT
+ ONE CODE
+ CSS3 MEDIA QUERIES
= MULTIPLE DEVICES
Responsive Web Design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based in screen size,
platform and orientation.
Key Features of RWD?
Feature 1 Flexible Grid
Feature 2 Flexible Images
Code img {
max-width: 100%;
}
Instead of just rendering at its native width and overflowing its containing box, the image
would render at its native dimensions as long as its width didn’t exceed the width of its container.
Feature 3 CSS3 Media Queries & Screen Resolutions
/* Visibility Classes ---------------------- */
/* Standard visibility targeting */
.show-for-small, .show-for-medium, .hide-for-large, .show-for-xlarge { display: none !important; }
.hide-for-xlarge, .show-for-large, .hide-for-small, .hide-for-medium { display: block !important; }
/* Very large display targeting */
@media only screen and (min-width: 1441px) { .hide-for-small, .hide-for-medium, .hide-for-large, .show-for-xlarge { display: block !important; }
.show-for-small, .show-for-medium, .show-for-large, .hide-for-xlarge { display: none !important; } }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { .hide-for-small, .show-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }
.show-for-small, .hide-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }
/* Small display targeting */
@media only screen and (max-width: 767px) { .show-for-small, .hide-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }
.hide-for-small, .show-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }
/* Orientation targeting */
.show-for-landscape, .hide-for-portrait { display: block !important; }
.hide-for-landscape, .show-for-portrait { display: none !important; }
@media screen and (orientation: landscape) { .show-for-landscape, .hide-for-portrait { display: block !important; }
.hide-for-landscape, .show-for-portrait { display: none !important; } }
@media screen and (orientation: portrait) { .show-for-portrait, .hide-for-landscape { display: block !important; }
.hide-for-portrait, .show-for-landscape { display: none !important; } }
What is the need for mobile
version anyways? • Allows websites to reach more people (80% of the world’s population
has a mobile device, appx 90% of phones sold in 2012 equipped with
browser) – (I am sure you want this)
• On mobile devices you can take advantage of new
technologies (geolocation, touch events and more)
Advantages Of Responsive Web Design
Better
PERFORMANCE
Saves TIME SEO BENIFITS Saves MONEY
Wider Browser
Support
Google Loves It Too
“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the
same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's
recommended configuration”
Via: https://developers.google.com/webmasters/smartphone-sites/details
Few Responsive Sites By Google • http://picasa.google.com/ • http://www.google.com/intl/en/chrome/devices/ • http://www.google.com/events/sciencefair/ • http://www.google.com/culturalinstitute/#!home • http://www.google.com/goodtoknow/ • http://www.google.com/about/
PriceBaba On Large Screens / Desktops
#1
#2
PriceBaba with Responsive Web Design
on mobile / small screen devices
#1 #2
In Perfect World We Would End Here.
But Sorry We Don’t Live in Perfect World.
Few More Things To Come!
Wait For It!
CONS?
• Takes Time To Load
• SEO Ranking On mobile will be different than
ranking on desktop (via smashinghub.com)
o Google-Mobile Bot v/s Google Bot – different keywords to target for
mobile users
• Takes time to understand responsive design and
build it. o You have to (re)DESIGN your website from scratch
• Wireframes and mock-ups are needed before
building up for mobile and desktop o layout changes might take an extra effort
Few More Things… Below are the few fancy stuff you can use while
playing with Responsive Web Design: o RESS – Responsive Design + Server side components
o FITTEXT
o Modernizr.js / enquire.js
o jQuery UI – Touch Punch
o Style Tiles
o Fit Vids
Frameworks for RWD • Foundation
o PriceBaba; SwitchMe; ProjectHeena; InstaMojo uses Foundation
• Twitter Bootstrap o SmartMumbaikar uses Bootstrap
• inuit.css
• Fluid Baseline Grid
• Less Framework 4
• SimpleGrid
References • seomoz.org
• Bizdharma.com
• smashinghub.com
• labnol.org
• And…. Google
One More Thing
Responsive Web Design Is Not The Solution To World
Peace
It is evolving, might not be fit for all kinds of website,
look before you leap.
Thank You!
Tirthesh J Ganatra | [email protected] | @GanatraT