responsive website designer | yourdesignpick.com
TRANSCRIPT
6 Basic Things To Consider In Responsive Web Design
Since website visitors have started visiting website through various devices, responsive web design
has gained importance like never before. 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.
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. It takes a
while to grasp the idea completely. 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.
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.
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.
Responsive Website Developer
6 Basic Things To Consider In Responsive Web Design
4. Width
Managing the size of the screen which will be taken by content is important. Though it is good for
content to take the whole screen of mobile, same cannot be said for desktop. 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.
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.
6. Mobile or Desktop
Even though there is not much of a difference whether you start your project on a smaller screen or
a bigger screen, 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.
Responsive Website Developer