Embed Size (px)
DESCRIPTION
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.
Citation preview
Responsive Web Design
Gottfried Ryser CGX AG
What is Responsive WebDesign?
The future is no more just desktop, different platforms,browsers und Responsive Design is a shift to be more open andindepend with the design.
The Internetmoves towards mobile devices
The time is gone for single device designBy 2014 the Mobile Internet passes the use of desktop based Internet
Adaptive or Responsive
Responsive is Multiple Fluid Grid Layouts
Adaptive is multiple fixed width layouts
Ethan Marcotte showed the wayBeginning of 2011 his book came out
Adapted to device specsSmall + Medium + Large - with one design
Adapted to devices means:
• Use in the best way the device specificfeatures
• Not just scaled down websites• Navigation with fingers - bigger
menues• No mouse over in mobiles
Desktop Screen
• Multiple columns• Bold design• Big pictures• Mega-menus• Columns with fixed
widths
Tablets Smaller screens, but also
with high resolution (AppleRetina display)
Portrait – Landscapeselectable and designadaptable
Less columns Text scaled Smaller and less pictures Navigation behavior, bigger
menus for fingers No mouse overs
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 800scaling does not work
Smartphones - Navigation
This sample shows clearly the differencebetween desktop and mobile:No picture/slider and a popup menu
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
What is the key?
• HTML5 / CSS3• Fluid grid• Fluid images - make images scalable• Media queries
Works best on newer browser. To adapt adesign to older ones like IE 6-7 means itdoubles the time to develop the code.
Fluid grid
Adaptive is multiple fixedwidth layouts
Adaptive ismultiple fixedwidth layouts
Header
Footer
Header
Footer
NavigationNavigation
ContentContent
Sidebar
SidebarOn smaller devices, stack elementsinstead of float wherever necessary
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">
@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) { ... }
You can specify device specific parameters for a group of devices
Simple sample for testingTry this vey simple sample, add thesecode at the end of a css file
body {background-color: grey;
}@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;
}}
FrameworksUse of Frameworks saves timeor your own code gives more flexibility
Our favorite is Bootstrap, goodcommunity, flexible, configurableand updated frequently.
Where you can learn more?
Ethan Marcotte AuthorAmazon.com
Ben Frain, AuthorPacktpub.com
Some good samples herehttp://designmodo.com/twitter-bootstrap-snippets-examples/
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, productconfigurators and customer supportapplications
• Integrating OpenCms – eCommerce –SAP with SSO
• Website www.cgx.ch E-Mail [email protected]
Some samples of our workFibre optic network calculator
eCommerce with CMS, Flash, dataMashup
Web, Intranet, Extranet, Contract-Generator,
Questions?
