Responsive web-design

Responsive web design

Who‘s that guy?

Who‘s that guy?• Michael Grundkötter, 27

Who‘s that guy?• Michael Grundkötter, 27• @Grundi2

Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo

Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo • 63 people, based in Dresden, Germany

Who‘s that guy?• Michael Grundkötter, 27• @Grundi2• lead web developer at queo • 63 people, based in Dresden, Germany• loves html5 and css3

How did we get here?

How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“

How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024

How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024• redirect to m.yoursite.com

How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024• redirect to m.yoursite.com• ﬂuid layouts

How did we get here?• „optimized for YourFavouriteBrowser and 1024x768“• holy barrier of 1024• redirect to m.yoursite.com• ﬂuid layouts • margin: 1.125%; (#dislike)

My audience...

My audience...• uses iPhone3+4 and iPad,

My audience...• uses iPhone3+4 and iPad,• as well as android phones,

My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,

My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,• as well as netbooks,

My audience...• uses iPhone3+4 and iPad,• as well as android phones,• as well as non iPad tablets,• as well as netbooks,• and of course „normal“ desktops (with both, 4:3 and 16:9 from 1024 up to 2000+ pixels!

GA: „top resolutions“

GA: „top resolutions“• 60-80%: 1280+ px

GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px

GA: „top resolutions“• 60-80%: 1280+ px• 10-20%: 1024 px• <5%: mobile

So: „responsive“?

So: „responsive“?• good, clean frontend

So: „responsive“?• good, clean frontend• suitable for different screen sizes and devices

So: „responsive“?• good, clean frontend• suitable for different screen sizes and devices• without providing different websites

Why is this cool?

Why is this cool?• only one website

Why is this cool?• only one website• only a litte more effort

Why is this cool?• only one website• only a litte more effort• good user experience

Why is this cool?• only one website• only a litte more effort• good user experience• very ﬂexible

Why is this cool?• only one website• only a litte more effort• good user experience• very ﬂexible• open for future device development

Support? Check!

Support? Check!• IE9

Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)

Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox

Support? Check!• IE9• Webkit (Safari, Chrome, iOS, Android)• Firefox• Opera

Some hints...

Some hints...• elastic images and videos

Some hints...• elastic images and videos• use text columns for wide screens

Some hints...• elastic images and videos• use text columns for wide screens• not only move and resize, but remove, reorder or redesign (parts)!

live demo• http://share.queo-media.com/uxce11/ responsive

Frameworks• http://www.getskeleton.com/• http://lessframework.com/

Skeleton CSS framework

Skeleton CSS framework• based on 960 grid system, 16 column layout

Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure

Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, forms, buttons)

Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, forms, buttons)• very customizable

Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, forms, buttons)• very customizable• includes HTML5 stuff

Skeleton CSS framework• based on 960 grid system, 16 column layout• good structure• CSS reset and nice defaults (tabs, forms, buttons)• very customizable• includes HTML5 stuff• default media queries

Examples• http://www.about.com• http://naomiatkinson.com/• http://www.alsacreations.fr/• http://adifferentdesign.be/• http://mediaqueri.es/

Further reading• http://www.alistapart.com/articles/responsive-web-design/• http://designshack.co.uk/articles/css/20-amazing-examples-of- using-media-queries-for-responsive-web-design• http://designshack.co.uk/articles/css/build-a-responsive-mobile- friendly-web-page-with-skeleton/• http://net.tutsplus.com/tutorials/html-css-techniques/ responsive-web-design-a-visual-guide/• http://coding.smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design/

Responsive web-design

by Michael Grundkötter on Jun 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Responsive web-design — Presentation Transcript