Web designers may no longer control the visual presentation. Users can take a site’s content out of the website and view it in their preferred format.
The job of web designers is to make content usable, since we don’t have absolute control of the visual design.
Design that does not serve people does not serve business.
Content precedes design. Design in the absence of content is decoration.
If you don’t have content before design, minimalism is one of the only ways that the design won’t hurt the content.
Focusing on content first ensures a good experience.
Serving the public means good experience for everyone.
Progressive enhancement = good experience for all.
Responsive design is progressive enhancement taken to the next level.
Small Screen vs. Mobile
Mobile sites should offer a different experience than a small screen version of a responsive website.
Responsive should just reorganize content to fit the screen size.
Mobile First = Content First
Mobile first responsive web design - Forces designers to focus on the content first.
Thanks to mobile browsers, users no longer expect websites to look exactly the same in every browser - We can use progressive enhancement, because people won’t freak out when they see that a site doesn't look the same in IE.
Q&A
How can we adapt our workflows to focus on content first?
Resources like Responsive Web Design from A Book Apart, Move The Web Forward, A List Apart.
How do you balance designing for content with achieving conversion goals?
Most of those things shouldn’t be in opposition with each other. Focusing on content will engage users more which will help you reach your goals.
Misuse of shadows - overuse of shadows can create visual conflicts that don’t make sense.
Overuse of texture
Cheesy use of images - using images of bones as borders for input fields, for example.
The Distraction of the Real
Textures, post-it notes, coffee stains, wooden backgrounds, etc.
A lot of times, if you take these effects away, the underlying design isn’t great.
Why?
People are throwing on visual effects without actually thinking about what they’re doing.
Sometimes alluding to real world objects can be a good thing, but we need to consider the context and decide if it’s really necessary.
Typography is (Almost) Everything
We can learn a lot from print design and apply those things to web design.
Baseline Grids - Can be used to dictate everything: borders, images, etc.
Incremental leading - if you’re using very small text, matching the baseline grid exactly can cause issues. Using an incremental grid (for example, only line up with every 5th line) can help to achieve rhythm.
A lot of us can’t be bothered to do these kinds of things.
Look for inspiration in places other than the web. Go outside, read books, look for inspiration in the real world.
If you get all your inspiration from CSS galleries, all you’re going to do is echo what somebody has already done.
Try print design.
...when I came back to the web, my mind was open and I had a completely refreshed approach. Elliot Jay Stocks
We have the power to do some amazing things with our new tools, but we must use that power responsibly.
Q&A
How do you persuade a client that they shouldn’t go overboard with fonts/textures/effects?
Show them that there are only a few fonts that will work together. Choose a big font family (FF Meta Sans and FF Meta Serif). Tell them that they will stand out from the crowd more if they don’t go overboard with things like fonts, textures, and fonts.
Is there anything that can be done to prevent the flash of unstyled text that can occur when using webfonts?
If a browser sees a selector, property, or value it doesn’t understand, it just ignores the line.
This pattern allows us to extend CSS without having to worry about errors or code breaking in browsers.
Be conservative in what you send; be liberal in what you accept. - Browsers need to be liberal in what the accept, because things like CSS can be messy.
HTML
HTML is treated the same way by browsers - if unknown elements or attributes are encountered, browsers essentially ignore them. Things don’t necessarily break.
The design principle of HTML benefits us, but it also benefits users.
Goal: backwards compatibility
Solve Real Problems
In older versions of HTML, if we wanted an entire element to be clickable, we had to use multiple links.
In HTML5, we can now wrap entire blocks of things like headings and paragraphs in links.
We could always do this, but it wasn’t always valid.
People wrapped headings in tags, so browsers implemented it, and it is now a part of the HTML5 spec.
Principle: Degrade Gracefully
Makes the most sense for browsers
If a browser sees a type value on an input and it doesn’t understand it, it will degrade as text. I.E. a browser that doesn't understand type="number" will simply create a text input field.
Browsers that don’t understand the placeholder attribute, simply won’t show any placeholder text.
Sidenote: placeholder text should not be used in place of label text.
We can reward newer browsers, while not really effecting older browsers.
Principle: Progressive Enhancement
Progressive enhancement makes more sense than graceful degredation for designers and developers.
Give newer browsers the best possible code, and provide fallbacks for old browsers. Old browsers will ignore the new code and display the fallback.
Javascript
Metcalfe’s law
Everybody uses JavaScript because everybody uses it.
Principle: Unobtrusive Javascript
JavaScript differs from HTML and CSS - if there is an error, it throws an error rather than ignoring it.
Find stuff and do stuff to it. jQuery - Fits perfectly with the principle of progressive enhancement
When choosing a JS library, the most important question to ask is whether or not the library lines up with your underlying design principles.
jQuery’s pattern is similar to CSS - $(selector).event({action});
The only time it’s okay to use links with href="#" is when the link has been created with JavaScript. If it’s a link that you have in your HTML, there’s probably a better element that could be used instead of a link.
How do you deal with different video formats and browser support?
Similar to webfonts, third party services like Typekit may be the solution. Services like Typekit take care of figuring out what format of font to serve up, and the same may happen with videos.
Mobile Web Design Moves
Luke Wroblewski
Small moves can add up to big things.
Thriller - small dance moves add up to a big dance.
Why do I need new moves?
Mobile web growth
Mobile is different
Mobile Web Growth
Home usage of PCs is down 20% since 2008. People are using mobile devices to get things done.
Twitter and Facebook are both used most on mobile devices, more users use the website than native apps.
Mobile phones will overtake PCs as the most common way to access the web by 2013 (maybe sooner).
Mobile is Different
Small screen
Battery
Inconsistent network
Fingers
Sensors
People are online in short spurts.
Mobile is personal
Where are we mobile?
84% at home
80% during misc times
74% waiting in lines
64% at work
Mobile Web Design Moves
Organize Yourself
Use Your Head
Bottom Out
Take It In
Make Your Moves
Organize Yourself
Mobile Behaviors:
Lookup/find
Explore/play
Check in/status
Edit/create
Organize to facilitate user’s behaviors:
Minimal navigation, maximum content
Content first, navigation second
Content is more important than navigation.
The most important stuff on a large screen is probably the most important stuff on a small screen. Don’t dumb it down for mobile
Use Your Head
A menu button at the top which brings up a navigation overlay
Navigation at the bottom - gives users actions when they reach the end of the content. More ergonomic.
Navigation button at the top which jumps you to the bottom of the page with navigation
Bottom Out
Fixed bottom navigation requires JavaScript in most cases and eats up screen space.
Take It In
Devices optimize different input types (like selects), but it doesn’t always work well.
Optimize interactions instead of using defaults when necessary; Especially if it’s something crucial.
Use relevant input types (number, email, url, date, datetime, etc.) in order to show relevant keyboards. Browsers will fallback to text inputs.
Use attributes like auto-capitalize and auto-correct to turn off capitalization and auto-correct on fields like email, url, etc.
Show text in password fields rather than using the default behavior.
Keep the user on the keypad.
Make Your Moves
Drag to refresh
Use swipe gestures
Pull down to review things like search
Make the content the interface
Access the accelerometer
Q&A
Are there any libraries for input masks?
jQuery libraries for input masking and validation
Learning From Urban Design: 10 New Ways To Evaluate Experiences
Alexa Andrzejewski
What makes good interactive experiences?
There are no stupid people, only stupid interaction designers.
Sense of Meaning
Sense of Place
Sense of Structure
Sense of Unfolding
Sense of Transparency
Fit
Adaptability
Access
Responsibility
Certainty
Sense of Meaning
Does it tell a story? How is the form a reflection of values? Can people read the environment?
Define what story you want to tell.
Ask how you can use design to communicate that story.
Sense of Place
Create a sensory experience.
Animation, sounds, and videos can be used in addition to visual design to help the experience.
Determine what moments you want users to remember, and decide how you can make them memorable.
Sense of Structure
A clear sense of structure helps you feel oriented and competent.
If you isolate one element, is it still clear how it fits in with the bigger picture?
Sense of Unfolding
What is the #1 ting you want people to do on their first visit? Their second? Their third?
Determine how you can make users want to keep returning.
Sense of Transparency
Everybody enjoys some level of transparency.
It’s important to identify what your audience wants and then determine what level of transparency is appropriate.
What activities do you want users to engage in?
Fit
Support real world needs and behaviors.
Look at user behavior and ask if there is any evidence of misfit/misuse.
If you notice people bouncing at a certain point, think about what can be changed.
Adaptability
Look for user interactions that you didn’t expect, and adapt to fit those interactions.
Access
Determine how much access your audience wants.
Giving too much access can overwhelm users.
What kinds of decisions are you asking users to make?
Are you giving them too many or too few choices?
Responsibility
Users should have some say in the design and functionality.
Giving the users a say will create a sense of ownership.
Certainty
Reassure users so that they know they're doing things correctly.
Giving users a sense of certainty/trustworthiness is especially important if you deal with finances.
What are the most anxiety-inducing moments in your site or app?
What can you do to reduce that anxiety?
The Responsive Designer’s Workflow
Ethan Marcotte
It’s a long trip. Better start walking.
Traditional design processes don’t work well with responsive design.
Part of the Problem
Part of the problem is dividing projects into different segments. Discover, design, develop, deliver.
Almost like runners in a relay race. Get your work done and hand it off.
Desktop design comps don’t show the client how the site will look on different sized displays.
The tools that we use are another part of the problem. We design on a canvas, which has a width and a height. Tools like Photoshop are very print-based in the way that they work.
The Design Process
Designers introduce the comp
Developers ask questions about the design and anything that isn’t covered.
Decisions about layout are discussed: Which elements get moved down? Which information should be first?
One of the most important questions: What value does this content have for mobile users?
Desktop vs. Mobile
Context doesn’t necessarily infer user intent.
Don’t think of context as specific devices.
Content should be universally accessible, regardless of device.
Mobile first = content first.
Measure Twice, Cut Once.
Step 1: A fluid grid. target/context = result. In a 960 grid, the context is 960 and the target is the pixel width of the element. Result is a percentage.
Step 2: Flexible images.img {max-width: 100%;}
Step 3: Media queries. Identify common breakpoints and create media queries.
Designing in the Browser
Allows you to verify your work live.
How well does the layout adapt?
Do modules still feel usable?
Does the design of anything need to be changed?
Identify problem areas in a live environment so that they can be adjusted.
Move from design to code and back again.
Flexible Foundation is Key
The flexible grid should do the heavy lifting. Media queries should just fill in the gaps.
It means less code.
Anything worth doing is worth doing right.
Content for all, but it should be an appropriate experience.
Sites shouldn’t be exclusively mobile or exclusively desktop.
A responsive layout meets mobile first
Use min-width media queries and scale up.
Defaults to a linear, small-screen friendly design.
More accessible, more compatible.
Over the river and through the woods…
Mobile sites and responsive sites can both exist.
Determine which is appropriate for your audience.
Should the navigation be coded in the header even if it’s only shown at the bottom for small screens?
Code it in the footer when you’re building for mobile first and reposition it for larger screens. Avoid hiding content.