rt responsive design_final
TRANSCRIPT
© Jellyfish 2012
Responsive Web Designby Richard Tidman | 18 July 2012
#digitaljourneys
Digital Journeys | Responsive Web Design | 18 July 2012
Richard TidmanProject DirectorAs Project Director at Jellyfish, Richard is responsible for planning and execution of digital projects across all departments, leveraging his extensive experience in design and brand communication, combined to deliver integrated solutions to our clients wide range of marketing challenges.
Digital Journeys | Responsive Web Design | 18 July 2012
Responsive Design
Digital Journeys | Responsive Web Design | 18 July 2012
The Mobile Internet is BIG!
60%of mobile phones
feature a full HTML browser
36%of global
population own a smartphone
8xgrowth rate of desktop
Digital Journeys | Responsive Web Design | 18 July 2012
And it has its own personality...
Smaller screens Wider accessDifferent interactions
Digital Journeys | Responsive Web Design | 18 July 2012
Remember what it was like?
Digital Journeys | Responsive Web Design | 18 July 2012
Then this arrived!
Digital Journeys | Responsive Web Design | 18 July 2012
Followed by these...
Digital Journeys | Responsive Web Design | 18 July 2012
It started with the desktop...
Digital Journeys | Responsive Web Design | 18 July 2012
But maybe we should think mobile first...
Digital Journeys | Responsive Web Design | 18 July 2012
So, what is 'mobile first' all about?
Luke Wroblewskihttp://www.lukew.com/
Digital Journeys | Responsive Web Design | 18 July 2012
So, what is 'mobile first' all about?
1. Growth - change in online behaviour represents a big opportunity
2. Constraints - the nature of the device forces you to focus
3. Capabilities - greater feature set, means opportunity to innovate
Digital Journeys | Responsive Web Design | 18 July 2012
Why is this a good thing?
The simplicity that mobile brings to the user experience is a great force for developing an improved user experience, independent of device.
Digital Journeys | Responsive Web Design | 18 July 2012
So, where does Responsive Design fit in?
Ethan Marcottehttp://ethanmarcotte.com/http://unstoppablerobotninja.com/
Digital Journeys | Responsive Web Design | 18 July 2012
It follow's the responsive architecture movement...
Digital Journeys | Responsive Web Design | 18 July 2012
Digital Journeys | Responsive Web Design | 18 July 2012
The old (current) approach to mobile...
Digital Journeys | Responsive Web Design | 18 July 2012
It goes back to the days of print!
Digital Journeys | Responsive Web Design | 18 July 2012
Digital Journeys | Responsive Web Design | 18 July 2012
But the web is way more dynamic!
Digital Journeys | Responsive Web Design | 18 July 2012
Digital Journeys | Responsive Web Design | 18 July 2012
And it's getting ever more complex...
Digital Journeys | Responsive Web Design | 18 July 2012
There is a solution.
Digital Journeys | Responsive Web Design | 18 July 2012
So, how does responsive design work?
1. Media Queries - control the style sheet applied to a page
2. Fluid Grids - layouts based on proportion rather than fixed measurements
3. Flexible Images - automatically re-scale to fit requirements
Digital Journeys | Responsive Web Design | 18 July 2012
1. Media Queries
Digital Journeys | Responsive Web Design | 18 July 2012
2. Fluid Grids
Digital Journeys | Responsive Web Design | 18 July 2012
3. Flexible Images
Digital Journeys | Responsive Web Design | 18 July 2012
And, it's a front end technology.
Which means you don't necessarily need to re-build your entire website.
...and we can do some pretty cool things!
Digital Journeys | Responsive Web Design | 18 July 2012
Tailor usability to work with one of these...
Digital Journeys | Responsive Web Design | 18 July 2012
Remove noise from busy pages...
Digital Journeys | Responsive Web Design | 18 July 2012
And optimise for various user groups...Test
Analyse Test
Analyse Test
Analyse
Digital Journeys | Responsive Web Design | 18 July 2012
Responsive Design is a hot topic, but why?
VOne Web:"The internet is the internet, and sites should work well on all devices. Optimisation should be based on CSS and device detection, but should not change site function or content beyond the necessary."
Mobile Web:"The mobile is a different platform with different capabilities and different user needs. Sites should be optimised for many (but not all) cases."
Digital Journeys | Responsive Web Design | 18 July 2012
Google have gone on record...
Google Webmaster Central Blog, June 6th 2012:"Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device...
...That is, there is one HTML code for the page regardless of the device accessing it, but its presentation changes using CSS media queries to specify which CSS rules apply for the browser displaying the page."
Digital Journeys | Responsive Web Design | 18 July 2012
As have Bing...
Bing Webmaster Center Blog, July 3rd 2012:" At Bing, we want to keep things simple by proposing the “one URL per content item” strategy... By outputting only one URL for the same content, you will have the following benefits:1. You have more ranking signals coming to this URL. Example: the vast majority of mobile URLs do not have inbound links from other websites as people do not link to mobiles URLs like they link to regular web-situated URLs.2. This is also less search engine crawler traffic coming to your web servers, which is especially useful for large websites. Fewer URLs to crawl reduces the bandwidth our crawlers consume.3. Less work (and potentially less cost) building, updating and maintaining stand-alone mobile-focused websites."
Digital Journeys | Responsive Web Design | 18 July 2012
Growing support for media queries
Digital Journeys | Responsive Web Design | 18 July 2012
And some pretty compelling benefits...
1. It's what the search engines want you to do, and they control the landscape.
2. Maintaining one site is less time consuming (cheaper).
3. It helps improve the user experience and is a great way to focus on performance.
4. There's an opportunity to get it right, right now, and reap the rewards.
5. Thanks to the developments in recent weeks, it's something your competitors will do, it's just a matter of time.
Digital Journeys | Responsive Web Design | 18 July 2012
ResourcesLuke Wrobleowski - Mobile First: http://vimeo.com/38187066
Ethan Marcotte - Responsive Design: http://vimeo.com/34662135
Google Announcement: http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html
Bing Announcement: http://www.bing.com/community/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-plat-forms-desktop-mobile-etc.aspx
http://www.abookapart.com/products/responsive-web-design/
http://www.abookapart.com/products/mobile-first/