Times they are a Changin'
Upcoming SlideShare
Loading in...5
×
 

Times they are a Changin'

on

  • 450 views

Making changes to your site without actually changing anything.

Making changes to your site without actually changing anything.

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

Statistics

Views

Total Views
450
Views on SlideShare
370
Embed Views
80

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 80

http://www.scoop.it 69
http://www.linkedin.com 9
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • {"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' Times they are a Changin' Presentation Transcript

  • 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="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"/>
  • <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 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>
  • <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
  • 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 powerful combination that drives us to create seamless, intelligent and engaging online experiences.