Rt responsive design_final

#digitaljourneys

Responsive Web Design
by Richard Tidman | 18 July 2012

© Jellyfish 2012

Richard Tidman
Project Director
As 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


The Mobile Internet is BIG!

60
of mobile phones
% 36 %
of global
8 x
growth rate
feature a full population own of desktop
HTML browser a smartphone


And it has its own personality...

Smaller screens Different interactions Wider access


Remember what it was like?


Then this arrived!


Followed by these...


It started with the desktop...


But maybe we should think mobile first...


So, what is 'mobile first' all about?

Luke Wroblewski
http://www.lukew.com/


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


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.


So, where does Responsive Design fit in?

Ethan Marcotte
http://ethanmarcotte.com/
http://unstoppablerobotninja.com/

It follow's the responsive architecture movement...


The old (current) approach to mobile...


It goes back to the days of print!


But the web is way more dynamic!


And it's getting ever more complex...


There is a solution.


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


1. Media Queries


2. Fluid Grids


3. Flexible Images


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!


Tailor usability to work with one of these...


Remove noise from busy pages...


And optimise for various user groups...

t An t An t An
Tes

Tes

Tes
aly

aly

aly
se

se

se

Responsive Design is a hot topic, but why?

One Web: Mobile Web:

V
"The internet is the internet, and "The mobile is a different platform
sites should work well on all devices. with different capabilities and
Optimisation should be based different user needs. Sites should be
on CSS and device detection, but optimised for many (but not all) cases."
should not change site function or
content beyond the necessary."


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."


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."

Growing support for media queries


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.


Resources
Luke 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/


Rt responsive design_final

Recommended

Recommended

More Related Content

Similar to Rt responsive design_final

Similar to Rt responsive design_final (20)

More from Jellyfish Agency

More from Jellyfish Agency (10)

Recently uploaded

Recently uploaded (20)

Rt responsive design_final