Frank West
Front end web developer
Lover of cats

@frankjwest
Front end web development – How to be great!

by Frank West,...
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

Mar...
The basics
• Header tags, h1 – h6
• Page titles and meta tags
• HTML 5
– Header, footer, article, section, aside
– Address...
Adding more
• Open graph
– Meta tags for social

• Microdata (Schema.org)
– Supported by Google, Yahoo! and Bing
– Define ...
Another step
• Google Analytics
– Events
• Videos being played
• Ajax events being triggers
• Tabs be switched

– Filters
...
3 seconds
Understand it
•
•
•
•
•
•

Sprites
Minified files
Code ordering
Compressed images
Do we need external libraries
Even setti...
Test it
•
•
•
•

Google Chrome developer tools
Google page speed
Gtmetrix
YSlow

Front end web development – How to be gre...
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
Mas...
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 ...
Where is it?
• Icons
– Are they obvious?

• Search
– Where is it?

• Terminology
– What does that mean?

• Errors
– The bu...
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...
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

Fr...
Upcoming SlideShare
Loading in …5
×

Front end web development: How to be great

565 views

Published on

No tech, no code, just plain old simple English as I talk you through the entire journey of front end web development. Whether you're new to the industry or have been in it for years, this talk will help you become a great front end developer.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
565
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front end web development: How to be great

  1. 1. Frank West Front end web developer Lover of cats @frankjwest Front end web development – How to be great! by Frank West, 1 June 2013
  2. 2. Distractions Front end web development – How to be great! by Frank West, 1 June 2013
  3. 3. Front end web development – How to be great! by Frank West, 1 June 2013
  4. 4. Introducing Ella Front end web development – How to be great! by Frank West, 1 June 2013
  5. 5. 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 SC NM Net Market CS Front end web development – How to be great! Stat Counter ComScore by Frank West, 1 June 2013
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 3 seconds
  10. 10. 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
  11. 11. 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
  12. 12. Front end web development – How to be great! by Frank West, 1 June 2013
  13. 13. Front end web development – How to be great! by Frank West, 1 June 2013
  14. 14. Front end web development – How to be great! by Frank West, 1 June 2013
  15. 15. Front end web development – How to be great! by Frank West, 1 June 2013
  16. 16. Front end web development – How to be great! by Frank West, 1 June 2013
  17. 17. Front end web development – How to be great! by Frank West, 1 June 2013
  18. 18. Front end web development – How to be great! by Frank West, 1 June 2013
  19. 19. 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
  20. 20. They’re all dead Dave Front end web development – How to be great! by Frank West, 1 June 2013
  21. 21. 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
  22. 22. 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
  23. 23. Front end web development – How to be great! by Frank West, 1 June 2013
  24. 24. Front end web development – How to be great! by Frank West, 1 June 2013
  25. 25. 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
  26. 26. We have arrived • Functionality Front end web development – How to be great! by Frank West, 1 June 2013
  27. 27. 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

×