Responsive web design (part 1)
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Responsive web design (part 1)



As a web designer i feel the urgency of responsive web designing (RWD) more and more, i have been a web designer since last year whereas the world has already moved far into RWD. so i studied a bit, ...

As a web designer i feel the urgency of responsive web designing (RWD) more and more, i have been a web designer since last year whereas the world has already moved far into RWD. so i studied a bit, tried to design a responsive template and shared the knowledge with my colleagues.. here's the presentation slide which, i hope, wil help others to have an idea over RWD.



Total Views
Views on SlideShare
Embed Views



1 Embed 126 126



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Responsive web design (part 1) Presentation Transcript

  • 1. Responsive Web Design (part 1) MD. ZAFRUL KABIR
  • 2. Overview… ◦ Definition ◦ Background ◦ Ideas ◦ Advantages ◦ Drawbacks ◦ conclusion
  • 3. What Is It? Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling
  • 4. Got The Idea? RWD knows the device you’re using (such as a desktop computer, laptop, mobile or tablet) and automatically repositions the site’s design elements to fit your screen size and maintain the overall look.
  • 5. Why Design A Responsive One? Three Questions ◦ Do I have plans to change my website? ◦ Do I publish a lot of content that’s updated very frequently? ◦ Is my site more focused on delivering information versus complex functionality?
  • 6. Due To These Questions… ---Looking deeper into the new wave of responsive design and what this means to a brand, some questions are being raised: What about Native Apps, do we really need one now? ---What about our dedicated Mobile sites, can I get rid of these now?
  • 7. This Is Because… ◦ ---Native Apps work best when interacting with a user who you want to achieve a certain task. Also, native applications are only necessary when access to local device hardware is required. For example; access to the camera, Skype or for offline use (e.g. saving a subway map for when you don't have wireless access). ◦ ---This is expected to change in the future though; you can already access GPS information through the browser and future level 4 CSS media queries are expected to give access to a device’s “ambient light” readings. ◦ ---Application development can be expensive and with applications being present now on multiple platforms, the app route is costly (but sometimes necessary). Advertising can be hard coded into the app to have in-app advertising in specific locations especially with the free or free to download applications
  • 8. A Few Reasons… Increasing your reach to tablet and mobile audiences ◦ Tablet sales may exceed 100 million this year, 40% traffic from tablet and mobile devices Increase sales and conversion rates ◦ Responsive design removes many old inconsistencies Increase your visibility in search engines ◦ allows you to focus on link outreach, SEO Save time and cost on mobile development ◦ Standardized testing methodologies can now be used, Save time and cost on site management ◦ A single administrative interface can easily be optimized, using layout and workflow tools
  • 9. And More… Statistically… ◦ There are 6.8 billion people in the world – 5.1 billion of them now own a cell phone. ◦ 28% of Internet usage comes from a mobile phone – it is projected to take over desktop usage by 2014 ◦ 50% of all local searches are performed on mobile devices ◦ 62% of companies that designed a website specifically for mobile had increased sales.
  • 10. Remember… When it comes to Ecommerce, Responsive Web Design isn’t the popular choice. It makes more sense to build a site that can be highly customized for mobile phone and tablet users.
  • 11. So, We Are Here… ◦ The mobile world has changed - Brands are only too aware of the cost of mobile applications across multiple platforms – even the ‘create once and publish to many’ application development offerings can be expensive, needlessly expensive. ◦ Brands are realizing that they do not need to have an app when they can build Responsively, which now poses the question of the App. Is it needed anymore? ◦ Independent Software Vendors (ISV’s) offering advertising for web or mobile for PPC, InApp, Banner ads etc need to embrace Responsive Website Design. This would ensure ad images are swapped when screen size is changed
  • 12. On Which Side You Are… When discussing RWD, people are in one of two distinct camps. ◦ ---Supporters proclaim it’s the future of web design — an elegant solution that lets the website do most of the work instead of requiring the creation of additional websites. Many even believe that all sites should obey RWD principles. ◦ ---Opponents aren’t really opponents in the true sense of the word. They emphasize that RWD is a complex solution requiring a careful analysis before implementation. It’s not a panacea for the influx of new web-enabled devices, they believe, and has many important drawbacks to consider.
  • 13. Advantages… ◦ The advantages of Responsive Design are numerous. This technique allows a website to adapt itself to the different screen resolutions available. This technique allows the universal viewing a website using the CSS 3 new rules and properties (Media Queries, micro formats ...), supported by the vast majority of browsers. ◦ Columns and images are automatically adjusted, resized and moved automatically according to the screen resolution. This technique allows optimum ergonomics in preserving the layout and the display of the information from the website. ◦ The Responsive Design is a strategic long-term solution and you don't have to worry bout redirecting users to the appropriate version of your website. Once deployed, there is very little maintenance to perform and the cost of development is more interesting creating a dedicated mobile site. ◦ Tech Business strategy
  • 14. Drawbacks… ◦ If there are many benefits, there are still some drawbacks to Responsive Design. These include a longer loading time. Most of the time, users (browsers) are obliged to download useless a HTML/CSS codes. Similarly, the images are often stretched and not simply resized causing a negative impact on the loading time. ◦ Responsive Design won't allow you to easily adjust the titles, descriptions and other content on mobile phones. In addition, the development of Responsive Design takes more time. ◦ Responsive websites are not much smaller in download size when viewed on smaller devices or screen resolutions when compared to being viewed on a desktop browser jacked into a broadband internet service provider.
  • 15. Conclusion… Responsive design keep you ahead of the trend. The demand for media-rich mobile internet and apps is burgeoning, so several important implications must be addressed - development and maintenance costs, visibility in search engines and better conversion rates. Tablet and Smartphone sales are exploding. Responsive design is key, and content consumption on mobile devices will only continue to increase. Its Better to move on to Responsive Web Designs than costing for native apps
  • 16. References… ◦ ◦ ◦ ◦ design.html?page=all ◦ future-of-mobile-advertising-/ ◦ 77411.html
  • 17. Any Questions???
  • 18. Thank You