engaging people

HELLO.

ITERATIVE

TIMES THEY ARE A CHANGIN’

or Making Changes to your website when not changing your website...

OH CRAP

I DIDN’T THINK OF THAT.....

SQUIZ TAKEAWAY

But not until the end. I want your eyes here. No... here. Look at me!

INVISIBLE CHANGES

#1 - PROGRESSIVE ENHANCEMENT.

Look at elements you can refactor to make it more progressively enhanced.

FORMS

MAPS

http://codepen.io/justincavery/pen/hHEgK

MAPS

http://codepen.io/justincavery/pen/hHEgK

SOCIAL MEDIA

#2 - HTML Code Sniffer

http://squizlabs.github.io/HTML_CodeSniffer/

#3 - META TAGS

http://upload.wikimedia.org/wikipedia/commons/8/88/Ming_Dynasty_playing_card%2C_c._1400.jpg

FACEBOOK

open graph

<meta property="og:image" content="/__data/assets/image/0005/1688/jquery-masonry.jpg"/>

<meta property="og:title" content="jQuery Masonry"/>

<meta property="og:description" content="" />

<meta property="og:url" content="http://responsivedesign.is/resources/javascript-jquery/jquery-masonry"/>

<meta property="og:site_name" content="ResponsiveDesign.is"/>

<meta property="og:image" content="%globals_asset_thumbnail_url%"/><meta property="og:title" content="%globals_asset_name%"/><meta property="og:description" content="%globals_asset_metadata_Description%" /><meta property="og:url" content="%globals_asset_url%"/><meta property="og:site_name" content="ResponsiveDesign.is"/>

TWITTER

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@reswebdes">

<meta name="twitter:creator" content="@justinavery">

<meta name="twitter:title" content="jQuery Masonry">

<meta name="twitter:description" content="">

<meta name="twitter:image" content="/__data/assets/image/0005/1688/jquery-masonry.jpg">

VALIDATORS

https://developers.facebook.com/tools/debug https://dev.twitter.com/docs/cards/validation/validator

#4 - PERFORMANCE

PERCEIVED LOAD TIME

TECHCRUNCH.COM

http://filamentgroup.com/lab/socialcount/

TECHCRUNCH.COM

MATRIX PERFORMANCE RULES

view-source should never contain ./?a=

view-source should always contain /__data/

/__data/ is served from Apache

WEBPAGETEST.ORG

COMPRESS YOUR IMAGES

IMAGE OPTIM

IMAGE OPTIM

SVG

MINIFY & CONCATENATE

JS & CSS

#5 - MICRODATA

...and ARIA roles but wait for Dave’s talk

EVENTS

<div><a href="http://www.example.com/events/spinaltap">Spinal Tap</a><img src="spinal_tap.jpg" />

After their highly-publicized search for a new drummer,Spinal Tap kicks off their latest comeback tour with a SanFrancisco show.

When: Oct 15, 7:00PM—9:00PM

Where: Warfield Theatre, 982 Market St, San Francisco, CA

Category: ConcertTickets from $10-$112,000 tickets available<a href="http://www.example.com/events/spinaltap/alltickets">See all available tickets</a><a href="http://www.example.com/events/spinaltap/presale">Presale tickets</a> $10 till 10 November 2015 (1,000 available)<a href="http://www.example.com/events/spinaltap/tickets">Full-price tickets</a> $11</div>

<div itemscope itemtype="http://data-vocabulary.org/Event"> <a href="http://www.example.com/events/spinaltap" itemprop="url" > <span itemprop="summary">Spinal Tap</span> </a> <img itemprop="photo" src="spinal_tap.jpg" />

<span itemprop="description">After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show.</span>

When: <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>— <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>

Where: <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/ Organization"> <span itemprop="name">Warfield Theatre</span> <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">982 Market St</span>, <span itemprop="locality">San Francisco</span>, <span itemprop="region">CA</span> </span>

<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/ Geo"> <meta itemprop="latitude" content="37.774929" /> <meta itemprop="longitude" content="-122.419416" /> </span> </span>

Category: <span itemprop="eventType">Concert</span> <span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate"> Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span> <span itemprop="currency" content="USD" /> <span itemprop="offerCount">2,000</span> tickets available <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl"> http://google.com/ticket</span>See all available tickets</a> </span> <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Presale tickets</a> <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2015</time> (<span itemprop="quantity">1000</span> available) </span> <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Full-price tickets</a> <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> </span></div>

ARTICLES

#6 - BECOMING MORE RESPONSIVE

Okay so I lied. I had to include something to do with Responsive design

ISH

random breakpoint generator

http://bradfrostweb.com/demo/ish/

REMEMBER

#1 PROGRESSIVE ENHANCEMENT

#2 HTML CODESNIFFER

#3 METATAGS

#4 PERFORMANCE

#5 MICRODATA

#6 BECOMING MORE RESPONSIVE

FASTER

IMPROVED USER EXPERIENCE

FUTURE FRIENDLY

ALL WITHOUT CHANGING A THING

http://squiz.io/takeaway

Justin Averyjavery@squiz.co.uk@justinavery

THANK YOU

engaging peopleClever technology? Yep. Brilliant people? You bet. It's this powerful combination that drives us to create seamless, intelligent and engaging online experiences.

Technology .

For the people,

by the people.