times they are a changin
DESCRIPTION
Making changes to your site without actually changing anything. Squiz conference. Website: http://squiz.ioTRANSCRIPT
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
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"/>
<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
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.