Websites, der virker overalt

Websites, der virker overalt

@clausstadel #mc14dk

Responsive web design

Mobile matters

Global trafikandel fra mobile devices

0 %

10 %

20 %

30 %

2008 Q4 2010 Q3 2012 Q2 2014 Q1

gs.statcounter.com

Global trafikandel fra mobile devices

0 %

10 %

20 %

30 %

2008 Q4 2010 Q3 2012 Q2 2014 Q1

gs.statcounter.com

pureawesomeness.com

pureawesomeness.comm.

77% af mobile Google søgninger foretages hjemme eller på arbejde

Google/Nielsen Life360 Mobile Search Moments Q4 2012

Whether you like it or not, if you're a web designer, you're also a mobile web designer.

Brad Frost

web designResponsive

web designAdaptive

web designBest practice

Web design

UX på det moderne web

Learning by doing

Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them.

Brad Frost

Retrofitting

Mobile first

Så bredt er dit website

Lidt er aldrig lidt nok

Hvor er jeg og hvor kan jeg komme hen?

Hvad kan jeg på denne side?

Hvad får jeg hvis jeg scroller?







Lister Tilbage i tiden Fordybelse

Performance by design

If your website is 15MB it’s not HTML5, it’s stupid.

Christian Heilmann

WiFi

3G

Building the damn thing

UX designer Visuel designer Udvikler

UX designer

Visuel designer

Udvikler

HTML + CSS

Klik

Tryk

44px

delay: 300ms

fastclick.js

Billeder

PNG

JPEG

Retina

Low

Hi

325x225 px

650x450 px

29 kBKvalitet 80

Kvalitet 3027 kB

PNG

SVG

Scalable Vector Graphics

Kittyshop

PNG

SVG

3 kB

1 kB

Tabeller

Tabeller er et hack

body {font-size: 16px;

}

I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.

Flat is better

.nifty-box {border-radius: 1em;box-shadow: 0 0 1em black;background: url(‘pattern.png’);

}

Click me

Click me

Edge Relflow

320px

568px

768px

1280px

Deviceagnostisk

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

Stephen Hay

Dit content afgør dine breakpoints

Test på rigtige devices

Test på rigtigt gamle devices

Edge Inspect

Mobile firstPerformance by designFarvel Photoshop. Hallo HTML + CSS.44x44px links med fastclick.jsJPEG og SVG i stedet for PNGContent-baserede breakpointsTest på rigtige devices

Ha’ det sjovt og lav noget fedt

@clausstadel [email protected]