Responsive web design
1 / 12

Responsive Web Design Has Become One Of The Hottest Trend - PowerPoint PPT Presentation

  • Uploaded on

The purpose of responsive web design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Responsive Web Design Has Become One Of The Hottest Trend' - SapanAdit

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Responsive web design

Responsive Web Design

The Present Of The Web is…

Basic parts in design
Basic Parts In Design

  • Fluid Grids : In this grid, each and every unit resize itself according to screen size.

  • Flexible Images : No need to give specific width. It will scale & move with the flexible grid.

  • CSS Media Queries : It serves stylesheets based on browser window’s size, color, & orientation.

  • Screen resolution : Maintain landscape & portrait widths of different devices.

Fluid grids
Fluid Grids

  • It allow the elements of the layout to resize based on the size of the user’s screen.

  • All elements are designed in terms of proportion instead of traditional layout.

  • All information fits well onto the screen.

Flexible images
Flexible Images

  • Image’s dimensions are flexible, so they can be resized properly.

  • Images on the web page must be sized in flexible units.

  • So they do not go outside of the dedicated viewing area

Media queries
Media Queries

  • Media queries are the coding part of the website which enable the web designer to create the visual look.

  • CSS used to separate the content on a webpage from it actual view in the form of layout, color & fonts.


Do you know this
Do You Know This ?

  • Adaptive Design : It has multiple but fixed width layouts.

  • Responsive Web Design : It has multiple, but fluid grid layout (as said in previous slide)

Google recommendation
Google Recommendation

  • As we all know Google is the largest and most usable search engine world wide.

  • So if you want to rank your website on Google SE, then you must follow the webmasters recommendations.

  • They prefer same HTML for all devices and use CSS media queries to render webpage on device.

Consumer s preference
Consumer’s Preference

  • 75% consumer’s prefer to use mobile friendly website.

  • 25% may not use smart phone or may not much aware with this technology upgrade.

Internet users
Internet Users







Desktop Users

Mobile Users


  • One website is required for all different size devices

  • The overall development cycle is shorter than previous

  • Google prefer this structure to index webpages for its search engine

  • It gives choice to the viewers for device used to access website


  • Users like look and aesthetics of a responsive site.

  • Website content loads quickly as there are not hundreds of pages of content.

  • It is easier for Google to crawl and index one URL for every device, rather than two different URLs.

Connect with us
Connect with us

Check out our portfolio on responsive web design & development.

Contact us, if you have any query for app development here : [email protected]

Twitter :

Facebook :

LinkedIn :

Google+ :