Responsive Web DesignNuts & Bolts

David Weedon - UI/UX Designer, Covenant Technology Partners

Responsive

Web Design

the bee’s

knees

• Rapidly taking over the web.

• Easy to learn.

• Focus on good design.

Show and Tell

thesearethings.com

smashingmagazine.com

foodsense.is

What works.

• Intelligent, content driven

adjustments

• Keeping content consistent

• Consider mobile motives when

adjusting navigation and calls to

action.

What doesn't.

• Hiding content that doesn’t fit.

• Adjusting content to fit on popular

devices.

• Bloat.

• Ignoring context.

Content First.

Please.

Why content first?

• RWD eats up a lot of time up front.

• Redesigns to fit unexpected content is

costly.

• Don’t try to fit circle content into square

design.

Why content first?

• Good Design is tailored to the content.

• Book covers before books?

• Design before content is like using a

template.

• Good content is good, regardless of the

design.

How it’s done.

@media

CSS3’s Media Query

Where should they be set.

• It really depends.

• Don’t use popular device widths.

• Break it when it breaks.

Inclusive:

Inherited Styles

Exclusive:

Isolated Styles

Min and Max Width

• In general try to keep it going in one

direction.

• Use mostly min or mostly max width media

queries.

• Use Exclusive queries to block out

drastically different styles.

That one direction should be up.

(Mobile First)

Don’t forget paper!

Retina…

Generally more work than other

types of media queries because it

generally requires additional

content.

The hard way:

For <img> tags, just use retina.js

or use SVG, an icon font, or css3.

The easy way:

Don’t use images for your UI.

Use CSS3 and icon fonts.

Living on the

grid.

• Good design tends to happen in a grid

• The Saccadic Reflex

• Mathematical (or at least proportional)

design.

• x-height, golden mean, rhythmic

typography

<div class=“12-col”>

<div class=“6-col”>

<div class=“3-col”>

<div class=“12-col”>

<div class=“8-col”>

<div class=“12-col”>

<div class=“4-col”>

Not possible. Responsive design changes

only the CSS. You can’t change classes.

You can change how a class acts, but then

you have a “hackish,” “unsemantic”

approach.

bigCSS.

• RWD starts to be a lot of CSS

really fast.

• Too much to keep track of.

• Lots of overwriting when using

grids.

• Small changes means potentially

changing many styles.

CSS pre-processers to the

rescue!

SASS and LESS

• Sass and Less mostly do the same

thing. Very similar features, slightly

different syntax.

• Great for any css project, even small

ones.

• They are just faster.

SCSS or Sassy CSS: variables

SCSS or Sassy CSS:

Include

SCSS or Sassy CSS: Mixin

SCSS or Sassy CSS: Functions

So… back to our grid problem.

Remembering Our Past

or:

How I Learnedto Stop

Worrying andLove IE8

All this CSS3 stuff is great… but:

I need to support IE8

:’(

Sass Media Query Mixin+ Sass Global Variable+ IE conditional comments

IE8 stylesheet with only

desktop styles

CSS3 PIEAlmost as good as real pie.

PIE uses javascript to simulate CSS3 properties.

Time and bandwidth saved. No more image

based gradients, rounded corners, or box-

shadows.

Work smart. Not

hard.There are some fantastic Sass, LESS,

and general responsive frameworks

available.

Compass (think: jQuery for CSS),

Semantic.gs, Gumby,

Skeleton, Bootstrap, Etc.

Bringing to

SharePoint.via SharePoint Designer

• SharePoint has a lot of built in structure.

• Important to understand what SharePoint is going to give you.

• Get the snippits that you will need before writing your HTML

• For most things on a simple page or site-collection, no .NET experience is required.

• However, sometimes you really just need a developer.

Device ChannelsBetter than RWD?

• Actually, yes. In terms of robustness, device channels can do everything RWD can and more.

• RWD only changes the way the HTML is displayed, Device Channels allow for separate HTML.

• Device channels require more work.

• Are harder to maintain.

• Limited to publishing pages.

• Mix the two: HTML handled by device

channels and CSS handled by RWD?

Case Study: STLSUG

Website

• Join for the group

• Check upcoming events

• Get the slide decks from past events

• Share Documents

Define User Goals

Summary

• Content First!

• User experience, not device experience

• Be future friendly, start using

CSS3/HTML5

• Use pre-processors to help manage

code

• Conditionally load if possible (device

channels).