How to make it Responsive?

In the dictionary responsive is defined as "Reacting quickly and positively", but for a website it is way more than just a reaction. When you open a website through a mobile device and the layout adapts to your screen resolution and the browsing experience is customized for the mobile environment, the website is using a responsive design. The practice of creating a responsive UI consists of a mix of dynamic grids and layouts, resizable images and a variety of UI elements. In a way, responsive design is the necessary evil for your website, because it can be very time consuming and expensive, but at the end of the day, the users are given a mobile environment they can browse with ease.

 

Let’s say you own an ecommerce website and you want your users to navigate quickly through your catalog. When they open your website from a mobile device they'll have to zoom in and out all the time in search for the product of their liking. They'll be lost in a world of small links, incorrectly sized images or menus. Here enters responsive web design.

 

Below you will find some of the basic, but key tactics and tricks that can help you get started on creating a responsive design and UI.

 

range: [
    '0px    to 760px = mobile.css', 
    '760px  to 980px = 720.css',
    '980px = 960.css'
]

if  ( isMobile.any() ) {
	$('.show').on({
		click:function() { $(‘.hidden’).show(); }
	});
} else {
	$('.show').on({
		mouseenter:function() { $(‘.hidden’).show(); }
	});
}

Make your images resizable by setting their width in percentages. By setting max-width:100%; you will create an image that resizes relatively to its parent container, so when sized down the image will also rescale to fit in the container.

For a safe and agile layout, size your elements with percentages. A fluid element will be best viewed on different devices rather than an element with a static width.

div.full-width-box {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
}

Speed up your effects with hardware accelerated CSS properties. 3D CSS transform are the best way, not the safest though, for modifying your elements. A simple example would be hiding an element of the page when you use an Off Canvas layout. Combine that with a transition and you've got an even smoother experience.

div.hidden-column {
	/* Add a transition */
	transition:all linear 0.3s;
	-webkit-transition:all linear 0.3s;
	-moz-transition:all linear 0.3s;

	/* Hiding the column from the viewport */
	-webkit-transform: translate3d (-320px, 0, 0);
	-moz-transform: translate3d (-320px, 0, 0);
	-ms-transform: translate3d (-320px, 0, 0);
	-o-transform: translate3d (-320px, 0, 0);
	transform: translate3d (-320px, 0, 0);
}
div.hidden-column.visible {
	/* Show the column when a class "visible" is added */
	-webkit-transform: translate3d (10px, 0, 0);
	-moz-transform: translate3d (10px, 0, 0);
	-ms-transform: translate3d (10px, 0, 0);
	-o-transform: translate3d (10px, 0, 0);
	transform: translate3d (10px, 0, 0);
}

Now with jQuery we can add a class to that element when a control button is pressed.

$('.control-button').on({
	click:function(){
		$('.hidden-column').toggleClass('visible');
	}
});

The above will cover only a handful of things you can achieve using fluid layouts, adapt.js and awesome CSS3 properties. Do not be afraid to exploit external resources or use already built layouts or grids. Some of the best articles and website that can help you get your foot through the door.

 

I hope we covered some of the basics for you, now go and put these advice to the test.