Responsive Web DesignYour Website is “Alive”.
The Facts & FiguresYour website doesn’t just sit on a desktop anymore. OK. So you knew that one!                          ...
Are You Future Ready?A website that responds to the device that accesses it and delivers the appropriateoutput for it uses...
Beautiful Designs that “Respond”                       With responsive web design,                       whether your webs...
How Does this Technology Handle Images?Images in responsive web designs are called context-aware.This particular technique...
So How Does It All Work?             To get started with building a             responsive site, having a strong toolkit  ...
The Technical Jargon       What on earth is “Fluid Grid Layout”?       Latest web design software introduces features for ...
Responsive Web Design – Wireframe ExamplesSeparate wireframes need to be developed for each screen size. A few examplesare...
RWD – The Real AdvantagesAs a site owner you can publish your content once and have it delivered to alldevices without the...
Top Problems & How to Avoid ThemWell, yeah, there’s always a flip side to everything, however, there’s always a solutionto...
Examples of Responsive Web Design in Action                            Sasquatch! Music Festival                          ...
The Way Ahead for RWDJumping on the responsive Web design wagon isn’t something to take lightly. Takeinto account what you...
</two55am>a digital agency                   Authored by                   Pankaj Umrania | Founder & Director            ...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,367 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,367
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web DesignYour Website is “Alive”.
  2. 2. The Facts & FiguresYour 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 whenconnecting to the internet. With these statistics and the speed of technologydevelopments, it becomes vital to make sure your website is dynamic and canadapt its design to be user friendly on every type and size of device.
  3. 3. Are You Future Ready?A website that responds to the device that accesses it and delivers the appropriateoutput 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 onvaried devices.From mobile browsers to netbooks, laptops, desktops, smartphones and tablets, usersare visiting your sites from an increasing array of devices and browsers. Are yourdesigns future ready? Are they “Responsive”?
  4. 4. 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.
  5. 5. 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 largerscreens to smaller ones. The scaled images appear to change fluidly with the help ofupdated developer tools and coding languages, allowing designs to look sharp inevery context. Context Aware resizes an image, yet keeps the important elements intact without cropping the original image Let’s have a look at this video* which excellently explains “Content AwareImage Resizing” applied to Real World examples:http://www.youtube.com/watch?v=c-SSu3tJ3ns * Video Courtesy: Dr. Ariel Shamir
  6. 6. 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
  7. 7. 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. “Media Queries” sounds pretty cool.How the heck do “ResponsiveImages” work? A media query consists of a media type such as an image andAdaptive Images detects your visitors instructions for rendering that media.screen size and automatically The most commonly used mediacreates, caches, and delivers device feature is width. By restricting rules toappropriate re-scaled versions of your a certain width of the deviceweb pages embedded HTML images. displaying a web page, one canNo changes needed. It is intended for tailor the pages representation touse with Responsive Designs and to devices (i.e. smartphones, laptops,be combined with Fluid Image desktops, netbooks etc.) with varyingtechniques. screen resolutions.
  8. 8. Responsive Web Design – Wireframe ExamplesSeparate wireframes need to be developed for each screen size. A few examplesare below to help you understand the concept. However, in simple terms, a fullyresponsive website will have multiple page designs and templates that will adapt andwork on every type of device, regardless of the size, brand or model. This really doesalso future proof your website for a good many year so is a worthwhile investment atthis stage.
  9. 9. RWD – The Real AdvantagesAs a site owner you can publish your content once and have it delivered to alldevices without the need to develop different versions for different contexts. This inturns saves time, money and maintenance. Save Time Save Money Save on Maintenance
  10. 10. Top Problems & How to Avoid ThemWell, yeah, there’s always a flip side to everything, however, there’s always a solutiontoo. Explaining RWD to Navigation Clients In the past, navigation used to The “old” designing system was be horizontal along the top or very linear, and clients could sometimes down the left of a easily see what they were page. It now needs a more getting. The key here is to considered approach. The demonstrate the power of RWD solution: Use good, consistent to clients design. Converting Fixed-Width Testing Time & Cost Sites How to test & which devices to A huge question is how to test with is a big questions. The convert the code for an existing solution is to share devices fixed width website. The best between agencies / testers, solution here is to go for a though this is still not widely complete rebuild of your site. Its practiced. well worth the efforts.
  11. 11. Examples of Responsive Web Design in Action Sasquatch! Music Festival www.sasquatchfestival.com The Boston Globewww.bostonglobe.com
  12. 12. The Way Ahead for RWDJumping on the responsive Web design wagon isn’t something to take lightly. Takeinto account what you need to achieve, and consider whether catering to aspecific version of a desktop or mobile device makes the most sense.Responsive Web Design is in its early stages. HTML and CSS standards are stillevolving but it’s clear that some form of responsive Web design will be used tomeet the challenges, and it’s equally clear that standards will continue to evolveas better ways of handling the changing world of devices and browsers arediscovered.Hopefully this slide helped, but if you’re still feeling confused about responsivedesign, don’t be afraid to leave a question or comment. If you’re already utilizingresponsive web design in your site or web application, share the link with us so wecan see!
  13. 13. </two55am>a digital agency Authored by Pankaj Umrania | Founder & Director +91.98182 23471 pankaj@two55am.com in.linkedin.com/in/pankajumrania www.two55am.com | info@two55am.com

×