1 / 27

Frank West

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!.

prema
Download Presentation

Frank West

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frank West Front end web developer Lover of cats Front end web development – How to be great! by Frank West, 1 June 2013

  2. Distractions Front end web development – How to be great! by Frank West, 1 June 2013

  3. Front end web development How to be great! Front end web development – How to be great! by Frank West, 1 June 2013

  4. Introducing Ella Front end web development – How to be great! by Frank West, 1 June 2013

  5. Where is the website? Front end web development – How to be great! by Frank West, 1 June 2013

  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. 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. 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. 3 seconds

  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. 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. Front end web development – How to be great! by Frank West, 1 June 2013

  13. Front end web development – How to be great! by Frank West, 1 June 2013

  14. Front end web development – How to be great! by Frank West, 1 June 2013

  15. Front end web development – How to be great! by Frank West, 1 June 2013

  16. Front end web development – How to be great! by Frank West, 1 June 2013

  17. Front end web development – How to be great! by Frank West, 1 June 2013

  18. Front end web development – How to be great! by Frank West, 1 June 2013

  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. They’re all dead Dave Front end web development – How to be great! by Frank West, 1 June 2013

  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. 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. Front end web development – How to be great! by Frank West, 1 June 2013

  24. Front end web development – How to be great! by Frank West, 1 June 2013

  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. We have arrived • Functionality Front end web development – How to be great! by Frank West, 1 June 2013

  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

More Related