Design is must for all sites, whatever the functionality is done that should be secondary. The designing is the first part of the site, which can impress our customers very easily

The future of web design is here, one code plus one url for several devices and easily bridging content. Companies today prefer to be found over search engines. right from tablet to desktop, Smartphone to eBooks, you need a viable web presence for you. 

Background Images:

Background images must be scalable and it should be taken care of which you are about to make web design, Make sue of the jquery plug-ins that can easily scale the background images that can fit when with the desired resolution of the devices in which the website will be viewed by the users.

Loading Time:

Designers are recommended to examine the load speed every time design a site.

We are told to avoid using images that are too large and might prevent the site from loading quick.

So when it comes to responsive design we repeat the same rules all over again. But with responsive designs it is not possible to say that we can expect enhanced loading speeds.

Minimize the usage of these non-optimized images, remember your goal is to make your site as responsive as possible. Limit the content:

Most important point to be noted. Your customers are more active over smartphones and laptops.

So, when you are crafting content for mobile devices, keep these users in mind.

They do not have time to read all that contents you are doing and when we transit from desktop to mobiles, follow the golden rule of minimization.

The idea is to display only the necessary information to your users and nothing more.

Grids keep Your content Organized:

One of the chief users for grid is to keep your elements aligned and ordered, and your page design clean and neat.

This is because grids encourage alignment, that’s a big part of their job description actually. By establishing a grid system, you are creating a set
structure for yourself to align elements against, and in doing this, you can create for yourself a neat, clean, and organized layout.

Padding v/s margins:

Responsive designs and mobile devices are two critical. It is better to replace margins padding.

The reason is that padding helps to increase the tappable area whereas margins do not help.

Margin do is increasing the white space area around the buttons.

Another simple tip is to use buttons that are bigger in size.

Media Query:

The @media rule, introduced in css2, made it possible to define different style rules for different media types.


You could have one set of style rules for computer screens, one for printers, one of handheld devices, one for television-type devices.

Media queries in css3 extended the css2 media types idea: instead of looking for a type of device, they look at the capability of the device.

Media query can be used to check many things, such as:

  1. width and height of the viewport
  2. width and height of the devise
  3. orientation
  4. resolution


Media Query for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a general screen size range, then distinguishing between retina and non-retina screens.

Example for retina screens:
@media screen

and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio:2)
and (min-resolution: 192dpi) {

Example for non-retina screens:
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio:1){

Leave a Reply

Your email address will not be published.