responsive web design nuts & bolts david weedon - ui/ux designer, covenant technology partners
Post on 23-Dec-2015
222 Views
Preview:
TRANSCRIPT
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).
top related