Make A Simple Responsive Website

davisde
[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=RSoWg29wPVc” browser_url=”https://www.youtube.com/watch?v=RSoWg29wPVc”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-77946048-92947b1b-34c3″][vc_column_text]

A responsive website is a website that changes it’s size and shape so that it can be viewed properly on any device. This is a tutorial that shows you the steps on how to make your own responsive website. Before jumping in, it’s best to watch my beginners guide to HTML and CSS at the links below.

[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-77946048-92947b1b-34c3″][vc_button title=”View sample Site” target=”_blank” icon=”none” size=”btn-huge” href=”http://tinkernut.com/demos/315_responsive/index_responsive.html”][vc_column_text]

How Does A Responsive Website Work?

A new addition to CSS3 is an element called a Media query, so if you haven’t already, take a look at my CSS tutorial before continuing. A media query allows CSS code to be executed only when certain constraints are met. For instance, you can set the media query to turn the background color of the webpage blue only when the browser size is 480px. So using media queries, you can have several different sets of CSS for your website that can be activated for many different devices or any browser sizes.


How To Create Media Queries

Media Queries are elements of CSS3, so they go in the CSS portion of your webpage. Normally the CSS is located in the header using style tags. To create a media query, just add the code below to your CSS:

<style>
@media {
}
</style>

Then after the @media declaration, you can set the parameters you want to target, such as browser size or device size. For browsers, you can use the max-width attribute. For devices, you can use the max-device-width attribute. To set the media parameters in between a maximum value and a minimum value, you can use both the max-width and min-width attributes within the same parameter.

<style>
@media screen and (max-width:480px){
}
</style>

This is an example of a max and min parameter:

<style>
@media screen and (max-width:800px) and (min-width: 480px){
}
</style>

The only thing left to do now is to add your own custom CSS code in between the curly brackets. The CSS can be minimal changes, or you can completely change the design and makeup of the entire site. How much or how little is completely up to you.

<style>
@media screen and (max-width:480px) {
     div.main{
	width:300px;
     }
     div.row2col1{
	font-size:0.5em;
     }
     img{
	width: 250px;
     }
     p.welcome {
	font-size:0.8em;
     }
     p.content {
	font-size:0.7em;
     }
					
}
</style>


Sample Website Code

Below is a finished copy of the webpage code used in the video:

<html>
	<head>
		<title>My Data</title>
		<style>
			b{
			color:#000000;
			}
			a{
			text-decoration:none;
			color:grey;
			}
			img{
			display:block;
			margin:auto;
			}
			p.welcome {
				text-align:center;
				font-family: “verdana”;
				font-size:1.875em;
				color:white;
				font-style:bold;				
			}
			p.content {
				font-family: “verdana”;
				font-size:1em;
				color:white;
				font-style:italic;				
			}
			div.main{
				width:50%;
				margin:auto;
				background:#251111;
			}
			div.row1{
			width:100%;
			}
			div.row2{
			width:100%;
			}
			div.row2col1{
				float:left;
				margin:0;
				padding:1em;
				color:white;
			}
			div.row2col2{
				margin-left:25%;
				background-color:#0A1616;
				padding:1em;
				border:15px solid #251111;
			}
			body{
				background-color:#393635;
				color:white;
			}
			@media screen and (max-width:480px) {
					div.main{
						width:300px;
					}
					div.row2col1{
						font-size:0.5em;
					}
					img{
						width: 250px;
					}
					p.welcome {
						font-size:0.8em;
					}
					p.content {
						font-size:0.7em;
					}
					
			}
			@media screen and (max-width:800px) and (min-width: 480px) {
					div.main{
						width:600px;
					}
					div.row2col1{
						font-size:0.7em;
					}
					img{
						width: 400px;
					}
					p.welcome {
						font-size:1em;
					}
					p.content {
						font-size:0.8em;
					}
					
			}
		</style>
	</head>
	<body>		
		<div class="main">
			<div class="row1">
				<img src="logo.jpg"/>
			</div>
			<div class="row2">
				<div class="row2col1">
					Navigation
					<hr align="left" width=75%>						
						<ul>
							<li><a href="about.html">About Me</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul>
				</div>
				<div class="row2col2"><p class="welcome" >Welcome to my data page!</p><p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				</div>
			</div>

		</div>
		
	</body>
</html>



[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-77946048-92947b1b-34c3″][vc_column_text]

Important Links:

Help support my channel:

[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

14 Comments

  1. jan0ff
    April 20, 2012 at 9:38 pm

    Really nice tutorial.
    I was wondering if JavaScript if better solution for more fluid design?
    All the best
    Jan

  2. Jason
    April 21, 2012 at 9:55 pm

    Very cool

  3. apachepkj
    apachepkj
    April 24, 2012 at 5:49 am

    I had seen yr video tutorial on YouTube a couple of days ago.I am from Penang, Malaysia.I am using an xperia Lt15i.Even at this age,Iam 50,am very interested about phone nowadays.Amongst other tutorials yrs is much clearer but then you used a Motorola mobile phone an android 2.2version.I was wondering if you could send me a manual of sorts on how to have my phone rooted.Down to less than 50mb on phone memory and their updates for some apps which I don’t actually use is getting even lower.Be mighty obliged.

  4. Rumbis
    April 24, 2012 at 9:19 am

    i tryed this to my website epitixia.com is one wordpress website but i have one issue it dont work i dont know why :)

  5. Rumbis
    April 24, 2012 at 9:20 am

    if any one knows why iil respect it if you pm me with the solve problem :)

  6. cpstechnologies
    cpstechnologies
    April 25, 2012 at 10:20 am

    Is there any other Simpler way to do it..? I mean for people who cannot access the main HTML for their Site (happens if they made their Site using Free online Site builder like Yola, Wix, Weebly, etc..)

    • Peter
      December 13, 2012 at 11:54 am

      Hi, as far as I am aware, websites created with Weebly already have the mentioned feature. I know, because I got an e-mail from them that the website will be able to be viewed on mobile devices too (I have not published my website though, so I am not able to tell whether it is true or not). I do not understand why you are saying that they do not give access to the main HTML. I know Weebly does, because I built a website using Weebly by editing the HTML and CSS, not the Templates.

  7. Rumbis:)
    May 6, 2012 at 2:10 am

    Nice WordPress theme i like it :)

  8. Aeip
    June 1, 2013 at 2:29 am

    The video is not there anymore

  9. http://wynajemmebli.jux.com
    http://wynajemmebli.jux.com
    September 13, 2013 at 8:17 am

    I enjoy what you guys are up too. This sort of clever work and coverage!

    Keep up the fantastic works guys I’ve included you guys to our blogroll.

  10. November 8, 2014 at 6:29 pm

    The Birch of the Shadow

    I believe there may perhaps be a couple duplicates, but an exceedingly helpful checklist! I’ve tweeted this. Numerous thanks for sharing!

  11. November 18, 2014 at 1:52 am

    Souls in the Waves

    Good Early morning, I just stopped in to go to your internet site and assumed I would say I appreciated myself.

  12. November 19, 2014 at 2:20 am

    Whispering Misty

    So sorry you are going to skip the workshop!

  13. November 19, 2014 at 10:38 am

    .

    thanks for information.

Leave a Reply