Mobile Design

Responsive UI and Design Paradigms

Created by Grant Timmerman

I’m Grant.

CS, UW
Open web evangelist
I ♡ Javascript + Node
@granttimmerman

On the Menu

What is UX?
Mobile constraints and capabilities
Mobile design patterns
UI Trends
Build a responsive website from scratch
Design resources!

What is UX

And why should it matter?

UX

User Experience

Visual Design
Information Architecture
User Interface Design
Interation Design
Usability
NOT ART

It's who, what, when, where. Not how. Before the web evolved people really just cared about two things: What we thought was awesome, and what the client wanted to see. Now there is a lot of focus around user-centered design.

Why UX Matters

You are probably already do it
UX is a process. It's scientific.
It's not hard
It's fun and challenging

It also makes your projects/websites more trustworthy.

How website design used to be

There was no science behind what we did. We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted.

But then we started developing more complex systems

And things turned into a mess quickly

The more complex the system, the more involved will the planning and architecture have to be for it. While investing in a full-blown multi-member UX study for a simple static website seems excessive, multi-faceted websites, interaction-rich Web applications and e-commerce websites stand to benefit a lot from UX design.

And that's not even a mobile website...

When building for mobile, there are a lot of things to keep in mind...

Mobile constraints

Smaller display
Different form factors
Much longer latency
Slow processor
Input is cumbersome

Mobile Patterns

Lists

Modals

Awesome website

pttrns.com

UI Trends

Cards

Bleeding Images

Flat UI

Pretty Fonts

Open Sans
Roboto
Proxima Nova
Gotham
Futura

Colors

Information Architecture

Content > Navigation

Provide immediate answers rather than your site map

UI Design

The User is Drunk

What did you hear from the vid?

Make UI clear and obvious
Simpler = better
Repeat yourself to the user

Awesome places for inspiration

Interaction Design

Here are some awesome design guides

Show me the codez

CSS Media Queries

min-width
max-width

Example

@media screen and (min-width: 600px) {
	div.class {
		width: 100px
	}
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
	div.class {
		width: 400px
	}
}

Media queries can also be used when linking css

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css">
<!-- rel="stylesheet" -->
<!-- type="text/css" -->
<!-- media="screen and (max-device-width: 480px)" -->
<!-- href="style.css" -->

Mobile Design – Responsive UI and Design Paradigms

grant