A presentation I gave at Social Media Week Glasgow 2011. In it I talked about social media, online content and recent client work my company did using responsive web design as a solution to optimise content for different devices.
networking services treat Social Objects? I think it’s interes;ng to look at how social media services treat social objects. There’s a common aspect with the successful ones...
the universal medium for sharing Social Objects They make it incredibly easy to share these objects They use the web as a universal medium to do this by crea;ng a unique place for each object to live with its own permalink address...
respond to the user's context? The same is true of places like Facebook and TwiJer, content anywhere, op;mised for any device This begs a ques;on: does your content behave in the same way?...
services optimised for them have created a powerful level of expectation in a very short time Because social media is seMng expecta;ons about social objects and how they behave online This has happened with frightening speed
need to respond to this expectation The landscape has shiHed under everyones’ feet We are all living in an online ecosystem that has been shaped by social media and we need to adapt or die...
there is a “mobile web” is not really true anymore Old ideas about the shape of the web are changing too Mobile is no longer an easily-‐ignored gheJo There is just the Web that works and the Web that doesn’t...
modern capabilities have erased comfortable stereotypes We also can’t ignore users by aJaching comfortable stereotypes to them People are using the web everywhere, for everything So where does that leave us creators of the web...
the tools to create a single web that responds to the user's context and meets them halfway We need to meet users halfway With the whole web to chose from, they’ve chosen to spend their ;me and aJen;on on our content, so we owe them that at least
Ethan Marcotte @beep A List Apart, 25th May, 2010 http://www.alistapart.com/articles/responsive-web-design/ A breakthrough occurred in May of last year, when Ethan MarcoJe published this ar;cle in A List Apart where he outlined a way to create single web experiences that op;mised across mul;ple device types
A set of techniques that allows a website's layout to respond to the device it is being displayed on Ethan’s vision was purposefully limited Responsive Web Design was a par;cular technical solu;on to the problem of responding to a device’s display characteris;cs with an op;mised layout
As the screen changes size, the page content changes to fit Fluid grids. A par;cular layout with grow wider and narrower as the display size increases and decreases. Not a new concept. Fluid sites have been around for as long as the web...
Images on the page scale with the fluid grid Flexible images As the layout grows or contracts, the images on the page scale appropriately and don’t break the layout The ability to do this is a more recent development...
Queries As screen size changes, the page contents reconfigure to provide an optimum layout CSS Media Queries The secret sauce that mixes with the first 2 techniques and creates something special Media Queries allow a page to radically alter its layout based on the screen characteris;cs such as size and resolu;on
year Equator have been working with Macdonald Hotels www.macdonaldhotels.co.uk MH owns and manages 45 hotels throughout the UK They asked Equator to help them redevelop their website and the backend systems that support their online booking process Part of their brief was some form of support for Mobile users We decided that a using RWD was the way to deliver this SHOW SITE... So how did we do this...
Progressive Enhancement Web Standards -‐ Clean, seman;cs markup, best prac;ce accessibility Progressive Enhancement -‐ building baseline func;onality that could be enhanced in browsers that supported more advanced technologies like HTML5, CSS3 and JavaScript
fundamental design insights very early by getting onto the hardware Things that we missed in a resized browser window became obvious on a phone or tablet
back-end development is minimal We took a pragma;c approach mobile op;misa;on The complexity of the back-‐end development (data management, systems integra;on) meant that the mobile solu;on had to be low-‐risk from the back-‐end point of view RWD is also low-‐risk from a front-‐end point of view Progressive Enhancement, easy to remove