5. #DREAMCON2013
5
MOBILE
RESPONSIVE DESIGN IS THE WAY FORWARD
MOBILE USAGE IS SKYROCKETING
28% of Internet usage comes from a mobile phone
Global mobile data traffic grew 70 percent in 2012
22. Matt Felten | @mattfelten
UI Design | Front-end Development
THANKS
Notas del editor
I don’t mean lazy in the “sit on the couch and eat cheetos” way
I mean I want to get the most things done in the least amount of time
I want to optimize
I don’t want to waste me time
“Who wishes they had more time? Raise your hands.”
Very unscientific survey
What’s the point of this talk?
“I just want to share some ideas and some technical things I’ve been doing recently.”
Problems: Flash intros (they still exisit..)
Flash in general
Websites aren’t resorts. People don’t sit around admiring the nice fonts and images you use (well, I do)
When you visit a website you want it to work (and the same content) no matter what browser/machine you're on
Use restaurant websites as an example
Restaurant websites where the menu / hours is hard to get to
“It’s about time for a chart”
It took me weeks to get this data
Media query example is targeting tablets and desktops
Don’t target specific devices though
The best way is to target the size when the content needs to shift
Easy to add on to an existing site
Good for web apps, native apps are even better (speed)
Gotchas:
Google will penalize your site for bad mobile redirects
Tend to strip out content that you assume mobile users won’t need
Doesn’t work the same or feel the same as the desktop equivalent
The closer to the users expectations you design, the easier it will be to learn the interface.
Goal is not to have to learn anything. Feel natural.
Design decisions, not options
Decision overload
Not every action needs to be one click away
As long as the user feels like their getting closer to their intended goal, they're happy.
Decisions in just 50 milliseconds
Halo Effect: if you can snare people with an attractive design, they are more likely to overlook other minor faults with the site, and may rate its actual content more favourably.
Cognitive Bias: People enjoy being right, so continuing to use a website that gave a good first impression helps to 'prove' to themselves that they made a good initial decision.
Reduce load time, use less images
Assume success with AJAX
Actions that are reversible or there's no real repercussions, let the UI update automatically.
It’s a question I’m always thinking about
Optimize workflow
I’m gonna cover 4 different techniques that I’m loving
The slowest part of designing anything is the “static mockups”
If designing for mobile, which you should be, you could have 3+ different versions of a single page
Figure out layout, then work on aesthetics in the browser
You can see exactly how it’s going to look
What is CSS Preprocessing?
Lets you write CSS easier
Pretty similar to the jQuery vs Mootools war
There hasn’t been a winner yet
More features: Math, built-in color tweaks like lighten and darken
Compiles into standard CSS and minifies to save space
What are UI frameworks?
Why are they good?Good for prototyping, testing out an idea
Why are they bad?
Bad for making something unique and rememberable
Explain image sprites
Why are they terrible?
Hard to update. Create new images for every size and color
Technique I first started seeing around 2011
What does it benefit?
SVGs are vector so they can be infinitely sized
Uses font color so you can use any color, set through CSS
Anything you can do with type on the web, you can do with an icon font
I didn’t use icon fonts before, even though I’ve heard about it, because it was hard to create.
You had to use a font program, manually set kerning.
Very trial and error.
A few months ago I found Font Custom on Github
