The document discusses responsive web design basics including fluid grids that resize based on screen size, flexible images that scale appropriately, and media queries that serve different stylesheets based on device. It emphasizes building a single responsive design using CSS for all devices rather than separate fixed-width layouts. Benefits include a shorter development cycle, better indexing by search engines like Google which prefer a single responsive design, and a better user experience across devices.

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

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

4. Flexible Images
 Images on the web
page must be sized in
flexible units.
 So they do not go
outside of the
dedicated viewing
area
 Image’s
dimensions
are flexible,
so they can
be resized
properly.

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

6. 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)

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

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

9. Internet Users
2016
2009
Desktop Users Mobile Users
2016
2009
90%
62%

10. Benefits
 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

11. Benefits
 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.

12. Connect with us
Check out our portfolio on responsive web design &
development.
Contact us, if you have any query for app development here
: sales@aditmicrosys.com.au
Twitter : twitter.com/aditmicrosysau
Facebook : facebook.com/Adit-Microsys-887908624668076/
LinkedIn : linkedin.com/in/aditmicrosys-australia
Google+ : plus.google.com/+AditmicrosysAu