Designing for Development 2011- A Nerdery Interactive Primer
-
Upload
the-nerdery -
Category
Technology
-
view
126 -
download
5
description
Transcript of Designing for Development 2011- A Nerdery Interactive Primer
![Page 1: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/1.jpg)
![Page 2: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/2.jpg)
MATT TONAKCOMMUNITY MANAGER
![Page 3: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/3.jpg)
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º
![Page 4: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/4.jpg)
HOW TO PARTICIPATE
Using the questions panels in the GoToMeeting app
On Twitter @The_Nerdery
Send us an email at [email protected]
![Page 5: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/5.jpg)
DAN PISCITIELLO
SENIOR FRONT-END DEVELOPERS
ANTHONY TICKNOR&
![Page 6: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/6.jpg)
DESIGNINGFOR DEVELOPMENT
![Page 7: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/7.jpg)
THE BASICS
![Page 8: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/8.jpg)
COLOR PROFILE
![Page 9: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/9.jpg)
72 DPI
![Page 10: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/10.jpg)
WHOLE VALUES / PIXELS
![Page 11: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/11.jpg)
CUSTOM INPUTS
![Page 12: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/12.jpg)
LAYER COMPS
![Page 13: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/13.jpg)
PROVIDE THE FONTS
![Page 14: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/14.jpg)
BLENDING MODES
![Page 15: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/15.jpg)
CONSISTENCY & CONSOLIDATION
![Page 16: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/16.jpg)
SCREEN RESOLUTIONS
STATIC WIDTH DESIGNS960 pixels
![Page 17: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/17.jpg)
FONTS
![Page 18: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/18.jpg)
FONT EMBEDDING / @FONT-FACE
Restricted Licensing
Served Locally
Ideal Implementation
Free Resources - League of Moveable Type, Font Squirrel, Google Fonts
Premium Option - Adobe Fonts
![Page 19: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/19.jpg)
FONT STACK
font-family:
Helvetica, Arial, sans-serif;
Times News Roman, Times, serif;
HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
![Page 20: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/20.jpg)
FONT SERVICES
Typekit
Google Font API
Kernest
Fonts.com
![Page 21: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/21.jpg)
SIFR & CUFON
Rely on Flash & JavaScript
Slows Performance
Licensing Issues
Not always viewable on mobile device
Not Recommended
![Page 22: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/22.jpg)
MOBILE
![Page 23: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/23.jpg)
SMART PHONE SHIPMENTS
2009
2010
0 100 200 300 400
Nokia RIM Other Apple HTC Samsung
Units Shipped in Millions
![Page 24: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/24.jpg)
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
![Page 25: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/25.jpg)
HOME USAGE OF PC20% decline since 2008
2006
2008
2010
0 8.25 16.5 24.75 33
Weekly Hours Spent
![Page 26: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/26.jpg)
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
![Page 27: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/27.jpg)
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
![Page 28: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/28.jpg)
MEDIA QUERIESCSS served based on device width
Identical HTML source served to all devices
Content accessible by all devices
![Page 29: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/29.jpg)
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
![Page 30: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/30.jpg)
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
![Page 31: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/31.jpg)
FLEXIBLE LAYOUTS
Define your breakpoints (320,768,960,1200)
Design each breakpoint
Keep content in the same order
Keep optimization in mind
![Page 32: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/32.jpg)
LOST DESIGNELEMENTS
![Page 33: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/33.jpg)
ERROR & SUCCESS
![Page 34: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/34.jpg)
HOVER & ACTIVE
![Page 35: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/35.jpg)
SERVER ERRORS
![Page 36: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/36.jpg)
FALLBACKS
for users without JavaScript
for users without Flash or Silverlight
for less capable browsers
for 508 ADA Compliance
![Page 37: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/37.jpg)
MISCELLANEOUS
Missing Static Pages
Terms & Conditions
Privacy Policy
Site Map
![Page 38: Designing for Development 2011- A Nerdery Interactive Primer](https://reader035.fdocuments.net/reader035/viewer/2022081414/54c766394a79596c548b45a0/html5/thumbnails/38.jpg)
QUESTIONS?Using the questions panels in the GoToMeeting app
On Twitter @The_Nerdery
Send us an email at [email protected]
More answers online at http://nerdery.com