responsive web design : key tips & approaches

14
6 Basic Things To Consider In Responsive Web Design

Upload: webconnect-pvt-ltd

Post on 08-Feb-2017

15 views

Category:

Services


0 download

TRANSCRIPT

Page 1: Responsive Web Design : Key Tips & Approaches

6 Basic Things To Consider In Responsive Web Design

Page 2: Responsive Web Design : Key Tips & Approaches

INTRODUCTION

Responsive web design allows a site’s layout to change as the

screen size being used to view that site changes.

Page 3: Responsive Web Design : Key Tips & Approaches
Page 4: Responsive Web Design : Key Tips & Approaches

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.

Page 5: Responsive Web Design : Key Tips & Approaches

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.

Page 6: Responsive Web Design : Key Tips & Approaches

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.

Page 7: Responsive Web Design : Key Tips & Approaches

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.

Page 8: Responsive Web Design : Key Tips & Approaches
Page 9: Responsive Web Design : Key Tips & Approaches

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.

Page 10: Responsive Web Design : Key Tips & Approaches

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.

Page 11: Responsive Web Design : Key Tips & Approaches

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.

Page 12: Responsive Web Design : Key Tips & Approaches

Our Services

•Responsive Web Design•Mobile Application Development•Search Engine Optimization•Website Development•Website Designing•Web Hosting

Page 13: Responsive Web Design : Key Tips & Approaches

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.

Page 14: Responsive Web Design : Key Tips & Approaches

Address : 401, Meridian Tower, Nr. Apple Hospital, UdhnaDarwaja, Surat,

Gujarat (INDIA) - 395002

Phone: +91 261 2347223Website: www.smartinfosys.net