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/jquerymasonry.jpg"/>
<meta property="og:title" content="...
<meta property="og:image"
content="%globals_asset_thumbnail_url%"/>
<meta property="og:title" content="%globals_asset_name...
TWITTER
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@reswebdes">
<meta name="twitter:creator" ...
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-pub...
<div itemscope itemtype="http://data-vocabulary.org/Event">
​<a href="http://www.example.com/events/spinaltap" itemprop="u...
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
​
<meta itemprop="latitude" content="37.774929" ...
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
THANK YOU
http://squiz.io/takeaway

Justin Avery
javery@squiz.co.uk
@justinavery
Technology .
For the people,
by the people.

engaging people

Clever technology? Yep. Brilliant people? You bet.
It's this...
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Times they are a Changin'
Upcoming SlideShare
Loading in …5
×

Times they are a Changin'

676 views
591 views

Published on

Making changes to your site without actually changing anything.

Squiz conference. Website: http://squiz.io

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • {"38":"James Hurst will be talking later about edge which helps performance, but this is what you can do within matrix yourself\n","33":"Of course you don’t want to test to see if this works by posting a bunch of social updates... because what if you’ve got it wrong?!?!\n","22":"9th century Tang Dynasty\n","11":"Are you using Google Maps? Is it an embed?\n","34":"The first User Experience is the URL, next is the load time.\n","12":"Are you using Google Maps? Is it an embed?\n","35":"It’s not about page load time, it’s the perceived load time of the user that makes the difference.\n","13":"Automated social media feeds. Is this a feature? Performance issues also.\n","36":"recently re-launched (responsive).\nTC image loads.\nimmediate page render\n","3":"The idea of this talk came about after umming and ahhing about a tonne of different things. \n","53":"if with time I won’t go into this but feel free to ask me if this is of interest to you.\n","26":"Social trend - twitter cards\n","4":"A website is never complete. It’s iterative. This is why we step away from the pain of publishing in books and newspapers, a prospectus, once published they can not be changed. Websites on the other hand can be changed.\n","54":"Reviews - People (Intranets) - Products - Businesses and organizations (Extranets) - Recipes - Events (Everyone)\n","21":"Before we get into the tags I wanted to point out 2 current trends. Cards. Social.\n","10":"Have you got a multi step form, are you doing front end validation?\n"}
  • Times they are a Changin'

    1. 1. engaging people
    2. 2. HELLO.
    3. 3. ITERATIVE
    4. 4. TIMES THEY ARE A CHANGIN’ or Making Changes to your website when not changing your website...
    5. 5. OH CRAP I DIDN’T THINK OF THAT.....
    6. 6. SQUIZ TAKEAWAY But not until the end. I want your eyes here. No... here. Look at me!
    7. 7. INVISIBLE CHANGES
    8. 8. #1 - PROGRESSIVE ENHANCEMENT. Look at elements you can refactor to make it more progressively enhanced.
    9. 9. FORMS
    10. 10. MAPS http://codepen.io/justincavery/pen/hHEgK
    11. 11. MAPS http://codepen.io/justincavery/pen/hHEgK
    12. 12. SOCIAL MEDIA
    13. 13. #2 - HTML Code Sniffer http://squizlabs.github.io/HTML_CodeSniffer/
    14. 14. #3 - META TAGS
    15. 15. http://upload.wikimedia.org/wikipedia/commons/8/88/Ming_Dynasty_playing_card%2C_c._1400.jpg
    16. 16. FACEBOOK open graph
    17. 17. <meta property="og:image" content="/__data/assets/image/0005/1688/jquerymasonry.jpg"/> <meta property="og:title" content="jQuery Masonry"/> <meta property="og:description" content="" /> <meta property="og:url" content="http://responsivedesign.is/resources/javascriptjquery/jquery-masonry"/> <meta property="og:site_name" content="ResponsiveDesign.is"/>
    18. 18. <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"/>
    19. 19. TWITTER
    20. 20. <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">
    21. 21. VALIDATORS https://developers.facebook.com/tools/debug https://dev.twitter.com/docs/cards/validation/validator
    22. 22. #4 - PERFORMANCE
    23. 23. PERCEIVED LOAD TIME
    24. 24. TECHCRUNCH.COM http://filamentgroup.com/lab/socialcount/
    25. 25. TECHCRUNCH.COM
    26. 26. MATRIX PERFORMANCE RULES
    27. 27. view-source should never contain ./?a=
    28. 28. view-source should always contain /__data/
    29. 29. /__data/ is served from Apache
    30. 30. WEBPAGETEST.ORG
    31. 31. COMPRESS YOUR IMAGES
    32. 32. IMAGE OPTIM
    33. 33. IMAGE OPTIM
    34. 34. SVG
    35. 35. MINIFY & CONCATENATE JS & CSS
    36. 36. #5 - MICRODATA ...and ARIA roles but wait for Dave’s talk
    37. 37. EVENTS
    38. 38. <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 San Francisco show. When: Oct 15, 7:00PM—9:00PM Where: Warfield Theatre, 982 Market St, San Francisco, CA Category: Concert Tickets from $10-$11 2,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>
    39. 39. <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>
    40. 40. <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>
    41. 41. ARTICLES
    42. 42. #6 - BECOMING MORE RESPONSIVE Okay so I lied. I had to include something to do with Responsive design
    43. 43. ISH random breakpoint generator http://bradfrostweb.com/demo/ish/
    44. 44. REMEMBER
    45. 45. #1 PROGRESSIVE ENHANCEMENT #2 HTML CODESNIFFER #3 METATAGS #4 PERFORMANCE #5 MICRODATA #6 BECOMING MORE RESPONSIVE
    46. 46. FASTER
    47. 47. IMPROVED USER EXPERIENCE
    48. 48. FUTURE FRIENDLY
    49. 49. ALL WITHOUT CHANGING A THING
    50. 50. THANK YOU http://squiz.io/takeaway Justin Avery javery@squiz.co.uk @justinavery
    51. 51. Technology . For the people, by the people. engaging people Clever technology? Yep. Brilliant people? You bet. It's this powerful combination that drives us to create seamless, intelligent and engaging online experiences.

    ×