Responsive Web Design – Or what exactly means mobile web?

Respon Web Daniel Kränz Design sive What exactly means mobile
web? @kraenzmann

» B.A. Industrial Design | HS Magdeburg-Stendal

» M.A. Interaction Design | HS Magdeburg-Stendal » B.A. Industrial
Design | HS Magdeburg-Stendal

» Mobile Design | deepblue networks AG » M.A. Interaction
Design | HS Magdeburg-Stendal » B.A. Industrial Design | HS Magdeburg-Stendal

» Junior Art Director | deepblue networks AG » Mobile
Design | deepblue networks AG » M.A. Interaction Design | HS Magdeburg-Stendal » B.A. Industrial Design | HS Magdeburg-Stendal

Hello.

http://edenspiekermann.com Example: Adaptive layout with breakpoints

http://bostonglobe.com Example: Fluid layout and breakpoints

http://theverge.com Example: Redirect via Server

How it all began

The approach http://alistapart.com/d/resonsive-web-design/ex/ex-site-flexible.html

Responsive Web Design is the approach that the layout respond
to the user’s screen size. RWD? What a lot of people think it is:

No real use case!

No real use case! Please, do not use this method
to develop or test your websites. Use browsers on the target devices instead!

Responsive Web Design is the approach that the layout, content
and development respond to the user’s environment based on screen size, platform, orientation and performance. RWD? In my opinion, it’s more than layout adaptation: – Credits to Kayla Knight –

It’s a new way of thinking about the web, including
devices, content, design & typography. Let us have a look why …

Layout: Case study

Built your own (smart) grid

Five (fixed) layouts http://danielkraenz.com Feature phones Smartphones Tablets Netbooks HDTVs/Desktops

Gridpak: Responsive grid generator http://gridpak.com

Media queries (DOM) <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css"
media="screen and (max-width: 463px)" href="smartphone.css" /> </head> <body> </body> </html>

Media queries (DOM) <link rel="stylesheet" type="text/css" media="screen and (min-width: 1224px)"
href="HDTV.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 960px) and (max-width: 1223px)" href="Desktop.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 959px)" href="Tablet.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 464px) and (max-width: 767px)" href="Smartphone.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-width: 463px)" href="Feature_phone.css" /> <link rel="stylesheet" type="text/css" media="print" />

Media queries (stylesheet) <head> <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head> @media only screen and (max-width: 463px) { /*put your code here*/ }

(Horizontal) Media queries @media only screen and (min-width: 1224px) {
/*put your code here*/} @media only screen and (min-width: 960px) and (max-width: 1223px) { /*put your code here*/} @media only screen and (min-width: 768px) and (max-width: 959px) { /*put your code here*/} @media only screen and (min-width: 464px) and (max-width: 767px) { /*put your code here*/} @media only screen and (max-width: 463px) { /*put your code here*/} @media print { /*put your code here*/}

Vertical media queries

Let’s play

Problem with this approach Mobile Site = Desktop Site +
Media Queries

Problem with this approach Mobile Site = Desktop Site +
Media Queries Fail

Server requests & ressources

Approach: Mobile first

What does that mean?

Most basic layout first HDTVs/Desktops Netbooks Tablets Smartphones Feature phones

Most basic layout first Less performance=less code & scripting: think
about media queries, java script and heavy frameworks wisely

about media queries, java script and heavy frameworks wisely More performance & feature support

about media queries, java script and heavy frameworks wisely More performance & feature support Don’t forget: These layouts are on mobile devices!

We should treat layout as an enhancement. Assume your first
media query is the absence of a media query. ” – Ethan Marcotte

Let’s play

Better approach Mobile site + media queries = Desktop site
(progressive enhancement)

Better approach Mobile site + media queries = Desktop site
(progressive enhancement) To everyone!

Different capabilities! » Touch interaction » Sensors » Portable device

» Mouse & keyboard » High performance » Large screen

» Mouse & keyboard » High performance » Large screen Super Hero

Wait! What about these guys?

… or this one?

… or this one? The (mobile) web is diverse!

What exactly is the (mobile) web – or more specifically
what isn't? Leads us to the question:

What do you think?

You think about these OS spontaneously? iOS Android

Well, there are more! (just to name a few) Windows
Phone Symbian

Device overview by OS iOS 480×320 (3:2) 960×640 (3:2) 1136×640
(16:9) Android 320×240 (4:3) 400×240 (15:9) 480×320 (3:2) 640×360 (16:9) 640×480 (4:3) 800×480 (15:9) 854×480 (16:9) 960×540 (16:9) 960×640 (3:2) 1280×720 (16:9) 1024×768 (4:3) 1280×768 (15:9) 1280×800 (16:10) 1920×1080 (16:9) Windows Phone 800×480 (15:9) 1280×720 (16:9) 1280×768 (15:9) Symbian 208×176 (13:11) 320×240 (4:3) 640×360 (16:9) MeeGo: Harmattan 854×480 (16:9) BlackBerry 320×240 (4:3) 400×360 (10:9) 480×320 (3:2) 480×360 (4:3) 640×480 (4:3) 800×480 (15:9) 720×720 (1:1) 1280x720 (16:9) 1280x768 (15:9) Maemo 800×480 (15:9) http://generatedcontent.org/post/34217358607/deviceresolution Smartphones

Device overview by OS iOS 1024×768 (4:3) 2048×1536 (4:3) BlackBerry
Tablet OS 1024×600 (16:9) Android 1024×600 (17:10) 1024×768 (4:3) 1280×800 (16:10) 1440×900 (16:10) 1920×1200 (16:10) 2560×1600 (16:10) Windows Tablet 1366×768 (16:9) http://generatedcontent.org/post/34217358607/deviceresolution Tablets

Device overview by OS Nokia OS 160×128 (5:4) 320×240 (4:3)
480×320 (3:2) 400×240 (15:9) Bada 400×240 (15:9) 800×480 (15:9) 480×320 (3:2) http://generatedcontent.org/post/34217358607/deviceresolution Feature phones E-Ink TV 800×600 (4:3) 1024×768 (4:3) 1200×824 (150:103) 1280×720 (16:9) 1920×1080 (16:9)

1280×720 (16:9) 1280×768 (15:9) 1280×800 (16:10) 1366×768 (16:9) 1440×900 (16:10)
1920×1080 (16:9) 1920×1200 (16:10) 2048×1536 (4:3) 2560×1600 (16:10) … 160×128 (5:4) 208×176 (13:11) 320×240 (4:3) 400×240 (15:9) 400×360 (10:9) 480×320 (3:2) 480×360 (4:3) 640×360 (16:9) 640×480 (4:3) 720×720 (1:1) 720×720 (1:1) 800×480 (15:9) 800×600 (4:3) 854×480 (16:9) 960×540 (16:9) 960×640 (3:2) 1024×600 (17:10) 1024×768 (4:3) 1136×640 (16:9) 1200×824 (150:103) Screen size overview (there will be more) Just in case you wan’t to support ‘all’ screen sizes

It’s thinking beyond screen resolutions! Don’t think the web is
320 x 480!

Don’t think the web is 320 x 480! Think beyond
screen resolutions.

Screen density & physical size 1024 x 768 Pixel 1024
x 768 Pixel iPad Mini iPad 1/2 Source: http://apple.com/pr

Screen density & physical size 163 ppi 132 ppi 1024
x 768 Pixel 1024 x 768 Pixel iPad Mini iPad 1/2 Source: http://apple.com/pr

Pixel density (CSS vs. Devie pixels) http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ x4 == Standard
Retina CSS Pixels Device Pixels height: 2px width: 2px height: 2px width: 2px

(Some) High density displays New iPad 264 ppi Samsung Galaxy
SIII 306 ppi Galaxy Nexus 316 ppi iPhone 4/4S 326 ppi LG Optimus LTE 329 ppi HTC Rezound 342 ppi https://dl.dropbox.com/u/75469230/responding-to-the-hi-res-web/index.html#/5

Smart media queries (for high pixel density displays) @media only
screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /*put your code here*/ }

How to handle Icons? One approach: Icon fonts http://sixrevisions.com/resources/free-icon-fonts/

Loading different sources: for video <video controls> <source src="movie-small.mp4" type="video/mp4"
media="all and (max-width:480px)"> <source src="movie-small.webm" type="video/webm" media="all and (max-width:480px)"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> </video>

Loading different sources: for images? <img alt"example"> <source src="example.png" width="100"
height="80"/> <source src="example.png" width="200" height="180"/> <source src="example.svg" width="400" height="400" media="min-device-width: 320px"/> </img>

Loading different sources: for images? <img alt"example"> <source src="example.png" width="100"
height="80"/> <source src="example.png" width="200" height="180"/> <source src="example.svg" width="400" height="400" media="min-device-width: 320px"/> </img> Maybe in the future!

Be part of the future web http://futurefriend.ly/ luke wroblewski, scott
jenson, brad frost, jeremy keith, lyza d. gardner, scott jehl, stephanie rieger, jason grigsby, bryan rieger, josh clark, tim kadlec, brian leroux, andrea trasatti

Be future friendly … not just mean to design and
perform well. It’s a lot about smart content delivery. What we need is a content strategy!

Content is still king. More than ever! Content – via
Karen McGrane

Content is still king. More than ever! Mobile Apps Mobile
Web Website Social Media Microsites Blogs Intranet E-Mail Print Tablet Apps Content – via Karen McGrane

Your app is your API.

user_timeline.json Array ( [0] => Array ( [created_at] => Fri
Nov 16 20:54:44 +0000 2012 [id] => ******* [id_str] => ******* [text] => This tweet is re-thought completely new. It's smart. Entirely different. Startet from scratch. Send from the brand new iPad mini ;) [source] => Twitter for iPad [truncated] => [in_reply_to_status_id] => [in_reply_to_status_id_str] => [in_reply_to_user_id] => [in_reply_to_user_id_str] => [in_reply_to_screen_name] => [user] => Array ( [id] => ******* [id_str] => ******* [name] => Daniel Kränz [screen_name] => kraenzmann [location] => Hamburg [url] => http://www.danielkraenz.com [description] => researcher. observer. grid lover. typography fan. creator. mobile designer. [protected] => [followers_count] => 102 [friends_count] => 145 [listed_count] => 5 [created_at] => Thu May 28 10:30:09 +0000 2009 Twitter API

Rethink your tools & your process Photoshop is awesome!

Rethink your tools & your process Photoshop is awesome! Really?

Photoshop is static!

Think about other tools! Layout-Tool (e.g. InDesign) for grids and
designs Texteditor (e.g. Sublime text 2) to code prototypes Browser (e.g. Chrome) to test and develop

To wrap up 1. Think about your content strategy (i.e.
API as your App). 2. Rethink your team communication, your process and your tools. 3. Be aware of diverse screen resolutions and device capabilities. 4. Test as often as you can on real devices. 5. Decide, if you really need a RWD approach!

Responsive Web Design by Ethan Marcotte Mobile First by Luke
Wroblewski Getting started The Elements of Content Strategy by Erin Kissane Content Strategy for Mobile by Karen McGrane

Responsive Design http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu http://de.slideshare.net/yiibu/pragmatic-responsive-design http://de.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server Links Mobile Design patterns http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/
http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial http://www.uxbooth.com/blog/designing-for-mobile-part-1-information-architecture/ Mobile App vs. Web App http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/ https://docs.google.com/present/view id=0ARVpkVHr1HpsZGd6cThnNzhfMTFuMmdnemZnag&hl=en&pli=1 http://blog.brightcove.com/de/2011/11/der-erfolg-der-hybrid-apps Responsive Design Patterns http://www.lukew.com/ff/entry.asp?1569 http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/ Responsive Design Tools http://gridpak.com/ https://gridsetapp.com/ http://www.lukew.com/ff/entry.asp?1599

<h1>Happy coding.</h1> <p>Questions? Answers!</p>

Responsive Web Design – Or what exactly means m...

Responsive Web Design – Or what exactly means mobile web?

More Decks by Daniel Kränz

Other Decks in Design

Featured

Transcript