Designing for Development 2011- A Nerdery Interactive Primer

MATT TONAKCOMMUNITY MANAGER

THE NERDERYHOURS WORKED SINCE 2003 PROJECTS DOGS IN OUR OFFICE BIKE COMMUTERS738,408 4086HOURS WORKED, LAST 12 MONTHS EIGHT 6 AVERAGE JANUARY TEMPERATURE º PEOPLE WHO WORK AT THE NERDERY TWO HUNDRED TWENTY-THREE FOUR WE HELP OUR PARTNERS GET BIG IDEAS OUT OF THEIR HEADS AND ONTO THEIR CLIENTS’ WEBSITES HTTP://WWW.NERDERY.COM TWITTER: @THE_NERDERY

HOW TO PARTICIPATEUsing the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us an email at primers@nerdery.com

DAN PISCITIELLO & ANTHONY TICKNOR SENIOR FRONT-END DEVELOPERS

DESIGNING FOR 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 DESIGNS 960 pixels

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 STACKfont-family: Helvetica, Arial, sans-serif; Times News Roman, Times, serif; HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;

FONT SERVICESTypekitGoogle Font APIKernestFonts.com

SIFR & CUFONRely on Flash & JavaScriptSlows PerformanceLicensing IssuesNot always viewable on mobile deviceNot Recommended

MOBILE

SMART PHONE SHIPMENTS Nokia RIM Other Apple HTC Samsung 2009 2010 0 100 200 300 400 Units Shipped in Millions

MOBILE VS DESKTOPSmartphone sales pass PC sales for the first time in history. Mobile Desktop 2009 Q4 2010 Q4 0 27.5 55 82.5 110 Units Shipped in Millions

HOME USAGE OF PC 20% decline since 2008200620082010 0 8.25 16.5 24.75 33 Weekly Hours Spent

MOBILE FIRSTProvide focus & identify important contentOffers content visibility across more devicesUnifies codebase for easier maintenanceMobile is becoming more prominent andgrowing faster than desktop computers

WHY NOT AN APP?Apps are proprietary / device specificIncreased up front & maintenance costsCan be a barrier to accessing informationHTML5 & Web Standards are improving

MEDIA QUERIESCSS served based on device widthIdentical HTML source served to all devicesContent accessible by all devices

RESPONSIVE VS. ADAPTIVEBuilt on Flexible Grid Built on static width gridFlexible to any device width Static width set by breakpointsRelatively future-proof Fits width of current devicesExample: Example:http://robot-or-not.com http://sweethatclub.org

FLEXIBLE CONTENTNEWS NEWS Lorem ipsum dolor Tony tells a great story about monkeys Sit amet, consectetur adipisicing elit, sed do to everyone! eiusmod tempor incididunt ut labore et dolore magn I like monkeys. The pet aliqua. Ut enim ad minim store was selling them for veniam, quis nostrud. five cents a piece. I thought that odd since they were Read More » normally a couple thousand each. I decided not to look a gift horse in the mouth. I bought 200. Read More »

FLEXIBLE LAYOUTSDefine your breakpoints (320,768,960,1200)Design each breakpointKeep content in the same orderKeep optimization in mind

LOST DESIGN ELEMENTS

ERROR & SUCCESS

HOVER & ACTIVE

SERVER ERRORS

FALLBACKSfor users without JavaScriptfor users without Flash or Silverlightfor less capable browsersfor 508 ADA Compliance

MISCELLANEOUSMissing Static Pages Terms & Conditions Privacy Policy Site Map

QUESTIONS?Using the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us an email at primers@nerdery.comMore answers online at http://nerdery.com

http://blog.nerdery.com	1343
http://feeds2.feedburner.com	3
http://feedproxy.google.com	2
http://feeds.feedburner.com	1
http://www.linkedin.com	1

Designing for Development 2011- A Nerdery Interactive Primer

by The Nerdery on Sep 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,350

Statistics

Designing for Development 2011- A Nerdery Interactive Primer — Presentation Transcript