Responsive webdesign

1

hello

nyilakkal tudsz navigálni

2

Minek az?

Különböző méretű device-ok

Netbooktól a 2000px-en túli felbontásokig

Touch device-ok: tabletek, okostelefonok

3

Tervezés

Fluid + fix elemek

Teljes oldal helyett egységek tervezése

Egységekből layoutok felépítése

Stephen Hay: reference wireframing
http://www.slideshare.net/stephenhay/mobilism2011

4

Tervezés

Breakpointok:

· 320 (okostelefon)

· 768 (tablet)

· 1024 (netbook)

· 1600 (desktop)

Grid rendszerek

978.gs

Mediaqueri.es

5

Media query-k

5

Media query-k

Operátorok:

· , [or]

· and

· not (teljes query-t negálja)

· only (az egészre vonatkozik)

Változók:

· méretek (max-width, max-height, stb.)

· orientáció (portrait, landscape)

6

Media query-ken belül

elemek átméretezése

betűméretek, eltartások módosítása

layout átrendezése

tartalmi egységek elrejtése / megjelenítése

7

CSS3: Flexible Box Module / Flexbox

8

CSS3: Flexible Box Module / Flexbox

demo1: box-flex, demo2: box-pax és box-align

box-flex: megmaradó területek elosztása arányok alapján

box-orient: vízszintes / függőleges

box-direction: normal / reverse

box-pax és box-align: középre rendezés

media querykkel: a responsive fluid layout

csak prefixekkel működik

flex-order: sorrend változtatása (?)

9

CSS3: Grid layout

9

CSS3: Grid layout

10

Képek

adaptive sizing

TinySrc (Sencha)

http://i.tinysrc.mobi/http://mysite.com/myimage.png

http://i.tinysrc.mobi/-8/http://mysite.com/myimage.png

http://i.tinysrc.mobi/x50/http://mysite.com/myimage.png

@2x (Retina Display)

11

kérdezze még sitebuilderét! :)

köszönöm a figyelmet!

Suhajda Gábor / @szajmon
Carnation Zrt.