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.

1. Responsive Web Design
Gottfried Ryser CGX AG

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 and
independ with the design.

3. The Internet
moves towards mobile devices
The time is gone for single device design
By 2014 the Mobile Internet passes the use of desktop based Internet

4. Adaptive or Responsive
Responsive is Multiple Fluid Grid Layouts
Adaptive is multiple fixed width layouts

5. Ethan Marcotte showed the way
Beginning of 2011 his book came out

6. Adapted to device specs
Small + Medium + Large - with one design

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. Desktop Screen
• Multiple columns
• Bold design
• Big pictures
• Mega-menus
• Columns with fixed
widths

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. 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. Smartphones - Navigation
This sample shows clearly the difference
between desktop and mobile:
No picture/slider and a popup menu

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 below
http://t.staples.com http://secondstory.com

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. Fluid grid
Header Header
Navigation
Navigation
Adaptive is multiple fixed
widthContent
layouts Sidebar
Adaptive is
Content
multiple fixed
width layouts
Footer
Sidebar
On smaller devices, stack elements
instead of float wherever necessary
Footer

15. Media queries
Use 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. Simple sample for testing
body { 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. Frameworks
Use of Frameworks saves time Our favorite is Bootstrap, good
or your own code gives more flexibility community, flexible, configurable
and updated frequently.

18. Where you can learn more?
Ethan Marcotte Author Ben Frain, Author
Amazon.com Packtpub.com
Some good samples here
http://designmodo.com/twitter-bootstrap-snippets-examples/

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. Some samples of our work
Fibre optic network calculator
eCommerce with CMS, Flash, data
Mashup
Web, Intranet, Extranet, Contract-
Generator,

21. Questions?