frank west front end web developer lover of cats front end web development – how to be great!by...
TRANSCRIPT
Frank West
Front end web developerLover of cats
Front end web development – How to be great! by Frank West, 1 June 2013
Distractions
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development
Front end web development – How to be great! by Frank West, 1 June 2013
How to be great!
Introducing Ella
Front end web development – How to be great! by Frank West, 1 June 2013
Where is the website?
Global (SC) Global (NM) US (SC) Global (CS)
April 2013 April 2013 March 2013 March 2012 March 2013
Google 90.17 83.22 78.49 66.4 67.1
Bing 3.61 5.4 10.73 16.7 16.9
Yahoo! 3.08 8.01 9.12 11.6 11.8
Front end web development – How to be great! by Frank West, 1 June 2013
Key
SC Stat Counter
NM Net Market
CS ComScore
The basics
• Header tags, h1 – h6• Page titles and meta tags• HTML 5– Header, footer, article, section, aside– Address– Time
Front end web development – How to be great! by Frank West, 1 June 2013
Adding more
• Open graph– Meta tags for social
• Microdata (Schema.org)– Supported by Google, Yahoo! and Bing– Define books, movies, people, products, reviews,
organisations, events and much more
Front end web development – How to be great! by Frank West, 1 June 2013
Another step
• Google Analytics– Events• Videos being played• Ajax events being triggers• Tabs be switched
– Filters• Logged in vs Logged out
Front end web development – How to be great! by Frank West, 1 June 2013
3 seconds
Understand it
• Sprites• Minified files• Code ordering• Compressed images• Do we need external libraries• Even setting heights and widths on images
Front end web development – How to be great! by Frank West, 1 June 2013
Test it
• Google Chrome developer tools• Google page speed• Gtmetrix• YSlow
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
A gentle hand
• Understand the design• Talk with the designer• Pay attention to detail• Question inconsistencies• Master typography
Front end web development – How to be great! by Frank West, 1 June 2013
They’re all dead DaveFront end web development – How to be great! by Frank West, 1 June 2013
Is it alive
• Hover, focus, active states– Links– Buttons– Forms– Table rows
• It doesn’t need to be fast
Front end web development – How to be great! by Frank West, 1 June 2013
Where is it?
• Icons– Are they obvious?
• Search– Where is it?
• Terminology– What does that mean?
• Errors– The button doesn’t work?
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Front end web development – How to be great! by Frank West, 1 June 2013
Take the challenge
• No mouse• Screen readers• Black and white• 200% text
Front end web development – How to be great! by Frank West, 1 June 2013
We have arrived
• Functionality
Front end web development – How to be great! by Frank West, 1 June 2013
How to be great!
• HTML, CSS, JavaScript• SEO• Performance• Design• Interaction• User experience• Accessibility
Front end web development – How to be great! by Frank West, 1 June 2013