Post on 28-Jan-2015
description
transcript
Henrik Ekelöf @henrikekelof
Robert Piirainen @robertpiira
‣ Introduction to Responsive
Design
‣ Answering common questions
‣ The way forward is flexibility,
not adapting to popular devices
Responsive Design
- A new cool way to build mobile web
What it is:
In fact:
is no
There is not a specific Web
for mobile devices.
It’s the same web.
640 x 480 640 x 480
800 x 600 800 x 600
1024 x 768 1024 x 768
1024 x 768
320 x 480
1024 x 768
320 x 480
768 x 1024
The web has moved beyond
the desktop, and it’s not turning
back.
whatever device or screen size
Responsive
Design
Flexible grids Flexible
media
Media
queries
Grid Layout
Flexible Media
img {
max-width: 100%
}
Media
Queries
CSS3
widthheightdevice-widthdevice-heightorientationaspect-
ratiodevice-aspect-ratiocolor...
Queries
320px
480px
768px
1024px
1200px
Breakpoints
Flexible grids Flexible
media
Media
queries
Problems and
Solutions
Wallpapers
Optimisation of
background images
in CSS ‣ Use Data URIs for images to be
displayed in all sizes
li { background:
url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHH
OVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfj
Z0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5B
AkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fi
yZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh
wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCB
MQiB0UjIQA7") no-repeat left center;}
Optimization of
background images
in CSS ‣ Use Data URIs for images to be
displayed in all sizes
‣ Use sprites
Sprites
Optimisation of background
images in CSS
‣ Use Data URIs for images to be
displayed in all sizes
‣ Use sprites
‣ Do not mix images for different screen
widths in the same sprite
Inline Pictures
Content Optimisation
images
‣ Use “Lazy Load” if you have many (or
large) images that only appear on
certain screen widths.
<img src="pixel.gif" data-original="example.jpg">
<img src="example.jpg">
Content Optimisation
images
‣ Use “Lazy Load” if you have many (or
large) images that only appear on
certain screen widths.
‣ Resize images on the server
<!DOCTYPE html>
<html>
<head>
<script>
document.cookie = 'resolution=' +
Math.max(screen.width, screen.height) +
'; path=/';
</script>
</head>
<body>
<img src="example.jpg" alt="">
Pictures
‣ The background images downloaded
‣ All inline images downloaded regardless
of whether they are shown or not
Legacy versions of
Internet Explorer (IE8 and older)
/* Style for small screens and basic style for all */.example { ... }@media
all and (min-width: 321px) {
/* Style for a slightly wider device (like the iPhone portrait) */ .example
{ ... }
}
@media all and (min-width: 481px) {
/* Style for a even wider device (like the iPhone landscape) */
.example { ... }
}
@media all and (min-width: 769px) {
/* Style for wide screens */ .example { ... }
}
<!DOCTYPE html>
<html>
<head>
<!--[if (gte IE 9)|!(IE)]><!-->
<link rel="stylesheet" href="rwd.css">
<!--<![endif]-->
<!--[if (lte IE 8)]>
<link rel="stylesheet" href="rwd-ie.css">
<![endif]-->
...
Responsive by design
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
We
should embrace the fact that the web
doesn’t have the same constraints,
and design for this flexibility.
The journey begins by letting go of
control, and becoming flexible.
A flexible web!
A flexible web
‣ Large variations in screen resolutions
Top 10 screen resolutions in Sweden during the last year
‣ Large variations in screen
resolutionsVarious devices with different
characteristics
A flexible web
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
Priority: 1
As an increasing variety of screen and window
sizes among users is the best solution to create a
layout that is flexible and can adapt to user's
needs and wishes. Avoid making a site with fixed
layout.
— 24-hour WebCreate a design that works
regardless of window and screen size
Mobile First
Strategy?
Losing 80% of your screen space forces
you to focus. You need to make sure that
what stays on the screen is the most
important set of features for your
customers and your business.
Semantically, meaningful markup
Separate design and layout
Introduce layout styles with media queries
"Mobile" CSSs + media queries = Desktop site
Responsive
design
http://www.flickr.com/photos/merlin/sets/72157622077100537/
Responsive
Tools
‣ Rendering of font differs depending on
browsers and operating systems
‣ Different browsers
‣ Impossible to visualize a responsive
layout
http://24ways.org/2009/make-your-mockup-in-markup
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
a
responsive
process
Summary
‣ Introduction to Responsive
DesignAnswering common
questions
‣ The way forward is flexibility,
not adapting to popular devices