An Introduction to Responsive Design
Upcoming SlideShare
Loading in...5
×
 

An Introduction to Responsive Design

on

  • 1,318 views

Responsive design is a combination of techniques aiming to create interfaces able to adapt to a wide range of devices, optimising the user experience in each of them but using the same code-base. But ...

Responsive design is a combination of techniques aiming to create interfaces able to adapt to a wide range of devices, optimising the user experience in each of them but using the same code-base. But responsive design is not just about technology, as it also requires a different way of thinking and planning the development of interfaces.

Statistics

Views

Total Views
1,318
Views on SlideShare
1,309
Embed Views
9

Actions

Likes
4
Downloads
18
Comments
0

2 Embeds 9

http://blog.valtech.co.uk 8
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

An Introduction to Responsive Design An Introduction to Responsive Design Presentation Transcript

  • Henrik Ekelöf Robert Piirainen @henrikekelof @robertpiira
  • ‣ Introduction to Responsive Design‣ Answering common questions‣ The way forward is flexibility, not adapting to popular devices
  • Responsive Design
  • What it is:- A new cool way to build mobile web
  • In fact:
  • is no
  • There is not a specific Web for mobile devices. It’s the same web.
  • 640 x 480 800 x 600 1024 x 768
  • 1024 x 768320 x 480
  • 768 x 1024 1024 x 768320 x 480
  • The web has moved beyondthe desktop, and it’s not turning back.
  • whatever device or screen size
  • Responsive Design Flexible MediaFlexible grids media queries
  • Grid Layout
  • Flexible Media
  • img {max-width: 100%}
  • MediaCSS3 Queries
  • Querieswidthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolor...
  • Breakpoints320px480px 768px1024px1200px
  • Flexible MediaFlexible grids 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,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7") 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 { ... }@mediaall 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
  • Weshould embrace the fact that the webdoesn’t have the same constraints,and design for this flexibility.
  • The journey begins by letting go ofcontrol, and becoming flexible.
  • A flexible web!
  • A flexible web‣ Large variations in screen resolutions
  • Top 10 screen resolutions in Sweden during the last year
  • A flexible web‣ Large variations in screen resolutionsVarious devices with different characteristics
  • http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  • Priority: 1As an increasing variety of screen and windowsizes among users is the best solution to create alayout that is flexible and can adapt to usersneeds and wishes. Avoid making a site with fixedlayout.— 24-hour WebCreate a design that worksregardless of window and screen size
  • Strategy?Mobile First
  • Losing 80% of your screen space forcesyou to focus. You need to make sure thatwhat stays on the screen is the mostimportant set of features for yourcustomers and your business.
  • Responsivedesign Semantically, meaningful markup Separate design and layout Introduce layout styles with media queries "Mobile" CSSs + media queries = Desktop site
  • 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
  • aresponsive process
  • Summary‣ Introduction to Responsive DesignAnswering common questions‣ The way forward is flexibility, not adapting to popular devices
  • Henrik Ekelöf Robert Piirainen@henrikekelof @robertpiira