Responsive Web Design – A collaboration of different disciplines

Responsive Web Design A collaboration of different disciplines

Warm up Facing the problems of the web today.

Example for old era of (static) websites on different devices

Fixed layout, that don‘t adapt anything

(Mobile) Browser scale the static website into the device viewport

Website is only accessible via zooming: poor user experience is
the result

Goal: Creating a digital product, that adapt to different environments,
…

… that is mobile optimized and perform very well.

One possible solution to address mobile (touch) devices, such as
smartphones, tablets and desktop computers (and maybe more) at the same time, is responsive web design.

RWD Basics Good to know.

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

Responsive Web Design is the approach that the layout respond
to the user’s screen size. Well, it‘s much more than that. Let‘s go more into detail … What is RWD? What a lot of people think it is:

How responsive web ”began“ http://alistapart.com/article/responsive-web-design/

Marcotte's approach http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html

Media Queries (for screens) from – to from – to
from – to

Media Queries (for screens)

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

Printers are devices as well (that can be adressed via
media queries)

Breakpoints Breakpoint Breakpoint from – to from – to from
– to

The (mobile) web is diverse: many devices with different resolutions
and pixel densities makes it hard deciding which devices to support. The possibility to change the screen orientation increases the number of screen widths.

Smartphone resolutions in the wild 540 x 960 Motorola Photon
4g 640 x 960 480 x 800 720 x 1280 480 x 320 320 x 240 320 x 480 Apple iPhone 4s Nokia Lumia 800 Google Galaxy Nexus BlackBerry Bold 9000 BlackBerry Curve HTC Wildfire S x2

Tablet resolutions in the wild between 7˝ and 10˝ 1024
x 600 800 x 480 2048 x 1536 1280 x 800 2560 x 1600 Google Nexus 10 Motorola Xoom Apple iPad Dell Streak 7 BlackBerry Playbook 1024 x 768 x2 x2

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

This is the web

This (and much more) will be the web

Breakpoints should never be defined by existing devices – but
be set where the content of the website collapse. Prototyping in the browser and on real devices is required, to find out how many layouts/templates your website will have. Learning

Approach #1: Adaptive layout via breakpoints 1 1 1 320
Pixel 768 Pixel 1024 Pixel 2 3 4 5 2 3 4 5 4 2 3 5

Approach #1: Adaptive layout via breakpoints 1 1 1 320
Pixel 768 Pixel 1024 Pixel 2 3 4 5 2 3 4 5 4 2 3 5 Pre-defined layout widths form the content or its container.

http://ia.net Approach #1: Adaptive layout via breakpoints in the wild
(more or less)

Approach #1: Adaptive layout via breakpoints BENEFITS * full control
of div container, text lengths and breaks * Pixel precise elements in the browser (as in layouts) DISADVANTAGES * addresses only selected screen widths * losses by fixed widths

Approach #2: Fluid layout and breakpoints 100 %, max 1024
Pixel 100 % 100 % 45 %, max 500 Pixel 45 %, max 500 Pixel 30 % 30 % 30 % 45 % 45 % 30 % 30 % 30 % 100 % 100 % 100 % 100 % 320 – 480 Pixel 481 – 768 Pixel 769 – 1024 Pixel

Fluid columns let the content float – depending on the
screen width. All nested elements grow or shrink with them. At defined values the website adapt to another layout. Approach #2: Fluid layout and breakpoints 100 %, max 1024 Pixel 100 % 100 % 45 %, max 500 Pixel 45 %, max 500 Pixel 30 % 30 % 30 % 45 % 45 % 30 % 30 % 30 % 100 % 100 % 100 % 100 % 320 – 480 Pixel 481 – 768 Pixel 769 – 1024 Pixel

http://bostonglobe.com Approach #2: Fluid layout and breakpoints in the wild

Approach #2: Fluid layout and breakpoints BENEFITS * maximum support
of different screen resolutions * use of the entire screen space DISADVANTAGES * demanding basic structure or complex grid * no pixel-precise website (fluid grid/columns) * breaks, text lengths, etc. vary – no full control

Approach #3: Responsive Design + Server Side Components (RESS) Layout
S Layout M Layout L

Approach #3: Responsive Design + Server Side Components (RESS) Website
request Layout S Layout M Layout L

request What kind of device? Layout S Layout M Layout L

request What kind of device? Tablet XY! Layout S Layout M Layout L

request What kind of device? Delivery of appropriate site Tablet XY! Layout S Layout M Layout L

http://cnn.com Approach #3: RESS in the wild Updated

Approach #3: RESS BENEFITS * Super-performance website * Adequate, device-optimized
page will be delivered DISADVANTAGES * can be very complex, since high-level APIs operate in the background * complex queries and server-side frameworks are necessary * can lead to false linking (UA sniffing and device detection not always correct) * time intensive * caching problems more information: http:/maddesigns.de/RESS/

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! Mobile Apps Mobile
Web Website Social Media Microsites Blogs Intranet E-Mail Print Tablet Apps Content – via Karen McGrane

Your app is your API.

Device detection (e.g. via Wireless Universal Resource FiLe (WURFL))

User Agent (e.g. Browser, E-Mail-Client, News reader) User Agent iPhone
5 mit iOS 7 Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/ 537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53

User Agent (e.g. Browser, E-Mail-Client, News reader) User Agent iPhone
5 mit iOS 7 Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/ 537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53 hard & unreliable

Client side feature detection (e.g. HTML 5/CSS 3 via modernizr)
http://modernizr.com

Polyfills (e.g. for HTML 5/CSS 3) https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

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. In my opinion, it’s more than layout adaptation: What is RWD?

Performance A No. 1 topic!

You speak of performance? Why? Performance is often one of
the most underrated topics in RWD.

You speak of performance? Why? If the loading time of
your website will take more than 5 seconds, you lose your user before you can display your shiny designs.

You speak of performance? Why? Long loading time of your
website will not forgiven by the users! Maybe they will never come back to visit your website again.

Top down approach (graceful degradation)

Top down approach (graceful degradation) Desktop Website + Media Queries
+ Code = Mobile Site

Mobile devices get more source code than powerful devices, they
partly can't even handle! Top down approach (graceful degradation) Fail

Different capabilities! » Touch interaction » Sensors » Portable device
» Mouse & keyboard » High performance » Large screen

Wait! What about these guys?

… or this one? The web is diverse!

Device feature » Touch interaction » Sensors » Portable device
» Mouse & keyboard » High performance » High-end browser » Keypad interaction » WAP » Portable device » Keypad interaction » Large screen » Couch Mode » Shared device

” – Bryan and Stephanie Rieger We should treat layout
as an enhancement. Assume your first media query is the absence of a media query.

Bottom up approach (progressive enhancement or mobile first)

Bottom up approach (progressive enhancement or mobile first) Mobile Website
+ Media Queries + Code = Desktop Site

Bottom up approach (progressive enhancement or mobile first) Mobile devices
only get the source code, they can handle! This creates an increase in performance and satisfaction among users.

Bottom up approach (progressive enhancement or mobile first) Mobile devices
only get the source code, they can handle! This creates an increase in performance and satisfaction among users. … will be delivered to each client – unless it provides more opportunities.

Approach: Mobile first

Media Queries body { /*put your basic code here*/} @media
only screen and (min-width: 464px) and (max-width: 767px) { /*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: 960px) and (max-width: 1223px) { /*put your code here*/} @media only screen and (min-width: 1224px) { /*put your code here*/} @media print { /*put your code here*/}

Let’s play

Learning Peformance is no longer an aspect that should be
taken into account in the second step – today it‘s a quality feature, that needs your attention from the first minute of your project.

Pixel, vectors & Co. A Designer-Developer-Collaboration.

DPI vs. PPI Web Print

DPI vs. PPI Web PPI (Pixels per Inch) Print DPI
(Dots per Inch)

Standard resolution @1x 320 x 320 Pixel e.g. iPhone 3
with 163 Pixel per Inch (ppi)

Retina resolution @2x (4 times the number of pixels compared
to standard resolution) x2 x2 640 x 640 Pixel e.g. iPhone 4 with 326 Pixel per Inch (ppi)

Standard resolution @1x image example 320 x 320 Pixel

What retina devices would do normally: display the image at
half of the size 50% 50% 320 x 320 Pixel

What they really do: scaling images by 50 percent 320
x 320 to 640 x 640 Pixel x2 x2

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

Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ Standard Device Pixels

Device pixels vs. CSS pixels http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ Standard CSS Pixels Device
Pixels height: 2px width: 2px

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

Device pixels vs. CSS 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

How do you get a one pixel thin line on
a retina display? Any suggestions? Question

There are not just devices with @1x and @2x resolutions!
In the wild there are devices with @1,5, @3x, @4x et cetera resolutions. By the way

(Some) High density displays iPad Air 264 ppi iPhone 5/5S
326 ppi Samsung Galaxy S4 441 ppi LG Nexus 5 445 ppi HTC One 468 ppi https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

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*/ }

Guess what we will have in the future! What do
we do now? Be resolution independent! Learning

Vectors vs. pixels vector shape pixel graphic

Icon sprites for @1x; @1,5x; @2x; @3x? Mhhh … sprite
example preparing a sprite http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/

Scalable Vector Graphics (SVGs)

SVG export

How does this SVG look like for the browser? <?xml
version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve"> <g> <path fill-rule="evenodd" clip-rule="evenodd" fill="#2D2D2D" d="M505.072,673.393h13.608c1.5,0,2.722,1.218,2.722,2.721v13.609 c0,1.503-1.222,2.721-2.722,2.721h-13.608c-1.5,0-2.722-1.218-2.722-2.721v-13.609C502.351,674.61,503.572,673.393,505.072,6 73.393 z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#2D2D2D" d="M637.288,36.782H386.462c-21.042,0-38.097,17.056-38.097,38.097 v619.124c0,21.042,17.055,38.101,38.097,38.101h250.826c21.042,0,38.097-17.059,38.097-38.101V74.879 C675.385,53.838,658.33,36.782,637.288,36.782z M511.88,73.274c2.628,0,4.761,2.132,4.761,4.764c0,2.629-2.133,4.762-4.761,4.762 c-2.635,0-4.768-2.133-4.768-4.762C507.112,75.406,509.245,73.274,511.88,73.274z M488.742,97.09h46.263 c3.007,0,5.443,2.133,5.443,4.765c0,2.629-2.437,4.762-5.443,4.762h-46.263c-3.004,0-5.44-2.133-5.44-4.762 C483.302,99.223,485.738,97.09,488.742,97.09z M511.873,713.619c-17.532,0-31.745-14.213-31.745-31.749 c0-17.533,14.213-31.749,31.745-31.749c17.533,0,31.749,14.216,31.749,31.749C543.622,699.406,529.406,713.619,511.873,713.6 19z M653.165,630.506H370.588V135.209h282.577V630.506z"/> </g> </svg>

Not every information is needed: optimize your SVGs (e.g. via
svgo-gui) https://github.com/svg/svgo-gui

SVG support: need a fallback? http://caniuse.com/#search=svg

Icon fonts (e.g. via IcoMoon) http://icomoon.io/app/#/select

What you get: .eot, .ttf, .woff http://icomoon.io/app/#/select/font

Retina resolution is a real topic for assets like icons,
images that you want to display on your website or layouts, that should be tested on real devices. Learning

Responsive Images? Oooh … huge topic! https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 16 kB 54
kB 187 kB

Loading different sources for images in your HTML-File? That would
be nice. <picture 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"> </picture>

But … how to create layouts in Photoshop right?

Ignore the old Photoshop dialogue! Don‘t get confused by the
old Photoshop dialogue: Important are the real pixels of your layout – not the resolution in dpi.

Layout example in standard resolution @1x

Want to create a layout in retina resolution? Double the
pixels! @2x

It doesn't matter, if you create layouts in retina or
standard resolution. Most of the time layouts are a tool to discuss different solutions with your frontend team or present them to clients. Learning

Starter Kit Helpful tips to get started.

Form a team and assign roles

Kick your waterfall workflow Concept Design Development Launch

What if something change? Bad Concept Design Development Launch

Work interdisciplinary and iterative Concept Development Launch Release Design

Involve every team member from the beginning of the project

Try to communicate ideas visually

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasdd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Never start before you know something about your content Kill Lorem ipsum!

Choose a flexible grid, that matches your needs

… and play around with typography deepblue Academy 27.02.2014 Responsive
Web Design – ein Zusammenspiel unterschiedlicher Disziplinen Der Vortrag hat zum Ziel über Grundlagen, Methoden, Ansätze, Best Practises und Arbeitsweisen im Responsive Design/Responsive Frontend Development zu informieren. Ein besonderer Fokus der Academy liegt darauf, eine Brücke zwischen Konzept, Design und Frontend Entwicklung zu schlagen, um den alltäglichen Arbeitsablauf in Projekten mit einem Responsive Design Anteil zu stärken. Der Vortrag ist damit nicht nur für die Kreation interessant – sondern soll die verschiedenen Gewerke in der Agentur in einen Dialog bringen – um zukünftig unsere interdisziplinäre Zusammenarbeit zu vertiefen.

Use tools like typecast, to choose the right web fonts
and combinations in the browser http://typecast.com

Forget to create all the different layout templates of a
website Layout L Layout M Layout S

Create a global design language with your client and design
a master. Then just continue on with components. Learning

Style tiles can help you to find the right visual
design http://styletil.es

Example: TechCrunch http://superfriend.ly/TechCrunch

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

Go for prototyping with basic HTML/CSS. http://www.sublimetext.com

No frontend skills? Don't worry: take frameworks like foundation as
your base. http://foundation.zurb.com

Custom built: choose your colors, set your grid and have
a lot of feature out of the box http://foundation.zurb.com/develop/download.html#customizeFoundation

Create a pattern library (online style guide or library for
web components) http://style.codeforamerica.org

Use dev tools all time while development dev tools: right
click in the browser > inspect element

Rethink your tools of collaborative work http://github.com

Take browsers on real devices as canvas for decisions and
client presentations Browsers display elements often very differently!

Create and discuss a browser and device matrix with your
client Desktop Mobile

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

Discussion Questions? Answers!

Responsive Web Design – A collaboration of different disciplines

Responsive Web Design – A collaboration of different disciplines

More Decks by Daniel Kränz

Other Decks in Design

Featured

Transcript