Designing for Development 2011- A Nerdery Interactive Primer
Jan 27, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 [email protected]
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 [email protected]
More answers online at http://nerdery.com
Related Documents
