Simple steps to design stunning responsive webpages.

Pravin Kumar
Sep 3, 2018 · 4 min read

In 2018 Web Development is made easier and creating a webpage is not a messy task. But website compatible for both web and mobile users is what we need.

Ref: https://www.stonetemple.com/mobile-vs-desktop-usage-study/

Due to the rapid increase in mobile technology, many users visit the website on mobile. Hence making a website as compatible on both Desktop and Mobile became an important aspect in Web Development.

Responsive Design:

Responsive design is making a website looking good at all devices by automatically resize, hide, shrink or enlarge according to device width and height. Mobile First Design is a design pattern which is highly recommended to design a web view for mobile and then for desktop.

29% of mobile users will immediately switch to another site or app if it doesn’t satisfy their needs.

Step: 1 — Using the Viewport meta tag

The viewport is the area where the browser renders the site. The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page according to the width of the mobile device. Add below line to set the viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Step: 2 — Responsive Icon & images

Source: http://responsivelogos.co.uk/

Use Full icon on Desktop view
Reduce design in Tablet
Use minimalist logo in Mobile view.

Do not use more image to decorate your mobile site. Use minimal icons and less text.

Responsive images are images that scale nicely to fit any browser size.

img { max-width: 100%; }

Use different image for different devices metrics. Show the main context of image when needed.

The srcset attribute enhances the behavior of theimg element, making it easy to provide multiple image files for different device characteristics. Image rendering time can also be decreased by using srcset You attribute.

You can use the <picture> element when an image source exists in multiple densities, or when a responsive design dictates a somewhat different image on some types of screens.

<picture>
<source media="(min-width: 768px)" srcset="image.png, image-2x.png 2x">
<source media="(min-width: 425px)" srcset="image-small.png, image-small-2x.png 2x">
<img src="image-fb.png" srcset="head-fb-2x.png 2x" >
</picture>

If the device width is at least 768px (Tablet or Desktop) then either image.jpg or image-2x.jpg is used, depending on the device resolution. If device resolution is high then image-2x.jpg is used.

Step: 3 — Responsive Navigation bar

For mobile site Use Hamburger menu icon to display navigation. Use minimal logo as mentioned in responsive logo and design.You can use either dropdown or Slide out (like apps) menu for navigation. If you need search bar just add at top of navbar is best practice

Step: 4 — Using Responsive Layout

With fluid layout you specify sizes not in pixels (950px), but in percentages(100%). Hence when the screen size is changed, the proportion of elements will stay the same. But using percentages at all time makes irrelevant. Either your page shrinks or expands too long. The solution is to use breakpoints. Media queries will allow you to define completely different styles for different browser sizes.

.left{width:20%;}
.main{width:20%;}
@media screen and (max-width: 600px) {
.left, .main{
width: 100%;
}
}

By using media queries you can customize your layout accordingly. You can also use min-width and max-width wherever you need. Also you can use viewport units like vw, vh, vmin or vmax. This is your screen minus the reserved space of the browser chrome. By using this you can sometime skip media queries.

At last to make everything simpler you can use front-end component libraries such as Bootstrap , Materialize CSS etc.

Written by pravindia from Smazee.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade