How to Create Responsive Website – Online Training

More people are using their smartphones, tablets and other devices to browse the internet, search for something, read and navigate that’s why it has become increasingly important to create a website that works across multiple platforms.  It is important that they can easily read your content and interact with it.

Going responsive is the most effective way to make the most of mobile and tablet traffic, and to offer visitors the best possible user experience.

You might ask yourself, how to build websites suitable for all users? Is there any responsive web trick that I need to know? Anyway, HTML Guys provides online training/video tutorial for responsive websites. You may check the video below and its transcription.

If you need help converting your site into responsive web and ensure that your site looks perfect when viewed on mobile devices, we would be very happy to assist you with that so don’t hesitate to contact us!

 

Video Transcription

Hi this is Mac of HTML Guys and in this illustration I’m going to show you how to create responsive website. But first let see if we were able to meet the following list we provided in the previous video

I mentioned before that in order for us to create responsive web, we need to set the viewport of our website. In this demonstration we are going to use the viewport that is provided by HTML5 boilerplate. Now, for the media queries, it’s very important that you know the basic about media queries because without it you won’t be able to create responsive web and finally we should know what are the breakpoints of your website.

Now, here we are going to use devices that have a maximum width of 1024, 768, 480, and 320.

responsive web topic list_1

Now once everything is already set we can start with converting the website into a responsive website. Now, I have here a sample website that I just created using a 960 Grid and as you can see this one is using a fluid grid system.

960Grid_2

So if I will resize this it will just adjust base on the size of my browser. Now what I want to do is to change the layout of these grids once I changed the size of the screen particularly if this one is viewed on mobile devices and tablet.

As I mention, we’re just going to use the 960 grid system and as you can see this is my source code,

reponsiveweb_code_3

so we are just using the grids of 960 GS and of course I just created some tweaks particularly with the use of container underscore 12 I just replace it with the class row. Now for the other details I just added the outline, margin on top and bottom and the background for each grid.

I just added some text fillers particularly this paragraphs. Ok so let’s proceed.  Now I’m just going to open this one and add some media queries. Now the one that is provided by boilerplate will not cover for all breakpoints that we have listed. So what we are going to do is to set the media queries.

I have here the media queries that I prepared so we have here 1024 max-width, 768, 480 and 320.

max-width_5

Now this is the media queries that we will use in order for us to create responsive web. So we can be more specific with media queries particularly if you want to target specific devices. So just to give you a brief background about media queries.

Media Queries – it is an extension of media dependent style sheets tailored for different media types. For example screen and print found in CSS2. In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. 

The most commonly used media feature is width particularly this one. As you can see this one will test the maximum width of your screen.

Here are some of the lists that you can use for your media queries that I’ve told you can be more specific particularly if you’re going to target a small devices such as iPod, iPhone and other smartphones for portrait and landscape.

portrait-landscape_6

We had here, you can use this media queries and then for iPod you can use this two. You can actually set the orientation if it’s going to be landscape or for portrait. Then for this one, this is for iPhone and instead of using the device width this one is targeting the device pixel ratio.

Now, if you want to see more you can go to http://stephen.io/mediaqueries/ and check for other media queries for specific Apple devices. We have here iPad and this is the media query that we can use.

For iPad portrait this one and for iPad3, this one includes the pixel ratio because of the retina support in iPad 3 & 4.

So there are more websites that you can visit particularly CSS tricks. You can also visit smashing magazine and net tuts if you want to learn more about breakpoints and media queries. But for now we are going to stick with what I have prepared here which are the following: 1024, 768, 480, and 320. Now in order for us to identify each breakpoint, we are going to create a different background for each.

background colour_10

So for this one I’ll be use red for the background color. For this one, I’m going to use orange, for this one I’ll be use yellow and for this one I’ll use green. Then for the viewport we are just going to use the one that is provided by boilerplate which is this one.

viewport_11

Now, let’s save this and include the media query that we just created which is media.css.  Just save this and refresh. This is the normal view of the demonstration that I just created and if I will resize the browser, this one should change the background color accordingly.

So for the devices that have a maximum width of 1024, the background color will be red and for the devices that have a max width of 768 the background color will be orange and then yellow for 480, and green for (oops.. it’s no longer allowing me to resize the handle or less than 480 but anyway we’ll try that later). As you can see the background color changes as I resize the browser. Now let me change the width of each grid depending on the screen size. Now for grid 1, what I want to do next is to combine two grids if it reaches 1024, so in 1024 the width will change from.. let’s see.. so from 6.333% we’re going to change this to 14.66%. So all grid 1 will be 14.667% in width. So let me just save this and resize, so as you can see grid 1 becomes similar to the size of grid 2.

Now what I want to do next is to convert grid 1 and grid 2 to look like grid 3. So to do that I will change 14.667% to 23%, so let me just go back here on .row.grid_1 and 2 should have a width of 23%.

Let me save this and refresh. So as you can see grid and grid 2 here will change its size to look like grid 3 just like here.

Now next is to change the size of all, to say for example when it reaches 480, all grids will be equivalent to grid 6 which is 48%. So we’ll put here .row div, so this particular line will select all div that has a class that starts with grid. So it could be grid_1, grid_2 or grid_6. So here those grids will become 48%, so let me just save this and refresh. So when it reaches 480 it should change its size, so all of the grid should be 48% just like here.

So let’s see how this one will look on an iPhone screen so this one is an emulator. So as you can see this one is still in 480 viewport, so as you can see the grids are converted into 48% for its width.  Let me change this to 320 and as you can see the background changes from yellow to green. Now what I want to do is when it reaches the width 320 the width will become similar to grid 12 which is 98%. So let me copy this and paste it right here and change this from 48 to 98%. Let me save this and refresh this one. And as you can see all of the grids where now, all of the grids now have 98% for its width and if I change it to 480 it will become 48%.

And if I change it to 768 it will look like this and for 1024 it will look like this. So there, let me just resize this. This one is for normal view

iphone normal view_23

then if I change this to 1024 it will look like this,

iphone red_1024_24

then 768 look like this

iphone orange_768_25

and for 480                                                                                                                    

iphone yellow_480_26

and finally for 320.

 

iphone green_320_27

So that’s it very easy, now that let’s try to add some images and videos in our layout and see what will happen next. So let’s add any image from our directory. So we’ll try to put this particular image so this one looks like this. So it’s very large and supposedly this one will not fit within our grids but let’s see if we can fix that one. So let’s open the index.php and let’s put it inside these grids. So save this and let’s refresh it. So normally these images will be displayed with its original size and because of that most of the portion of the image will go outside the grid. Now we don’t want that to happen because we’d like in as much as possible make all media objects as flexible as possible so we are going to create another rule for those particular images. So let’s add some more here. So all images that is displayed on the screen and has a minimum width, this time we will be use minimum, a minimum width of 1023 or say 25 will display all images with the width of 100% and the maximum width of all our images will not go beyond 100%.

add images_28

So let’s try viewing this, let’s refresh and as you can see our image now changes its size from its original and actual size to this size. Now let’s try to resize the browser and see what will happen to our images. As you can see it reverted back to its actual size so we made a mistake here. So the minimum width shouldn’t be 1025 because if you resize the browser width it will not be applied to those that are less than 1025 such as this one. So we don’t want that to happen so what we’re going to do is instead of using 1025, we’ll use 319 px to make sure that we cover all screen sizes.

change image size_29

So responsinator will basically try to emulate other screen sizes, as you can see here, this one is how you will see your website in an iPhone screen. So there and on a landscape mode. Here is for iPhone5 and we have other devices here so we also have iPods. So there! Now let’s try to add YouTube videos. Let’s open Youtube and let’s try to embed this HTML Guys into our demo page. So let me just copy the embed code here. Copy this and I put it right here. So save and let me just refresh and resize this. So we now have videos here but as you can see just like in our images the width of the iframe goes outside the size of our grid. So we need to avoid that by creating another rule, so instead of using images we’ll use iframe, object and embed so the max-width should be 100%.

change video size_31

Now you have the option whether to include width or not in your media query. So this one you can also remove this particularly if you don’t need the image to resize to 100% if it does not fit within the grid so you can actually remove this but it’s up to you. So let’s try to remove this, so let’s refresh this and as you can see our video now is resize to fit within the grid so I can now resize this and the video will adjust accordingly just like here.

final video size_32

So that’s it! It’s very easy try for yourself and experiment on other layout and in the next video we’ll try to create responsive web using framework such as bootstrap and zurb foundation.

Find this article/video useful? Leave us a comment below and let us know what you think!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

BACK TO TOP