Frank West

Front end web developerLover of cats

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

@frankjwest

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