Times they are a Changin'
•Descargar como PPT, PDF•
1 recomendación•887 vistas
Making changes to your site without actually changing anything. Squiz conference. Website: http://squiz.io
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Similar a Times they are a Changin'
Similar a Times they are a Changin' (20)
Último
Último (20)
Times they are a Changin'
- 2. HELLO.
- 4. ITERATIVE
- 5. TIMES THEY ARE A CHANGIN’ or Making Changes to your website when not changing your website...
- 6. OH CRAP I DIDN’T THINK OF THAT.....
- 7. SQUIZ TAKEAWAY But not until the end. I want your eyes here. No... here. Look at me!
- 9. #1 - PROGRESSIVE ENHANCEMENT. Look at elements you can refactor to make it more progressively enhanced.
- 10. FORMS
- 13. SOCIAL MEDIA
- 14. #2 - HTML Code Sniffer http://squizlabs.github.io/HTML_CodeSniffer/
- 21. #3 - META TAGS
- 29. <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"/>
- 30. <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"/>
- 31. TWITTER
- 32. <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">
- 34. #4 - PERFORMANCE
- 37. TECHCRUNCH.COM
- 39. view-source should never contain ./?a=
- 40. view-source should always contain /__data/
- 41. /__data/ is served from Apache
- 42. WEBPAGETEST.ORG
- 47. IMAGE OPTIM
- 48. IMAGE OPTIM
- 49. SVG
- 53. MINIFY & CONCATENATE JS & CSS
- 54. #5 - MICRODATA ...and ARIA roles but wait for Dave’s talk
- 55. EVENTS
- 56. <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>
- 57. <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>
- 58. <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>
- 59. ARTICLES
- 65. #6 - BECOMING MORE RESPONSIVE Okay so I lied. I had to include something to do with Responsive design
- 68. REMEMBER
- 69. #1 PROGRESSIVE ENHANCEMENT #2 HTML CODESNIFFER #3 METATAGS #4 PERFORMANCE #5 MICRODATA #6 BECOMING MORE RESPONSIVE
- 70. FASTER
- 72. FUTURE FRIENDLY
- 73. ALL WITHOUT CHANGING A THING
- 75. 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.
Notas del editor
- {"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"}