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.

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.

16. 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

17. References…
◦ http://chinwag.com/blogs/angus-phillipson/7-business-advantages-responsive-web-design
◦ http://sixrevisions.com/mobile/responsive-web-design-not-the-future/
◦ http://en.kioskea.net/faq/27393-the-responsive-design-advantages-disadvantages-seo
◦ http://www.bizjournals.com/denver/blog/broadway_17th/2013/06/strategies-is-responsive-web-
design.html?page=all
◦ http://www.ektron.com/Blogs/Adrian-Lloyd/Responsive-Web-Design-or-Native-Apps---What-s-the-real-
future-of-mobile-advertising-/
◦ http://www.noupe.com/design/create-the-future-common-techniques-in-responsive-web-design-
77411.html

18. Any Questions???

19. Thank You