Responsive Design

Teuvo Väisänen

• Web-asiantuntija, kouluttaja

• Tieturilla v. 1998 lähtien

• Certifications • MMCP • CIW Professional • MCDST

• Tieturi: http://www.tieturi.fi

teuvo.vaisanen@tieturi.fi

• Private: http://teuvovaisanen.fi http://twitter.com/stedi teuvo.vaisanen@gmail.com

• Web Standards • HTML / XHTML / HTML5 • XML • CSS • JavaScript

• Plus

• UI/UX, Accessibility, Usability, SEO, SEM, Web Analytics, Social Media, Multimedia, Adobe Creative Suite Programs, CMS systems, Mobile Web

10.5.2010 Copyright © Tieturi

2

Millainen sinä olet?

Sekakäyttäjä?

7.11.2012

3

Mobiili ohitti jo PC:n v. 2011

Mobiili

488 miljoonaa toimitettua laitetta

PC

411 miljoonaa toimitettua laitetta

7.11.2012

4

Kasvu on kovaa

” Cisco's VNI Forecast Projects the Internet Will Be Four Times as Large in Four Years”

“Global mobile Internet data traffic is forecast to increase 18 times from 2011 to 2016, to 10.8 exabytes per month (or 130 exabytes annually).”

7.11.2012

5

Laitekirjo on valtava

19.8.2010 Copyright © Tieturi

6

Onko sivustosi vain desktopille?

7.11.2012

7

www.tieturi.fi

Resoluutio ja sisältö

7.11.2012

8

Mobiili resoluutiot Suomessa

7.11.2012

9

Responsive Web Design

” Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones)” via Wikipedia

7.11.2012

10

Mobile First!

7.11.2012

11

www.tieturi.fi

Mikä sisällössä on tärkeää?

7.11.2012

12

CSS 3 Media Queries

• CSS 2.1 • Mahdollistaa mediatyyppien käytön,

vanhastaan tuttua screen / print –versiot web-sivuista • Valitettavasti mediatyyppi mobile oli kehnosti tuettu

• CSS 3 • CSS 3 Media Queries mahdollistaa eri ominaisuuksien haistelun • Hyvin tuettu nykyselaimissa • http://www.w3.org/TR/css3-mediaqueries/

7.11.2012

13

CSS 3 Media Features

• width • height • device-width • device-height • orientation

• aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid

14.9.2011 Copyright © Tieturi

14

Koodiesimerkkejä • Monitorin resoluutio / leveys 400-700px

@media screen and (min-width: 400px) and (max-width: 700px) { … } sama toisin <link rel="stylesheet" media=”screen and (min-width: 400px) and (max-width:700px)" href="http://…" />

• Printteri ja A4 paperi <link rel="stylesheet" media="print and (max-width: 21cm)" href="http://…" />

14.9.2011 Copyright © Tieturi

15

Haasteena media - kuvat

• CSS 3 Media Queries ei vielä tällä hetkellä vastaa haasteeseen tarjota eri kuvia eri laitteille

• Valitettavasti kaikki media latautuu myös mobiililaitteeseen, vaikka käyttäisi CSS 3 Media Queries -haistelutekniikkaa

• Jotain ongelman ratkaisuksi on syntaksiin kehitteillä, mutta vielä ei mitään virallista ole tarjolla

14.9.2011 Copyright © Tieturi

16

RESS -tekniikoita

• Adaptive Images http://adaptive-images.com/

• Responsive Images https://github.com/filamentgroup/Responsive-Images

14.9.2011 Copyright © Tieturi

17

Aihepiirin kursseja Tieturilla

• HTML ja CSS – käyttöliittymän taittaminen - 2pv

• Web-sivusto mobiililaitteille – 1pv

7.11.2012

18

Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos!

7.11.2012

19

Linkit

• http://newsroom.cisco.com/press-release-content?type=webcontent&articleId=888280

• http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011

• http://www.lukew.com

• http://mediaqueri.es

• http://www.tieturi.fi ;)

7.11.2012

20