Responsive Web Design  Gottfried Ryser CGX AG
What is Responsive Web               Design?The future is no more just desktop, different platforms,browsers und Responsiv...
The Internetmoves towards mobile devices The time is gone for single device design By 2014 the Mobile Internet passes the ...
Adaptive or ResponsiveResponsive is Multiple Fluid Grid Layouts              Adaptive is multiple fixed width layouts
Ethan Marcotte showed the way    Beginning of 2011 his book came out
Adapted to device specs  Small + Medium + Large - with one design
Adapted to devices means:• Use in the best way the device specific  features• Not just scaled down websites• Navigation wi...
Desktop Screen•   Multiple columns•   Bold design•   Big pictures•   Mega-menus•   Columns with fixed    widths
Tablets Smaller screens, but also  with high resolution (Apple  Retina display) Portrait – Landscape  selectable and des...
Smartphones• Content in one column• Navigation from OS or from  script• Remove not needed  pictures• Smaller text• Even ne...
Smartphones - NavigationThis sample shows clearly the differencebetween desktop and mobile:No picture/slider and a popup m...
But is responsive the only way? No, not at all - depends on design and use  For eCommerce application it does not work  ...
What is the key?•   HTML5 / CSS3•   Fluid grid•   Fluid images - make images scalable•   Media queries          Works best...
Fluid grid          Header                          Header         Navigation                                         Navi...
Media queriesUse in the headersection:<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="as...
Simple sample for testingbody {                                   Try this vey simple sample, add these  background-color:...
FrameworksUse of Frameworks saves time              Our favorite is Bootstrap, goodor your own code gives more flexibility...
Where you can learn more?Ethan Marcotte Author               Ben Frain, AuthorAmazon.com                          Packtpub...
A few info’s about CGX AG• Working with OpenCms since early days,  company founded 1987, 10 employees• Developing website ...
Some samples of our work             Fibre optic network calculator            eCommerce with CMS, Flash, data            ...
Questions?
Upcoming SlideShare
Loading in …5
×

OpenCms Days 2012 - Responsive design for all kind of devices

2,021 views

Published on

Does it make sense to have a website where the URL starts with "mobile"? And use a simple design for it? The web is no more just a screen with a certain resolution. Today and in the near future it can be a tablet or a smartphone. The mobile market is growing fast and forecasts say it will overtake the PC screens and Notebooks in 2013.

With templates written in HTML5 and CSS3 the content of a website can be adapted to all the different screen resolutions in the best way. The content will be adjusted depending on the viewport size. So it can be seen without zooming and scrolling in a perfect format.

This presentation will give an overview with samples and practical hints.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,021
On SlideShare
0
From Embeds
0
Number of Embeds
138
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OpenCms Days 2012 - Responsive design for all kind of devices

  1. 1. Responsive Web Design Gottfried Ryser CGX AG
  2. 2. What is Responsive Web Design?The future is no more just desktop, different platforms,browsers und Responsive Design is a shift to be more open andindepend with the design.
  3. 3. The Internetmoves towards mobile devices The time is gone for single device design By 2014 the Mobile Internet passes the use of desktop based Internet
  4. 4. Adaptive or ResponsiveResponsive is Multiple Fluid Grid Layouts Adaptive is multiple fixed width layouts
  5. 5. Ethan Marcotte showed the way Beginning of 2011 his book came out
  6. 6. Adapted to device specs Small + Medium + Large - with one design
  7. 7. Adapted to devices means:• Use in the best way the device specific features• Not just scaled down websites• Navigation with fingers - bigger menues• No mouse over in mobiles
  8. 8. Desktop Screen• Multiple columns• Bold design• Big pictures• Mega-menus• Columns with fixed widths
  9. 9. Tablets Smaller screens, but also with high resolution (Apple Retina display) Portrait – Landscape selectable and design adaptable Less columns Text scaled Smaller and less pictures Navigation behavior, bigger menus for fingers No mouse overs
  10. 10. Smartphones• Content in one column• Navigation from OS or from script• Remove not needed pictures• Smaller text• Even new devices use resolution until 1280 x 800 scaling does not work
  11. 11. Smartphones - NavigationThis sample shows clearly the differencebetween desktop and mobile:No picture/slider and a popup menu
  12. 12. But is responsive the only way? No, not at all - depends on design and use  For eCommerce application it does not work  Same with magazine style websites  Navigation mixed main vertical, subnav horizontal, see the two pages belowhttp://t.staples.com http://secondstory.com
  13. 13. What is the key?• HTML5 / CSS3• Fluid grid• Fluid images - make images scalable• Media queries Works best on newer browser. To adapt a design to older ones like IE 6-7 means it doubles the time to develop the code.
  14. 14. Fluid grid Header Header Navigation NavigationAdaptive is multiple fixedwidthContent layouts Sidebar Adaptive is Content multiple fixed width layouts Footer SidebarOn smaller devices, stack elementsinstead of float wherever necessary Footer
  15. 15. Media queriesUse in the headersection:<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> You can specify device specific parameters for a group of devices@media screen and (min-width: 1001px) and (max-width: 1080px) {#navigation ul li a { font-size: 1.4em; }@media screen and (min-width: 805px) and (max-width: 1000px) { #navigation ul li a { font-size: 1.25em; }@media screen and (min-width: 769px) and (max-width: 804px) { #navigation ul li a { font-size: 1.1em; }/* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... }
  16. 16. Simple sample for testingbody { Try this vey simple sample, add these background-color: grey; code at the end of a css file}@media screen and (max-width: 960px) { body { background-color: red; }}@media screen and (max-width: 768px) { body { background-color: orange; }}@media screen and (max-width: 550px) { body { background-color: yellow; }}@media screen and (max-width: 320px) { body { background-color: green; }}
  17. 17. FrameworksUse of Frameworks saves time Our favorite is Bootstrap, goodor your own code gives more flexibility community, flexible, configurable and updated frequently.
  18. 18. Where you can learn more?Ethan Marcotte Author Ben Frain, AuthorAmazon.com Packtpub.comSome good samples herehttp://designmodo.com/twitter-bootstrap-snippets-examples/
  19. 19. A few info’s about CGX AG• Working with OpenCms since early days, company founded 1987, 10 employees• Developing website based on OpenCms, eCommerce applications, product configurators and customer support applications• Integrating OpenCms – eCommerce – SAP with SSO• Website www.cgx.ch E-Mail info@cgx.ch
  20. 20. Some samples of our work Fibre optic network calculator eCommerce with CMS, Flash, data Mashup Web, Intranet, Extranet, Contract- Generator,
  21. 21. Questions?

×