Designing for Development 2011- A Nerdery Interactive Primer

MATT TONAKCOMMUNITY MANAGER

THE NERDERY

WE HELP OUR PARTNERS GET BIG IDEAS OUT OF THEIR HEADS AND ONTO THEIR CLIENTS’ WEBSITES

HTTP://WWW.NERDERY.COMTWITTER: @THE_NERDERY

738,408 4086HOURS WORKED SINCE 2003 PROJECTS DOGS IN OUR OFFICE BIKE COMMUTERS

HOURS WORKED, LAST 12 MONTHS

PEOPLE WHO WORK AT THE NERDERY

AVERAGE JANUARY TEMPERATURE

TWO HUNDRED TWENTY-THREE

EIGHT 6

FOURº

HOW TO PARTICIPATE

Using the questions panels in the GoToMeeting app

On Twitter @The_Nerdery

Send us an email at primers@nerdery.com

DAN PISCITIELLO

SENIOR FRONT-END DEVELOPERS

ANTHONY TICKNOR&

DESIGNINGFOR DEVELOPMENT

THE BASICS

COLOR PROFILE

72 DPI

WHOLE VALUES / PIXELS

CUSTOM INPUTS

LAYER COMPS

PROVIDE THE FONTS

BLENDING MODES

CONSISTENCY & CONSOLIDATION

SCREEN RESOLUTIONS

STATIC WIDTH DESIGNS960 pixels

FONTS

FONT EMBEDDING / @FONT-FACE

Restricted Licensing

Served Locally

Ideal Implementation

Free Resources - League of Moveable Type, Font Squirrel, Google Fonts

Premium Option - Adobe Fonts

FONT STACK

font-family:

Helvetica, Arial, sans-serif;

Times News Roman, Times, serif;

HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;

FONT SERVICES

Typekit

Google Font API

Kernest

Fonts.com

SIFR & CUFON

Rely on Flash & JavaScript

Slows Performance

Licensing Issues

Not always viewable on mobile device

Not Recommended

MOBILE

SMART PHONE SHIPMENTS

2009

2010

0 100 200 300 400

Nokia RIM Other Apple HTC Samsung

Units Shipped in Millions

Smartphone sales pass PC sales for the first time in history.

MOBILE VS DESKTOP

2009 Q4

2010 Q4

0 27.5 55 82.5 110

Mobile Desktop

Units Shipped in Millions

HOME USAGE OF PC20% decline since 2008

2006

2008

2010

0 8.25 16.5 24.75 33

Weekly Hours Spent

MOBILE FIRST

Provide focus & identify important content

Offers content visibility across more devices

Unifies codebase for easier maintenance

Mobile is becoming more prominent and growing faster than desktop computers

WHY NOT AN APP?

Apps are proprietary / device specific

Increased up front & maintenance costs

Can be a barrier to accessing information

HTML5 & Web Standards are improving

MEDIA QUERIESCSS served based on device width

Identical HTML source served to all devices

Content accessible by all devices

RESPONSIVE VS. ADAPTIVEBuilt on Flexible Grid

Flexible to any device width

Relatively future-proof

Example:http://robot-or-not.com

Built on static width grid

Static width set by breakpoints

Fits width of current devices

Example:http://sweethatclub.org

FLEXIBLE CONTENT

Lorem ipsum dolor

Sit amet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaliqua. Ut enim ad minimveniam, quis nostrud.

Read More »

NEWS

Tony tells a greatstory about monkeysto everyone!

I like monkeys. The petstore was selling them forfive cents a piece. I thoughtthat odd since they werenormally a couplethousand each. I decidednot to look a gift horse inthe mouth. I bought 200.

Read More »

NEWS

FLEXIBLE LAYOUTS

Define your breakpoints (320,768,960,1200)

Design each breakpoint

Keep content in the same order

Keep optimization in mind

LOST DESIGNELEMENTS

ERROR & SUCCESS

HOVER & ACTIVE

SERVER ERRORS

FALLBACKS

for users without JavaScript

for users without Flash or Silverlight

for less capable browsers

for 508 ADA Compliance

MISCELLANEOUS

Missing Static Pages

Terms & Conditions

Privacy Policy

Site Map

QUESTIONS?Using the questions panels in the GoToMeeting app

On Twitter @The_Nerdery

Send us an email at primers@nerdery.com

More answers online at http://nerdery.com