Designing for Development 2011- A Nerdery Interactive Primer

2,830 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,830
On SlideShare
0
From Embeds
0
Number of Embeds
1,546
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing for Development 2011- A Nerdery Interactive Primer

  1. 1. MATT TONAKCOMMUNITY MANAGER
  2. 2. 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
  3. 3. HOW TO PARTICIPATEUsing the questions panels in the GoToMeeting appOn Twitter @The_NerderySend us an email at primers@nerdery.com
  4. 4. DAN PISCITIELLO & ANTHONY TICKNOR SENIOR FRONT-END DEVELOPERS
  5. 5. DESIGNING FOR DEVELOPMENT
  6. 6. THE BASICS
  7. 7. COLOR PROFILE
  8. 8. 72 DPI
  9. 9. WHOLE VALUES / PIXELS
  10. 10. CUSTOM INPUTS
  11. 11. LAYER COMPS
  12. 12. PROVIDE THE FONTS
  13. 13. BLENDING MODES
  14. 14. CONSISTENCY & CONSOLIDATION
  15. 15. SCREEN RESOLUTIONS STATIC WIDTH DESIGNS 960 pixels
  16. 16. FONTS
  17. 17. FONT EMBEDDING / @FONT-FACE Restricted Licensing Served Locally Ideal Implementation Free Resources - League of Moveable Type, Font Squirrel, Google Fonts Premium Option - Adobe Fonts
  18. 18. FONT STACKfont-family: Helvetica, Arial, sans-serif; Times News Roman, Times, serif; HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
  19. 19. FONT SERVICESTypekitGoogle Font APIKernestFonts.com
  20. 20. SIFR & CUFONRely on Flash & JavaScriptSlows PerformanceLicensing IssuesNot always viewable on mobile deviceNot Recommended
  21. 21. MOBILE
  22. 22. SMART PHONE SHIPMENTS Nokia RIM Other Apple HTC Samsung 2009 2010 0 100 200 300 400 Units Shipped in Millions
  23. 23. 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
  24. 24. HOME USAGE OF PC 20% decline since 2008200620082010 0 8.25 16.5 24.75 33 Weekly Hours Spent
  25. 25. MOBILE FIRSTProvide focus & identify important contentOffers content visibility across more devicesUnifies codebase for easier maintenanceMobile is becoming more prominent andgrowing faster than desktop computers
  26. 26. WHY NOT AN APP?Apps are proprietary / device specificIncreased up front & maintenance costsCan be a barrier to accessing informationHTML5 & Web Standards are improving
  27. 27. MEDIA QUERIESCSS served based on device widthIdentical HTML source served to all devicesContent accessible by all devices
  28. 28. 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
  29. 29. 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 »
  30. 30. FLEXIBLE LAYOUTSDefine your breakpoints (320,768,960,1200)Design each breakpointKeep content in the same orderKeep optimization in mind
  31. 31. LOST DESIGN ELEMENTS
  32. 32. ERROR & SUCCESS
  33. 33. HOVER & ACTIVE
  34. 34. SERVER ERRORS
  35. 35. FALLBACKSfor users without JavaScriptfor users without Flash or Silverlightfor less capable browsersfor 508 ADA Compliance
  36. 36. MISCELLANEOUSMissing Static Pages Terms & Conditions Privacy Policy Site Map
  37. 37. 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

×