Embed Size (px)
DESCRIPTION
Beautiful Designs that “Respond” With responsive web design, whether your website is viewed on a mobile phone, tablet, laptop, smartphone or desktop computer, your site will adapt effortlessly to ensure a beautiful experience for your users, by cascading information seamlessly across devices. As a site owner you can publish your content once and have it delivered to all devices without the need to develop different versions for different contexts. This in turns saves time, money and maintenance.
Citation preview
Responsive Web Design Your Website is “Alive”.
The Facts & Figures
Your website doesn’t just sit on a desktop anymore. OK. So you knew that one!
Most websites have 10% to 20% of their visit arising from a smartphone or tablets already.
IDC estimates that by 2015, access via mobile devices will surpass PC usage when connecting to the internet. With these statistics and the speed of technology developments, it becomes vital to make sure your website is dynamic and can adapt its design to be user friendly on every type and size of device.
Are You Future Ready?
From mobile browsers to netbooks, laptops, desktops, smartphones and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs future ready? Are they “Responsive”?
A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.
Beautiful Designs that “Respond”
With responsive web design, whether your website is viewed on a mobile phone, tablet, laptop, smartphone or desktop computer, your site will adapt effortlessly to ensure a beautiful experience for your users, by cascading information seamlessly across devices.
The need to scroll on the screen or the common issue of images getting “cut off” is completely eliminated.
How Does this Technology Handle Images?Images in responsive web designs are called context-aware. This particular technique serves images at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context.
Let’s have a look at this video* which excellently explains “Content Aware Image Resizing” applied to Real World examples:
http://www.youtube.com/watch?v=c-SSu3tJ3ns
Context Aware resizes an image, yet keeps the important elements intact without cropping the original image
* Video Courtesy: Dr. Ariel Shamir
So How Does It All Work?
To get started with building a responsive site, having a strong toolkit can make a world of difference. One needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries
The Technical Jargon
What on earth is “Fluid Grid Layout”?
Latest web design software introduces features for designing adaptive websites. These feature helps you create flexible, fluid grid layouts for pages using a column grid. You design the layouts visually, and web designing software generates the source code for the layouts using CSS3 and HTML5 technology.
How the heck do “Responsive Images” work?
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embedded HTML images. No changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
“Media Queries” sounds pretty cool.
A media query consists of a media type such as an image and instructions for rendering that media. The most commonly used media feature is width. By restricting rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices (i.e. smartphones, laptops, desktops, netbooks etc.) with varying screen resolutions.
Responsive Web Design – Wireframe Examples
Separate wireframes need to be developed for each screen size. A few examples are below to help you understand the concept. However, in simple terms, a fully responsive website will have multiple page designs and templates that will adapt and work on every type of device, regardless of the size, brand or model. This really does also future proof your website for a good many year so is a worthwhile investment at this stage.
RWD – The Real Advantages
As a site owner you can publish your content once and have it delivered to all devices without the need to develop different versions for different contexts. This in turns saves time, money and maintenance.
Save Time
Save Money
Save on Maintenance
Top Problems & How to Avoid Them
Well, yeah, there’s always a flip side to everything, however, there’s always a solution too.
Explaining RWD to Clients
The “old” designing system was very linear, and clients could easily see what they were getting. The key here is to demonstrate the power of RWD to clients
Navigation
In the past, navigation used to be horizontal along the top or sometimes down the left of a page. It now needs a more considered approach. The solution: Use good, consistent design.
Converting Fixed-Width Sites
A huge question is how to convert the code for an existing fixed width website. The best solution here is to go for a complete rebuild of your site. Its well worth the efforts.
Testing Time & Cost
How to test & which devices to test with is a big questions. The solution is to share devices between agencies / testers, though this is still not widely practiced.
Examples of Responsive Web Design in Action
Sasquatch! Music Festival
www.sasquatchfestival.com
The Boston Globewww.bostonglobe.com
The Way Ahead for RWD
Jumping on the responsive Web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.
Responsive Web Design is in its early stages. HTML and CSS standards are still evolving but it’s clear that some form of responsive Web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.
Hopefully this slide helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link with us so we can see!
</two55am>a digital agency
www.two55am.com | [email protected]
Authored by
Pankaj Umrania | Founder & Director+91.98182 23471
[email protected] in.linkedin.com/in/pankajumrania
