Click me
Transcribed

Responsive Web Design - What it is and why should I care?

WHAT IS RESPONSIVE DESIGN 1 Responsive websites respond to their environment. Responsive web design (RWD) is a web design technique that insists that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. CSS Dw HTTP One URL Single Content One Code CSS3 Multiple Devices A Responsive Website serves the exact same page to every visitor but the design and layout of that page responds to the size of the visitor's screen size. Every piece of content on a responsive site adapts to how it is being viewed be it a desktop PC, a mobile phone or even a TV. Desktops Laptops Tablets Smartphones All types of output devices are considered during design process. The design uses multiple fixed width layouts (Adaptive) or multiple fluid grid layouts (Responsive). Fixed width is for large and medium and fluid width is for smaller devices. WHY DO YOU NEED THIS? 2 The number of devices, platforms and browsers that need to work with your website is growing in an exponential rate. New devices with varying screen resolutions are cropping up regularly. It is essential to have a website designed in a way that adapts itself to multiple screen sizes for devices available today and what may be coming up in future. RWD represents a fundamental shift in how we build websites for the decades to come. A website with responsive web design, looks good on smart phone, tablet, e-reader, desktop any other kind of possible device that may come in near future. 2015 1.6 Billion 2015 1.9 BILLION 1.4 Billion 2009 900 2009 MILLION Mobile Desktop Internet Users* Internet users* Mobile Computing Growth Drivers Over Time, 1960 - 2020E 1,000,000 Internet Smartphone 100,000 Desktop Tablet 6 10.000 Internet MP3 Cell phone PDA Internet Users Worldwide 1000 Car Electronios GPS. ABS, AN Increasing Integration Units??? 100 Mobile 1B+ Units/ Users Minicomputer Video 100MM+ 10 Units Entertainment Mainframe 10MM+ Units Wireless Home Appliances 1MM+ Units 1960 1970 1980 2000 2010 2020 2013 Mobile devices overtook desktop PCs as dominant global Internet platform KEY FEATURES OF RESPONSIVE DESIGN 4 HOW DOES IT WORK/RESPONSIVE PROCESS Moble site iPad Apps Website 768 x 1024 1680 x 1050 1024 x 768 480 320 x 480 320 Smart Phones Tablets Netbooks Desk tops >> Different devices have different screen resolutions, so these different widths should be considered in the responsive design process. Common resolutions can be sorted in 6 major breakpoints, design process works with these. BEST PRACTICE 5 Keep Optimizing. Check Start small Enter Make it Сontent { Mobile first } Browser Modular Responsive design FRAMEWORKS FOR RESPONSIVE DESIGN 6 Bootstrap from twitter Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tablets, grids, navigation and more. Skeleton Minimal responsive framework includes wordpress theme Skeleton is a WordPress theme aimed at helping you build simple, uncluttered, useable, and mobile-friendly WordPress sites. Skeleton is simple, lightweight and easy to work with for WordPress designers and developers. Foundation Flexible 6 & 12 grid framework Foundation, is an advanced, lightweight, responsive, front-end framework. Based on a flexible, 12-column grid that can scale to an arbitrary size (defined by the max width of the row) that's easily nested. This means you can build complicated layouts without creating a lot of custom elements. source: http://www.quantumcloud.com SAVES MONEY SAVES TIME 7. KEY BENEFITS OF RESPONSIVE DESIGN WIDER BROWSER SUPPORT IMPROVED SEO BETTER PERFORMANCE O UANTUMCTD IJ D source: http:// www.quantumcloud.com

Responsive Web Design - What it is and why should I care?

shared by quantumcloud on Jun 18
591 views
3 shares
0 comments
A recent study estimates that about 119 billion USD will be spent via mobile eCommerce by year 2015. If your business website is not ready for this mobile device revolution using Responsive Web Desig...

Publisher

QuantumCloud

Category

Technology
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size