Responsive Web Design Nuts & 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

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 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

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.

big CSS.

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 Learned to Stop Worrying and Love 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 PIE Almost 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 Channels Better 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).