Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, — and all screen resolutions must be compatible, too. As time goes on, responsive web design is rapidly entering the realm of standard practice. In this presentation we look at several tips to help with your responsive design process and make it more efficient.

1. 6 Basic Things To Consider In Responsive
Web Design

2. INTRODUCTION
Responsive web design allows a site’s layout to change as the
screen size being used to view that site changes.

4. Importance of Responsive Web Design
Multi screen problem has been solved with mobile friendly web
design
Responsive web design has given permanent solution to the
screen size issue as there is no fixed page size and other physical
constraints to deal with.
There are certain points that should be considered before going
for a responsive web design.

5. 1. Flow
With the screen getting smaller, content takes up more vertical
space and it will be pushed down if it goes below a certain
point.
Managing the flow of content is not as easy as it appears.
If you are used to designing with pixels and points, it might
appear tricky but gradually you will find it easy once you get
used to it.

6. 2. Relative Units
Since the users will be opening your website on many screen, be
it desktop, mobile or tablet, the pixel density has to be managed
accordingly.
The units chosen should work seamlessly on every device.
Its pixel density should be flexible to adjust itself according to
the device on which it is opened.
Relative units like percent means it will take that much space of
the screen size.

7. 3. Breakpoints
It allows the layout to change itself according to the predefined
points.
The desktop has 3 columns and mobile has 1 column.
There is an option to change most of the CSS properties from
one breakpoint to the other.
It should be used in the paragraphs where a sentence breaks.
Use it judiciously as it might lead to confusion not stating clearly
what is influencing what.

9. 4. Width
Managing the size of the screen which will be taken by content
is important.
You need to control the maximum and minimum value of width
which will be displayed on the screen.
If you will set the maximum width at 1000px, it means content
can fill the screen but cannot go beyond it.

10. 5. Elements
The relative position of the elements on your page is very
Crucial.
It would not be easy to handle more elements if they are not
kept in a proper format.
Static units like pixels can help you in wrapping these elements
in an organized manner to make it more clean and tidy.
These elements are useful for content which you do not want to
scale like buttons and logos.

11. 6. Mobile or Desktop
There are some benefits which you will enjoy if you will start
with mobile first.
It adds more limitations, allowing you to take better decisions.
The best way is to start for both at one go to analyze and
understand what works better for you.

12. Our Services
•Responsive Web Design
•Mobile Application Development
•Search Engine Optimization
•Website Development
•Website Designing
•Web Hosting

13. About Us
Smartinfosys.net is a leading website development and
corporate branding company that has been on the scene since
2001.
Our tagline "Empowering People and Business" well expresses
our mission of providing highly functional & affordable websites
& PHP based web applications to empower personal and
business processes.

14. Address : 401, Meridian Tower, Nr.
Apple Hospital, UdhnaDarwaja, Surat,
Gujarat (INDIA) - 395002
Phone: +91 261 2347223
Website: www.smartinfosys.net