SlideShare a Scribd company logo
1 of 58
Download to read offline
Adapting to a
Responsive
Design
Matt Gibson / Cyber-Duck
@duckymatt / @cyberduck_uk
#untangletheweb
How do we define
responsive?
To react quickly
and positively.
Responsive web design
is a design approach that
aims to create interfaces
that react quickly and
positively to the user’s
conditions.
Flickr credit: @alui0000
People will access our websites in ways we
perhaps hadn’t even considered yet.
The previous state(s)
of our website
“Desktop” site
(2011)
“Tablet” site
(Later 2011)
*Not to scale :)
“Mobile” site
(2012)
Our separate mobile websites:
A stop-gap strategy
So why go
responsive?
1. Multiple code bases
2. Content management
3. More and more new
devices and form factors
You don't get to decide
which device people use
to access your website.
Karen McGrane
http://bondartscience.com/
Setting goals for
a RWD...
1. Content Parity
Credit: http://wtfmobileweb.com/
The same content and functionality should be on all platforms.
2. Speed
Flickr credit: @myoldpostcards
Performance affects everyone.
3. Future friendly
Credit: http://futurefriend.ly/
Cut down on maintenance and support known unknowns
#ffly
4. Accessibility
Credit: http://futurefriend.ly/
Styles, backgrounds and JavaScript
are progressive enhancements
1. Content Parity
RWD means
assuming less
about our users
Begin by defining the content
people visit your website for.
http://xkcd.com/773/
Researching our content strategy
Speaking to existing customers
Google Analytics
CrazyEgg
Lead Forensics
Defining the content first
Our content defines the
layouts we need.
Not the other way around.
2. Speed
Does responsive =
poor performance?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
To react quickly
and positively.
It’s easy to confuse
implementation with
technique.
Making performance a
priority.
We set ourselves a performance budget of 500kb for mobile.
To load the Facebook,Twitter and Google
social media buttons for a total of 19
requests takes 246.7 KB in bandwidth.
http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
Off the shelf
front-end frameworks
The next big thing TM
Flickr credit: @donshall
They try to do everything.
They make design decisions for you.
Flickr credit: @jamesrbowe
Knowing your code from top to bottom is
essential to have total control over it.
Using frameworks doesn’t help with that.
https://github.com/Cyber-Duck/hoisin.scss
We created a mini-library that
doesn’t include any predefined
styling for layout / grid, buttons,
typography etc.
Did we need CMS
software to manage
our content?
No CMS Software ≠ No CMS
For most projects
the answer would
be yes.
For our own website it was no (apart from our blog).
Only loading
what we need
when we need it.
Javascript
CSS
Images
3. Future friendliness
The web doesn’t
have a fixed width.
We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
John Allsopp, A Dao of Web Design
http://alistapart.com/article/dao
Layout & flow
Breakpoints based on content and design, rather than device
Designing for context
The right code for the right task
Leave styling to CSS and
use JS only to change
the “state” of an element.
Animation as an enhancement
Using CSS3 for
animations enhances the
experience for browsers
that support it, while
older browsers still get
the functionality if not
the eye candy.
4. Accessibility
6 quick wins for
accessibility
1. Make the purpose of all
links as clear and
descriptive as possible
Avoid link anchors that presume the interaction method like “click here”
2. Create a hidden skip
navigation link
3. Make URLs human
readable and permanent
where possible.
Is this human readable?
http://art.com/artgallery/default.asp?
sid=9DF4BC0580DF11D3ACB60090271E26A8
&command=freelist.
4. Use descriptive alt tags
for when an image
cannot be shown.
5. Don’t use placeholders
as an alternative for
labels on forms.
6. Use appropriate input
types and attributes on
forms.
The results?
Since launch:
200%increase in
mobile traffic
2.07%increase in
conversion rate
-4000%reduction in homepage
exit rate on mobile
Our conclusion
We are still learning.
There is more to do to make
our websites faster, more
future friendly, more
accessible.
AKA more responsive.
Thank you.
Matt Gibson / Cyber-Duck
@duckymatt / @cyberduck_uk
#untangletheweb

More Related Content

What's hot

Getting agile with drupal
Getting agile with drupalGetting agile with drupal
Getting agile with drupalPromet Source
 
Choosing Between Cross Platform of Native Development
Choosing	Between Cross Platform of Native DevelopmentChoosing	Between Cross Platform of Native Development
Choosing Between Cross Platform of Native DevelopmentCodeOps Technologies LLP
 
Drupal 8 Vocabulary Lesson
Drupal 8 Vocabulary LessonDrupal 8 Vocabulary Lesson
Drupal 8 Vocabulary LessonMediacurrent
 
Drupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths DebunkedDrupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths DebunkedAngela Byron
 
Introducing Workspace Preview System: Solve Your Content Preview Problems
Introducing Workspace Preview System: Solve Your Content Preview ProblemsIntroducing Workspace Preview System: Solve Your Content Preview Problems
Introducing Workspace Preview System: Solve Your Content Preview ProblemsAcquia
 
Managing Translation Workflows in Drupal 7
Managing Translation Workflows in Drupal 7Managing Translation Workflows in Drupal 7
Managing Translation Workflows in Drupal 7Suzanne Dergacheva
 
Devops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with PuppetDevops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with PuppetEdureka!
 
Software development in the modern age
Software development in the modern ageSoftware development in the modern age
Software development in the modern ageRoy Wasse
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Acquia
 
Drupal Migrations in 2018
Drupal Migrations in 2018Drupal Migrations in 2018
Drupal Migrations in 2018Pantheon
 
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012Suzanne Dergacheva
 
Migrate for Site Builders from MidCamp 2016
Migrate for Site Builders from MidCamp 2016Migrate for Site Builders from MidCamp 2016
Migrate for Site Builders from MidCamp 2016Suzanne Dergacheva
 
DevOps at DreamLab
DevOps at DreamLabDevOps at DreamLab
DevOps at DreamLabDreamLab
 
Grails At Linked
Grails At LinkedGrails At Linked
Grails At LinkedLinkedIn
 
Grails patterns and practices
Grails patterns and practicesGrails patterns and practices
Grails patterns and practicespaulbowler
 
Supporting a Drupal site over the Longterm
Supporting a Drupal site over the LongtermSupporting a Drupal site over the Longterm
Supporting a Drupal site over the Longtermmeghsweet
 
Continuous integration and delivery for java based web applications
Continuous integration and delivery for java based web applicationsContinuous integration and delivery for java based web applications
Continuous integration and delivery for java based web applicationsSunil Dalal
 
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8Angela Byron
 
Drupal's competition
Drupal's competitionDrupal's competition
Drupal's competitionAngela Byron
 

What's hot (20)

Our encounter with d8
Our encounter with d8Our encounter with d8
Our encounter with d8
 
Getting agile with drupal
Getting agile with drupalGetting agile with drupal
Getting agile with drupal
 
Choosing Between Cross Platform of Native Development
Choosing	Between Cross Platform of Native DevelopmentChoosing	Between Cross Platform of Native Development
Choosing Between Cross Platform of Native Development
 
Drupal 8 Vocabulary Lesson
Drupal 8 Vocabulary LessonDrupal 8 Vocabulary Lesson
Drupal 8 Vocabulary Lesson
 
Drupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths DebunkedDrupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths Debunked
 
Introducing Workspace Preview System: Solve Your Content Preview Problems
Introducing Workspace Preview System: Solve Your Content Preview ProblemsIntroducing Workspace Preview System: Solve Your Content Preview Problems
Introducing Workspace Preview System: Solve Your Content Preview Problems
 
Managing Translation Workflows in Drupal 7
Managing Translation Workflows in Drupal 7Managing Translation Workflows in Drupal 7
Managing Translation Workflows in Drupal 7
 
Devops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with PuppetDevops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with Puppet
 
Software development in the modern age
Software development in the modern ageSoftware development in the modern age
Software development in the modern age
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
Drupal Migrations in 2018
Drupal Migrations in 2018Drupal Migrations in 2018
Drupal Migrations in 2018
 
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012
Drupal 7 for Government Case Study: Presentation at DrupalCamp Montreal 2012
 
Migrate for Site Builders from MidCamp 2016
Migrate for Site Builders from MidCamp 2016Migrate for Site Builders from MidCamp 2016
Migrate for Site Builders from MidCamp 2016
 
DevOps at DreamLab
DevOps at DreamLabDevOps at DreamLab
DevOps at DreamLab
 
Grails At Linked
Grails At LinkedGrails At Linked
Grails At Linked
 
Grails patterns and practices
Grails patterns and practicesGrails patterns and practices
Grails patterns and practices
 
Supporting a Drupal site over the Longterm
Supporting a Drupal site over the LongtermSupporting a Drupal site over the Longterm
Supporting a Drupal site over the Longterm
 
Continuous integration and delivery for java based web applications
Continuous integration and delivery for java based web applicationsContinuous integration and delivery for java based web applications
Continuous integration and delivery for java based web applications
 
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8
Drupal 9 and Backwards Compatibility: Why now is the time to upgrade to Drupal 8
 
Drupal's competition
Drupal's competitionDrupal's competition
Drupal's competition
 

Viewers also liked

Adapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrumAdapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrumMatt Gibson
 
Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013Matt Gibson
 
Designing Better Experiences
Designing Better ExperiencesDesigning Better Experiences
Designing Better ExperiencesMatt Gibson
 
FEXA - PRESENTACION OFICIAL ANDINA
FEXA - PRESENTACION OFICIAL ANDINAFEXA - PRESENTACION OFICIAL ANDINA
FEXA - PRESENTACION OFICIAL ANDINAguestd94c4d3
 
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...Matt Gibson
 
Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014Matt Gibson
 
Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016Matt Gibson
 
Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015Matt Gibson
 
Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15Matt Gibson
 
la strada e le sue regole
la strada e le sue regolela strada e le sue regole
la strada e le sue regoletizianalupi
 
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Matt Gibson
 
Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015Matt Gibson
 
Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015Matt Gibson
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
 
User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...Matt Gibson
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016Matt Gibson
 
Adapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro DigitalAdapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro DigitalMatt Gibson
 
Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015 Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015 Matt Gibson
 
Adapting to Responsive Design - HCID2014, 24 April 2014
Adapting to Responsive Design - HCID2014, 24 April 2014Adapting to Responsive Design - HCID2014, 24 April 2014
Adapting to Responsive Design - HCID2014, 24 April 2014Matt Gibson
 

Viewers also liked (19)

Adapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrumAdapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrum
 
Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013
 
Designing Better Experiences
Designing Better ExperiencesDesigning Better Experiences
Designing Better Experiences
 
FEXA - PRESENTACION OFICIAL ANDINA
FEXA - PRESENTACION OFICIAL ANDINAFEXA - PRESENTACION OFICIAL ANDINA
FEXA - PRESENTACION OFICIAL ANDINA
 
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
 
Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014
 
Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016
 
Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015
 
Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15
 
la strada e le sue regole
la strada e le sue regolela strada e le sue regole
la strada e le sue regole
 
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
 
Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015
 
Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
 
User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016
 
Adapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro DigitalAdapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro Digital
 
Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015 Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015
 
Adapting to Responsive Design - HCID2014, 24 April 2014
Adapting to Responsive Design - HCID2014, 24 April 2014Adapting to Responsive Design - HCID2014, 24 April 2014
Adapting to Responsive Design - HCID2014, 24 April 2014
 

Similar to Adapting to a Responsive Design at Untangle the Web on 29th July 2013

Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba - .toster
 
Aucd ppt
Aucd pptAucd ppt
Aucd ppticidemo
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for BeginnersD'arce Hess
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap Creative
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recentArtem Shymko
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Thomas Carney
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Devicefilirom1
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)ssuserd60633
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Dave Olsen
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Doug Gapinski
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentationcolberding
 

Similar to Adapting to a Responsive Design at Untangle the Web on 29th July 2013 (20)

Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Pablo Villalba -
Pablo Villalba - Pablo Villalba -
Pablo Villalba -
 
Aucd ppt
Aucd pptAucd ppt
Aucd ppt
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book Sample
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Aaug sample slides
Aaug sample slidesAaug sample slides
Aaug sample slides
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recent
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
Mobile SEO (English Version)
Mobile SEO (English Version)Mobile SEO (English Version)
Mobile SEO (English Version)
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 

More from Matt Gibson

Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...Matt Gibson
 
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH Matt Gibson
 
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - LeedsEmpathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - LeedsMatt Gibson
 
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Matt Gibson
 
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Matt Gibson
 
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Matt Gibson
 
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014Matt Gibson
 
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14Matt Gibson
 
Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014Matt Gibson
 

More from Matt Gibson (9)

Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...
 
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
 
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - LeedsEmpathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
 
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
 
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
 
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014
 
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
 
Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14Adapting to a Responsive Web Design - TFM&A - 26-02-14
Adapting to a Responsive Web Design - TFM&A - 26-02-14
 
Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014
 

Recently uploaded

一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisPeclers Paris
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxjoshuaclack73
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...Amil baba
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Projectbuvanatest
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna Collegefyzasm95
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...Amil baba
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理thubko
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfFreixa Home Design
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...pillahdonald
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...Amil baba
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...Amil baba
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质yzeoq
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...drjose256
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 

Recently uploaded (20)

一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...
100^%)( MAYIBUYE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Soweto, ...
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 

Adapting to a Responsive Design at Untangle the Web on 29th July 2013