Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

52
RESPONSIVE WEB DESIGN WORKSHOP Kim Chee Leong

description

Workshop about responsive web design (RWD), given on 13 Februari 2013. This is a presentation about how to create a responsive website. Different tools and libraries which are used for RWD are covered Examples used in the workshop can be found here: https://github.com/Goldmund-Wyldebeast-Wunderliebe/rwd-workshop

Transcript of Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

Page 1: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RESPONSIVE WEB DESIGN WORKSHOPKim Chee Leong

Page 2: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

WHO AM I?

• Kim Chee Leong

• Software engineer, lead developer

• Tech oriented, with a feeling for aesthetics on the web

Page 3: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

WHO IS GWW?

• Located in Amsterdam and Groningen

• We create webapplications using Python-based frameworks

• Our customers are goverments, non-profit organisations and larger companies.

Page 4: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Page 5: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Page 6: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

A BIT OF HISTORY

Page 7: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

THE WEB WAS SIMPLE

Page 8: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

DAO OF WEB DESIGN

• Written 13 years ago, this article still makes sense

• New media tries to mimic old media

• About creating pages which are adaptable

• http://alistapart.com/article/dao

Page 9: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

SAME OLD NEW MEDIUM?

A Dao of Web Design by John Allsopp - April 7, 2000

“Well established hierarchies are not easily uprooted;Closely held beliefs are not easily released;

So ritual enthralls generation after generation.”

Tao Te Ching; 38 Ritual

Page 10: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

SAME OLD NEW MEDIUM?

A Dao of Web Design by John Allsopp - April 7, 2000

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and conventions strongly influence it.

Page 11: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

CONTROLLING WEB PAGES

A Dao of Web Design by John Allsopp - April 7, 2000

“... accepts the ebb and flow of things,Nurtures them, but does not own them,”

Tao Te Ching; 2 Abstraction

Page 12: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

ADAPTABILITY IS ACCESSIBILITY

A Dao of Web Design by John Allsopp - April 7, 2000

“The best of man is like water,Which benefits all things, and does not contend with them,

Which flows in places that others disdain,Where it is in harmony with the Way.”

Tao Te Ching; 8 Water

Page 13: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

THE WAY

A Dao of Web Design by John Allsopp - April 7, 2000

“The Way is shaped by use,But then the shape is lost.Do not hold fast to shapes

But let sensation flow into the worldAs a river courses down to the sea.”

Tao Te Ching; 32 Shapes

Page 14: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

THE WAY

A Dao of Web Design by John Allsopp - April 7, 2000

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and

conventions strongly influence it.

Page 15: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FAST FORWARD TO TODAY

Page 16: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FAST FORWARD TO TODAY

Mobile phone

Tablet

E-reader

Laptop Desktop Widescreen TV

Page 17: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

WEBSITES ON TODAYS DEVICES

• Sites without a mobile ‘part’ are shown fairly well on modern phones

• We have an app for that (most of the times..)

• There are lot’s of devices which are internet-enabled, mobile and non-mobile

Page 18: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RESPONSIVE WEB DESIGN

• Create websites which are adaptable

• Screen width is important, which device is viewing doesn’t matter*

• The same content, images and other resources on a website are used with RWD

Page 19: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RESPONSIVE WEB DESIGN

Page 20: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

ALTERNATIVES TO RWD

Page 21: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

MOBILE SPECIFIC WEBSITE

• A separate website/URL with separate content

• Not responsive!

• For websites with a main goal of marketing a product or service

Page 22: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

TRANSCODED WEBSITE

• A separate website/URL with content transcoded (copied) from your main site

• Not responsive!

• Follows same structure as main website

Page 23: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

APP STORE PRESENCE

• Create an app and publish it on Apple’s App Store / Google Play

• Your company is findable thru an app store

• Easier access, just tap the app on your mobile device

• You need to develop an app for every platform

Page 24: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

ALTERNATIVE WRAP-UP

Mobile site Transcoded site Native app Responsive site

Optimized for slow connections

X X ~

Follows same structure as main

siteX ~ X

Works on a broad range of devices

~ ~ X

Page 25: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop
Page 26: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

WIRED.COM EXAMPLE

• This is a ‘mobile specific’ website

• Works great on mobile devices but is not responsive

• Instead of depending on screen size, the site detects your device

Page 27: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RESPONSIVE WEB DESIGN

Page 28: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RESPONSIVE WEB DESIGN

Page 29: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

THE BASIC PRINCIPLES OF RWD

•Flexible grid

•Flexible media

•Media queries

• When designing a responsive website start with the smallest screen size and move up to the bigger sizes.

• Don’t use server-side stuff to detect mobile devices.

• Most CSS3 techniques can be used

• Doesn’t work on older browsers*

Page 30: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE GRID

.. this concept of a typographic grid: a rational system of columns and rows, upon which modules of

content could be placed.

Ethan Marcotte

Page 31: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE GRID

• Elements of a website are positioned on a grid

• The grid is adaptive

• Many tools and boilerplate stylesheets are available to start with a flexible grid.

Page 32: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE GRID

Page 34: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE VALUES IN CSS

• Margins and paddings in relative values

• Fonts in em’s or rem’s

• Don’t use pixels; one pixel on one platform is not a pixel on another

• Elements in a site are adaptive when styled using flexible values

Page 35: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE MARGINS/PADDINGS

• Use relative values; percentages, em’s or rem’s

• In this example a padding of 2% is set on the left and right side of the highlighted fieldset.

Page 36: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE TYPESETTING

• Use ‘em’ or ‘rem’ font-size values.

• Em (often) equals 16px in height.

• Problem with em-based font sizing is that the font size is nested. To solve this rem sizes can be used.

An em is a unit of measurement in the field of

typography, equal to the currently specified point size. The name of em is related to

M. Originally the unit was derived from the width of the

capital “M” in the given typeface.

Page 37: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE TYPESETTING

• target ÷ context = result

• black text: 24px ÷ 16px = 1.5em

• grey text: 11px ÷ 24px = 0.458333333333333em

• grey text: 11px ÷ 16px = 0.6875rem

Page 38: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

FLEXIBLE MEDIA

• A CSS trick to fit image, videos and iframes in their container

• Prevents images exceeding the width of their container

Page 39: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

CSS3 MEDIA QUERIES

Page 40: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

CSS3 MEDIA QUERIES

• This meta element must be in the html header:

• <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

• Media type screen is used

• Do not use other media types to differentiate between devices

• ie: braille, embossed, handheld, print, projection, screen, speech, tty and tv

Page 41: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

RWD EXAMPLEhttp://bit.ly/14T3tly

Page 42: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

MOCK-UPS AND PROTOTYPING

Page 43: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

MOCK-UPS

• Create mock-ups for phone, tablet and desktop

• Start with the smallest screen size and move up to bigger sizes

• Think about your site before you’ll start building

• Mocking-up a site design should be quick and easy todo

Page 44: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

BALSAMIQ MOCK-UPS

Page 45: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

JETSTRAP.COM PROTOTYPING

Page 46: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

DIVSHOT.COM PROTOTYPING

Page 47: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

TOOLS TO TEST YOUR RESPONSIVE SITE

• http://mattkersley.com/responsive/

• http://www.responsinator.com/

• Use Google Chrome to set an user agent and viewport

Page 48: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

TOOLS TO TEST YOUR RESPONSIVE SITE

• Apple: connect your iPad/iPhone to your Apple computer

• http://bit.ly/Qy06v8 (developer.apple.com)

• Android: use the Development Kit to connect an Android device to the Chrome browser

• http://bit.ly/IIc78S (developers.google.com)

Page 49: Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

JAVASCRIPT LIBRARIES

• Modernizr (http://modernizr.com)

• Fallback for older browsers which don’t support CSS3 and HTML5

• Hammer.js (http://eightmedia.github.com/hammer.js/)

• Library for multi-touch gestures

• Enquire.js (http://wicky.nillia.ms/enquire.js/)

• JavaScript library for responding to CSS media queries