contact

BLOG

(English) Coding a responsive website design

  • 2015/11/04/
  • コーディング
Dummy

In today’s tutorial, I’m going to show you a systematic and very simple way to create a responsive website with CSS3 media queries and HTML5.
Responsive web design has been around for few years now and is widely accepted as a new standard when building a modern website.

First thing to do to apply the function of responsive put the code viewport inside the <head> tag.
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>

I want to give you a brief definition of what a responsive web design is, if you already know what it is, you may skip this part and jump to the “Let’s code” section below. Well, for me, responsive web design is a way to show your web site’s content in an easy-to-understand manner regardless of what device views it.

For example, a visitor of your website must feel comfortable when viewing the same website for any type of devices (with different screen sizes) he has. Example of those devices include:

Android phones
iPhones
7″ tablets
10″ tablets
iPads
Desktop computers
and many more devices that can view a web page.
Other points to consider…

Your website should not have a horizontal scrollbar.
Users must not use the zoom tool to view your site’s contents.

Let’s code.

Step 1: It is important to build your website for the smallest device possible first. Build the website for smart phones.

[html]
&amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;gt;
&amp;amp;amp;lt;html&amp;amp;amp;gt;
&amp;amp;amp;lt;head&amp;amp;amp;gt;
&amp;amp;amp;lt;meta http-equiv=&amp;amp;amp;quot;Content-Type&amp;amp;amp;quot; content=&amp;amp;amp;quot;text/html; charset=UTF-8&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;meta name=&amp;amp;amp;quot;viewport&amp;amp;amp;quot; content=&amp;amp;amp;quot;width=device-width&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;title&amp;amp;amp;gt;Your Website&amp;amp;amp;lt;/title&amp;amp;amp;gt;
&amp;amp;amp;lt;link href=&amp;amp;amp;quot;./css/base.css&amp;amp;amp;quot; rel=&amp;amp;amp;quot;stylesheet&amp;amp;amp;quot; type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;
&amp;amp;amp;lt;body&amp;amp;amp;gt;

&amp;amp;amp;lt;header id=’mainHeader’&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=’responsiveLogo’&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=’lookupgrade_logo.png’ /&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;nav&amp;amp;amp;gt;
&amp;amp;amp;lt;ul&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#home&amp;amp;amp;quot;&amp;amp;amp;gt;Home&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#news&amp;amp;amp;quot;&amp;amp;amp;gt;News&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#contact&amp;amp;amp;quot;&amp;amp;amp;gt;Contact&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#about&amp;amp;amp;quot;&amp;amp;amp;gt;About&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;/ul&amp;amp;amp;gt;
&amp;amp;amp;lt;/nav&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;

&amp;amp;amp;lt;section id=’mainSection’&amp;amp;amp;gt;
&amp;amp;amp;lt;article&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;About Lookupgrade Corporation&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=’media1140px’&amp;amp;amp;gt;@media 1140px&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=’media768px’&amp;amp;amp;gt;@media 768px&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=’media480px’&amp;amp;amp;gt;@media 480px&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div class=’media300px’&amp;amp;amp;gt;@media 300px&amp;amp;amp;lt;/div&amp;amp;amp;gt;
LookUpgrade Corporation
We love design and are passionate about the unique application of creativity &amp;amp;amp;amp; technical execution that only digital advertising can offer.

&amp;amp;amp;lt;h3&amp;amp;amp;gt;Website Maintenance&amp;amp;amp;lt;/h3&amp;amp;amp;gt;

Leave your web trouble with us. We can help you preserve your website investment by putting together a website maintenance plan to keep your website secure, online and up to date.

&amp;amp;amp;lt;h3&amp;amp;amp;gt;WordPress Development&amp;amp;amp;lt;/h3&amp;amp;amp;gt;

We offer WordPress solutions that are suitable to all business models. Our WordPress site development services allow you to create a unique user experience for your customers that will keep them engaged and interested while your website is kept running at the highest level.

&amp;amp;amp;lt;h3&amp;amp;amp;gt;Web Design&amp;amp;amp;lt;/h3&amp;amp;amp;gt;

We offer professional and high-quality web design services with 100% guaranteed satisfaction. Our extremely professional team will provide you fast and professional service using the latest technologies.

&amp;amp;amp;lt;/article&amp;amp;amp;gt;
&amp;amp;amp;lt;/section&amp;amp;amp;gt;

&amp;amp;amp;lt;aside id=’sideBox1’&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;The Blogger&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
This is your side bar. You can add your information or links here.
&amp;amp;amp;lt;/aside&amp;amp;amp;gt;

&amp;amp;amp;lt;div class=’clearb’&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;footer&amp;amp;amp;gt;
Copyright 2015 – Lookupgrade Corporation
&amp;amp;amp;lt;/footer&amp;amp;amp;gt;
&amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;
[/html]

This is the style base.css of the website.

[css]
/* misc start */
*{
margin:0px;
padding:0px
}

body{
font-family:&amp;amp;amp;quot;Lucida Sans Unicode&amp;amp;amp;quot;, &amp;amp;amp;quot;Lucida Grande&amp;amp;amp;quot;, sans-serif;
}

.media1140px{
background-color:#CE9429;
}

.media768px{
background-color:#EDD49A;
}

.media480px{
background-color:#EFEF34;
}

.media300px{
background-color:#82EAFF;
}

.media1140px, .media768px, .media480px, .media300px{
padding:15px;
}

p{
margin:0 0 20px 0;
}

.clearb{
clear:both;
}
/* misc end */

/* header start */
#mainHeader{
background-color:#82EAFF;
padding:0.5em;
overflow:auto;
}

/* to make our logo resize automatically */
#responsiveLogo{
width:100%;
}

#responsiveLogo img{
max-height: 100%;
max-width: 100%;
text-align: center;
}
/* header end */

/* navigation start */
nav{
float:left;
width:100%;
}

nav ul{
list-style-type:none;
padding:0;
}

nav ul li a{
background-color:green;
border:thin solid #fff;
color:#fff;
display:block;
height:3em;
line-height:3em;
text-align:center;
text-decoration:none;
width:100%;
}

nav ul li a:hover{
background-color:yellow;
color:#000;
}
/* navigation end */

/* middle section start */
#mainSection{
background-color: #D9F8F2;
float: left;
width: 96%;
}

#sideBox1{
background-color: #C9A449;
width: 96%;
}

#mainSection, #sideBox1{
overflow: auto;
padding:2%;
}
/* middle section end */

/* footer start */
footer{
background-color:orange;
height:50px;
line-height:50px;
text-align:center;
width:100%;
}
/* footer end */
[/css]

After doing the code above, our webpage is not yet responsive. You won’t see the magic even if you resize your browser.

4

Step 2: Now let’s create the website layout for a type of device next to a smart phone, maybe we can consider a 7″ tablets as one.

We’ll just add the following CSS:

[css]
/*
-can be for 7 inch tablets
-This CSS will apply for devices with the minimum width of 480 pixels
*/
@media only screen and (min-width: 480px) {
#mainHeader {
background-color:#EFEF34;
}

nav ul li{
float:left;
width:25%;
}
}
[/css]

Now if you’ll resize your browser, you can see that your website is already responsive in two ways.

3

Step 3:Now we will create the website layout for another type of screen next to 7″ tablets, we can consider the iPad or 10″ tablets in portrait mode. Our step 3 live demo is here.

Please add the following CSS:

[css]
/*
-10 inch tablets
-This CSS will apply for devices with the minimum width of 768 pixels
*/
@media only screen and (min-width: 768px) {
#mainHeader {
background-color:#EDD49A;
}

#mainSection{
float: left;
width: 61%;
}

#sideBox1{
float: right;
width: 30%;
}
}
[/css]

Now our website is responsive in three ways. Try to re-size your browser again.

2

Step 4: Now we will create the website for desktop computers, laptops or 10″ tablets in landscape mode.

[css]
/*
-Desktop computers
-This CSS will apply for devices with the minimum width of 1140 pixels
*/
@media only screen and (min-width: 1140px) {
#mainHeader {
background-color:#CE9429;
}

#responsiveLogo{
float:left;
width:30%;
}

nav{
float:left;
width:70%;
}

nav ul{
margin:1.5em 0 0 0;
}
}
[/css]

1

FACEBOOK
TWITTER
RSS
TOP