Transcript Front end web development

Frank West
Front end web developer
Lover 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 – How to be great!
by Frank West, 1 June 2013
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
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
Google
Key
Front end web development – How to be great!
SC
Stat Counter
NM
Net Market
CS
ComScore
by Frank West, 1 June 2013
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 Dave
Front 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