Designing responsively

DESIGNING RESPONSIVELY

FROM SKETCH TO PRODUCTION

Christopher Cochran@tweetsfromchris

Sunday, October 13, 13

Technology is advancing constantly


To put responsive design at the heart of our builds, we must change the process.


FORM FOLLOWSFUNCTION


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.


Mobile First = Content First = User First


Focus and prioritize the constraints of mobile design, not just on the devices.


If it’s not important on 3 inches,it’s not important on 13 inches.


NO JUDGEMENT Quick Sketches, sketch as quick as ideas come to you.


KEEP IT SIMPLEYOU DON’T NEED TO BE AN ARTIST


RAPIDLYGENERATING IDEAS

SOLVING PROBLEMS


Because sketches are unfinished and loose, they invite commentary.

THEY ARE JUST SKETCHES


ENCOURAGE

PINPOINT POSSIBLE ISSUES.

“WHATIF?”


PAPER & PEN < CODE />


THE BROWSER AS A

DESIGN TOOL


The best place to test interaction is where the interaction will take place.


PIXEL PRECISE


PATTERN LIBRARIES Reusable patterns increase consistency, improve design productivity and reduce implementation time.http://bradfrost.github.io/this-is-responsive/patterns.html


http://bradfrost.github.io/this-is-responsive/patterns.html




FRAMEWORKSBootstrapFoundation


STYLE GUIDES


LAYOUTSEmbrace the Cascade Treat Layout as an enhancement


Think in terms of reusable parts to keep things simple and consistent.

BE MODULAR


PREPROCESSORS ARE YOUR FRIEND

SASS, Stylus, LESS


GRUNTWatch

Lint

Run automated tests

Concatenate & Minify


MOBILE IS FAST


At least we want it to be...MOBILE IS FAST


Today’s average website takes 7s to load


More than a second will cause the user to interrupt their flow of thought, creating a poor experience.


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


Design from the bottom up; from the content out.


CONTENT IS KING


USE REAL CONTENT


Set breakpoints according to the content.

Explore your design to find the points where it naturally breaks down and adjust.


Design for device types.Not specifics.

Palm, Lap, Desk relate to screen size and use.


This is the time to test questionable ideas.


Better manage client expectations and development requirements


Visualizes breakpoints and how the design changes.


RAPID PROTOTYPING


Get Feedback Early Get Feedback Often


Gather & Inspect

Monitor & Alert Identify & Fix


DON’T display: none;

Don't limit experiences.


PERFORMANCE IS KEY


Don’t Forget to Give Love to the Design


TEST, TEST, TEST


TESTSunday, October 13, 13

Designing responsively

Technology

Transcript of Designing responsively