Responsive Web Design - For the Multi-Screen World
-
Upload
alley-jones -
Category
Design
-
view
108 -
download
4
description
Transcript of Responsive Web Design - For the Multi-Screen World
![Page 1: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/1.jpg)
Responsive Web Design For the Multi-
Screen World
![Page 2: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/2.jpg)
• The rise in mobile web usage has brought the Responsive Website Design phenomenon into limelight.
• This presentation explains what responsive web design is all about and uses statistics to support the idea that it is a better alternative to dedicated mobile websites.
• It also highlights the need to move towards a Responsive Web Design to prepare your business for future.
Call: 1300 760 363
![Page 3: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/3.jpg)
What is this?• When a website adjusts itself according to the
device it is being viewed on and fits to the screen, it is said to based on responsive web design (RWD).
• There are three major principles of RWD
1. CSS3 Media Queries
2. Fluid Grid Concepts
3. Flexible Images
Call: 1300 760 363
![Page 4: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/4.jpg)
Why you need it?
Because Tim Berners-Lee (Director of the World Wide Web Consortium) says so –
“The web should be accessible from any kind of hardware than can connect to the internet – stationary or mobile, small screen or large.”
Call: 1300 760 363
![Page 5: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/5.jpg)
Because these statistics say so
2007
2008
2009
2010
2011
2012
2013
2014
2015
0
500
1000
1500
2000
2500
Mobile Internet Users
Desktop Internet Users
Call: 1300 760 363
Internet Usage – Mobile vs. DesktopsGlobal Mobile vs. Desktop Internet Users Projection, 2007 - 2015
This graph indicates that ensuring a good mobile web experience becomes almost mandatory
![Page 6: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/6.jpg)
Percentage of Mobile versus <<PC>> Web traffic, by location
Call: 1300 760 363
Africa Asia Europe N. America
Oceania S. America
World02468
101214161820
20102012
Within 2 years, there has been remarkable increase in mobile web traffic across the globe .
![Page 7: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/7.jpg)
Email Opening Ratio
PCMobile
Call: 1300 760 363
Sales
iPadiPhoneAndroid Phone
These figures are bound to spiral in 2013
![Page 8: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/8.jpg)
Because it has these benefits as well
Call: 1300 760 363
Google recommends itYou get an SEO advantages!
No need to separateMobile versionCost and Time saved!
Site maintains aConsistent look across
all platforms Superior UX!
![Page 9: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/9.jpg)
How does it work?
Call: 1300 760 363
![Page 10: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/10.jpg)
Call: 1300 760 363
Use Media Queries
• Easy to use• Optimum utilisation of space• Cross-browser compatibility
Keep your layout flexible
Use grid system like these:• 960 Grid System • Gridset• Golden GS
Add Fluidity
• Adaptive resizing for images • Use breakpoints
Responsive Web Design for those who want one-size-fit all website
![Page 11: Responsive Web Design - For the Multi-Screen World](https://reader036.fdocuments.net/reader036/viewer/2022082805/54c7bdbc4a7959dc418b45a8/html5/thumbnails/11.jpg)
Contact UsWebsite: http://awebsitedesigner.com.au/
Phone No.: 1300 760 363Twitter: http://twitter.com/tanuj_rastogi
Facebookhttp://www.facebook.com/pages/A-Website-
Designer/675016145842611