GENETIC MUTATIONS Dec 5, 2013. Let’s review what we’ve done so far!
What has responsive web design done for us, so far.
-
Upload
wilfred-nas -
Category
Technology
-
view
375 -
download
1
description
Transcript of What has responsive web design done for us, so far.
What has responsive web design done for us, so far…
It creates big pages
With loads of css and javascript
All to solve self inflicted problems
Let’s just pick one
ImagesWhat kind of image to serve
Retina or non retina
And how to serve it
The <img> tag doesn't cut it
In comes <picture>
(again)
DevicesTo what kind of device
Mobile
Tablet
Phablet
TV’s
Consoles
Fridges
Desktop
Desknot
Touch
Touch is mobile
Or is touch desktop?
Or no touch
Size matters…
320
480
800
440
768
1024
1280
632
1920
2560
240
The web is text…
So why do we do pixels?
Use font sizes instead…
Media queries to the rescue
Even for tables
Data tables, that is
Or do we use javascript for those?
Or not?
Breakpoints?
We don’t need breakpoints…
“It's what happens between the
breakpoints that matters the most”
–Wilfred Nas
Tweakpoints
Haypoint
But
But
The web IS responsive
At least
Before we developers and designer killed it(as a developer I would love to put the sole blame on designers, but we have to take some of the blame)
Designers
Design schools still don't teach anything but print design
Photoshop is NOT a design toolit's for sketching
You should design in the browser
and most importantly
present in the browser
Or better yet, present on different browsers
And different devices
And different browsers on those devices
Developers
Test and develop on multiple devices
And browsers of course
But you already did that, right?
Don't just resize your screen
Get those screens filthy
Use tools like ghost lab
Really test on multiple devices
Use standards
Start with the information
Never the presentation
Mobile first lets you focus
Never listen to marketeers,
everThat gets us only more carousels
Only listen to
users
Speed is the only thing that matters
Thank you for listening to my rant
Wilfred Nas - front end developer / @wnas / wnas.nl