View
694
Download
0
Category
Preview:
DESCRIPTION
Internettet er tilgængeligt overalt. Er dit website også? Eller hænger det gevaldigt i bremsen udenfor de trygge rammer af en gammeldags PC-browser? Lær hvordan du bygger websites, der er bedre, mere simple, mere tilgængelige og mere brugbare end dine konkurrenters sløve gamle desktop mastodonter.
Citation preview
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?
Hvor er jeg og hvor kan jeg komme hen?
Hvad kan jeg på denne side?
Hvad får jeg hvis jeg scroller?
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 clausstadel.comclaus.stadel@gmail.com
Recommended