designing responsively
DESCRIPTION
TRANSCRIPT
DESIGNING RESPONSIVELY
FROM SKETCH TO PRODUCTION
Christopher Cochran@tweetsfromchris
Sunday, October 13, 13
Technology is advancing constantly
Sunday, October 13, 13
To put responsive design at the heart of our builds, we must change the process.
Sunday, October 13, 13
FORM FOLLOWSFUNCTION
Sunday, October 13, 13
MOBLE EXPERIENCE SHOULD BE AT THE ROOT. NOT A LAST THOUGHT
It forces us to focus on the essential content, to build optimized, fast mobile experiences that are progressively enhanced, with the user at the forefront.
Sunday, October 13, 13
Mobile First = Content First = User First
Sunday, October 13, 13
Focus and prioritize the constraints of mobile design, not just on the devices.
Sunday, October 13, 13
If it’s not important on 3 inches,it’s not important on 13 inches.
Sunday, October 13, 13
NO JUDGEMENT Quick Sketches, sketch as quick as ideas come to you.
Sunday, October 13, 13
KEEP IT SIMPLEYOU DON’T NEED TO BE AN ARTIST
Sunday, October 13, 13
Sunday, October 13, 13
RAPIDLYGENERATING IDEAS
SOLVING PROBLEMS
Sunday, October 13, 13
Because sketches are unfinished and loose, they invite commentary.
THEY ARE JUST SKETCHES
Sunday, October 13, 13
ENCOURAGE
PINPOINT POSSIBLE ISSUES.
“WHATIF?”
Sunday, October 13, 13
PAPER & PEN < CODE />
Sunday, October 13, 13
THE BROWSER AS A
DESIGN TOOL
Sunday, October 13, 13
The best place to test interaction is where the interaction will take place.
Sunday, October 13, 13
PIXEL PRECISE
Sunday, October 13, 13
PATTERN LIBRARIES Reusable patterns increase consistency, improve design productivity and reduce implementation time.http://bradfrost.github.io/this-is-responsive/patterns.html
Sunday, October 13, 13
FRAMEWORKSBootstrapFoundation
Sunday, October 13, 13
STYLE GUIDES
Sunday, October 13, 13
LAYOUTSEmbrace the Cascade Treat Layout as an enhancement
Sunday, October 13, 13
Think in terms of reusable parts to keep things simple and consistent.
BE MODULAR
Sunday, October 13, 13
PREPROCESSORS ARE YOUR FRIEND
SASS, Stylus, LESS
Sunday, October 13, 13
GRUNTWatch
Lint
Run automated tests
Concatenate & Minify
Sunday, October 13, 13
MOBILE IS FAST
Sunday, October 13, 13
At least we want it to be...MOBILE IS FAST
Sunday, October 13, 13
Today’s average website takes 7s to load
Sunday, October 13, 13
More than a second will cause the user to interrupt their flow of thought, creating a poor experience.
Sunday, October 13, 13
Sunday, October 13, 13
OPTIMIZE• Number of redirects should be minimized
• Server must render the response (< 200 ms)
• Avoid external blocking JavaScript and CSS in above-the-fold content
• Optimize JavaScript execution and rendering time
• Optimize File sizes
Sunday, October 13, 13
Design from the bottom up; from the content out.
Sunday, October 13, 13
CONTENT IS KING
Sunday, October 13, 13
USE REAL CONTENT
Sunday, October 13, 13
Set breakpoints according to the content.
Explore your design to find the points where it naturally breaks down and adjust.
Sunday, October 13, 13
Design for device types.Not specifics.
Palm, Lap, Desk relate to screen size and use.
Sunday, October 13, 13
This is the time to test questionable ideas.
Sunday, October 13, 13
Better manage client expectations and development requirements
Sunday, October 13, 13
Visualizes breakpoints and how the design changes.
Sunday, October 13, 13
RAPID PROTOTYPING
Sunday, October 13, 13
Get Feedback Early Get Feedback Often
Sunday, October 13, 13
Gather & Inspect
Monitor & Alert Identify & Fix
Sunday, October 13, 13
DON’T display: none;
Don't limit experiences.
Sunday, October 13, 13
PERFORMANCE IS KEY
Sunday, October 13, 13
Don’t Forget to Give Love to the Design
Sunday, October 13, 13
TEST, TEST, TEST
Sunday, October 13, 13
TESTSunday, October 13, 13