Need a professional responsive website built? Contact the developers of Simple at Prowebdesign!

Tutorial. Part 1 - HTML.

Create a website with Simple.

This tutorial is intended for anyone who has at least some basic knowledge of HTML and CSS. If you are an experienced web designer, then looking through Simple's code is enough to get you started - the code is well commented.

Files in the archive

Simple comes with 2 themes: basic (DEMO) and color blocks (DEMO). Both of them are in the simple.zip archive. Files are named accordingly. Basic theme file is basic.html. In the CSS folder you have basic-style.css. In images folder you have some images with basic- prefix. They belong to basic theme. Same goes for color blocks theme. Everything with prefix colorblocks- belongs to it.

Choose theme that suits your project and work with it. It's a good idea to copy and rename the unzipped Simple folder, and then delete all the files that belong to the theme that you do not use for your project. NB: Files without basic or colorblocks in the name are used by both themes - DON'T DELETE THEM! Especially don't delete anything from the JS folder.

In this tutorial we will begin working with basic theme. Color blocks is very similar, so if you learn one, you automatically learn the other. We will look at small differences between the themes in the CSS tutorial.

HTML file structure.

basic.html is a template for the site's home page. We'll start working with home page and then will make an internal page out of it. Open basic.html and inspect it. Let's get the big picture first. To help you understand file structure faster and easier, HTML is well commented. This is example of comment: <!-- header area -->. Comments usually go in pairs - one indicates the beginning of some area, another indicates the end. Some comments have no closing pair - they are for short things. Like this one: <!-- Mobile viewport --> followed by one line of code.

For the moment we skip the <head></head> section of the page and look directly at the body. There you have following sections:

It is important to understand from the start how this structure behaves in the responsive layout. The concept of responsive (or cross-platform, or device-agnostic) web design basically means that you show less parts of site to mobile devices than to desktops and laptops. Reasons for this are: smaller screens and often much slower internet connection on mobile devices. So you show bare minimum of things to the mobile devices with small screens, and then gradually reveal more as screen size increases.

To quickly see how Simple reacts to screen size, resize your browser widow and start gradually reducing its width. You will see that at some point the slideshow will disappear, navigation bar will turn into the toggle menu, columns of text that were side by side will become 100% wide and will stay on top of each other, etc.

You should remember about those transformations while planning your project! E.g.: don't put important information inside the image slideshow, because it will only be accessible to some devices.

Modifying basic.html. Creating site's home page.

Let's jump in and create a real home page for your site. Right now we will only change the HTML and leave the look (i.e. CSS) as is. First thing you should do is rename basic.html into index.html. We will refer to this page we are building as to index.html from now on.

Document <head>

Now is a good time to check out the <head></head> section. Change the site title, description and keyword metas. Rest of things in head can remain as they are for the moment.

Logo

Moving down. Site logo lives in this piece of code:
<div id="banner">
<div id="logo"><a href="basic.html"><img src="images/basic-logo.svg" alt="logo"></a></div>
</div>
We've used a .SVG file for logo. It renders clearly on screen of any density. But you can use any internet-accepted file type: .JPG, .PNG, so on. Insert your logo. For best results try to have it max. 200 px wide. Also remember to change the link around logo from basic.html to index.html.

Navigation

After logo comes one of the most important parts of the project: the navigation menu. Plan it carefully. index.html has 3 tiers navigation. Note: some list elements have class="current". This is the class that creates color highlight to indicate current page. You also have this class on some sub-menu items. It's good to know you can have it, but if you don't intend to implement what you build as a CMS template, better keep current class on top menu items only.

Recap: with Simple you can add 3 tiers of navigation easily. For more you will need to write some additional CSS. But the best menu will have no more that 2 tiers: top links and one level of drop downs. HTML menu structure is an unordered list. It will have nested lists in case you will have more than one tier of links. Be careful with nesting - try keeping nice indentation not to screw something up. As a check: nested list lives between some link's closing </a> tag and its closing </li>. Insert links to actual pages on your site instead of link # placeholders. Don't forget to check in the browser how things look - often! Also don't forget to check how your page looks on narrow screen. Resize the browser and click MENU button to see the toggle menu in action. Menu transforms from navigation bar into toggle automatically. You don't need to do anything for it to happen, besides minding to not accidentally delete <div class="menu-toggle">Menu</div>. This is the toggle button, that is visible on small screens and hidden on large.

Let's suppose that you are building a site for catering business. Then your navigation menu code may look like this:
<!-- main navigation -->
<nav id="topnav" role="navigation">
<h5 class="menu-toggle">Menu</h5>
<ul class="srt-menu" id="menu-main-navigation">
   <li class="current"><a href="index.html">Home</a></li>
   <li><a href="about-us.html">About Us</a></li>
   <li><a href="services.html">Services</a>
      <ul>
         <li><a href="services-wedding-catering.html">Wedding catering</a></li>
         <li><a href="services-party-catering.html">Party catering</a></li>
         <li><a href="services-kids-catering.html">Kids catering</a></li>
      </ul>
   </li>
   <li><a href="menu.html">Menu</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- end main navigation -->

Hero area

Hero area is a place where you present your product or business. You need to come up with short but coherent tagline and a bit of promo text, that will describe the matter of the site well. And, of course, with some stunning pictures to illustrate things. This is the place that'll catch your visitors' attention. This is also the first place where you meet the Grid System and Responsive Images. But about this in a moment. First, insert your tagline between the <h1></h1> tags and descriptive text in the paragraph below.

Flexslider image slideshow

Flexslider is easy to modify as well. Slides live in an unordered list. If you want to have only images - update the ones in slider with your own, delete everything else between slides' <li></li>. Remember to rename the images if necessary and set the correct path. Include a paragraph of text below the image if you want caption. You can also enclose image in a link. Do browser-resize test to see how slideshow looks on different resolutions and choose the pictures size that fits best. Note how images get proportionally scaled when you resize the browser - this is, in a nutshell, the responsive image in action - it responds to the size ot its container. If you have a touch screen device, test your page on it, you'll see that you can go through slides by, well, sliding them with your finger. Not just tapping on controls.

Full width Flexslider

What if you want to have a full width slideshow? This can be easily done. Just remove classes grid_5 from the text column and grid_7 omega rightfloat from the slider column. Then text will sit on top of the slider, and slider will be 100% wide. You can also delete the text altogether or move it below the slider. And since we mentioned grids again, lets take a closer look.

Grid system

Grid system is a set of columns, which you can place side by side. There are many grid systems with varying number of columns. We used 12-coulmn grid in Simple. It means that 12 columns have width of 100%, one column has width of 100% divided by 12, and all other column widths are multiples of this one twelfth. Seems complicated? Always so much easier with examples. Look at our hero area. Tagline and text live in a div (column) with class grid_5. Flexslider lives in a div with class grid_7. Columns' indexes - 5 and 7 - add up to exactly 12. And this is how it goes. If you want to have 3 equal columns side by side, you will use 3 divs with class grid_4 (12/3 = 4). For 4 equal columns - grid_3 (12/4 = 3). 2 equal columns - grid_6. You can combine unequal columns. Just look at the columns demo - you'll see all sorts of combinations.

2 final things about columns:

  1. Because columns have left and right padding of 15 pixels they have a small indent in comparison to the rest of content. You can enclose several columns in <div class="row"> to eliminate this 15px spacing.
  2. At a certain breakpoint all columns become simple containers with 100% width. They stop floating side by side and stay one after another like paragraphs. This is done so they don't become too narrow and squeezed on small screens.

Main area - Content

Moving on to the main area. Note how the main area div has a class .wrapper. You have seen this class already. This is the class that defines the width of entire site. Without it elements will be 100% wide. Right now wrapper width is set to maximum of 1200 pixels.

In the main area you have content and columns demo sections. Content section has class wide-content. Use this class, if you want your content to take up all the space available. Without wide-content class, content will be about two thirds of the wrapper width. Use narrow content if want to have a sidebar next to it.

In content div you have 3 equal width columns of text floating side by side. You can leave it like this, and have 3 sections like, say, About us, Our Services, Testimonials. Or you can rearrange the columns in any way described above. To exercise, let's make 3 columns into 2. Delete the last div with class="grid_4". Change class grid_4 into class grid_6 on two remaining columns. Voilà! Two columns of text. Now let's get rid of columns altogether. Delete one of the columns, then remove class="grid_6" from remaining div (better yet, remove the div itself, and don't forget the closing tag too). Now you have a single undivided block of text.

Content in the main area can be divided in sections by using header tags 1 through 6: h1, h2, h3, etc. Just like text on this tutorial page.

To practice more let's insert 2 rows of 4 equal columns each anywhere in content area. This time we will be practicing using responsive images too. Firstly, create an empty div with clearfix class: <div class="clearfix"></div>. It is a good idea to wrap a row of columns in this kind of div, if you intend to have more than one row of columns with variable height. If you don't use containing div, some bottom row columns will "sneak" under the top shorter columns and break the layout. If your columns will all have the same height, then you shouldn't use the containing div. Then inside containing div insert 4 identical divs: <div class="grid_4">blah<div>. Lastly, insert some placeholder text instead of "blah", and above it insert an image in each column. For exercise you can use images from the slideshow. Now divs will look somewhat like this:
<div class="grid_4">blah
<img src="images/basic-pic1.jpg" />
<p>Lazy wizard makes nasty brew for evil queen and Jack :)</p>
<div>

And now to practice the responsive image use, do the resize-browser test. And see how images scale automatically. When columns become 100% wide, the images become larger. The good news is - any content image in Simple is already responsive. It is taken care of by CSS rules. To use responsive images, just insert them in your page's content.

At this point you probably got an idea about using grids, so delete the columns demo section. Also delete columns demo styles from the <head> section of index.html.

Finish inserting your own texts and images into index.html to finalize your home page. After you are happy with home page, save it, then copy and rename. Use one of the HTML file names, which you already used in the main menu, e.g.: services.html. Now we will be adjusting this new page's structure to turn it into a proper "inside" page.

Making an inside page.

Turning services.html into an inside page is actually quite easy. First of all, move current class from home page's navigation item onto the services.

Next we will get rid of the hero area. There's no need for promo text and image slideshow on every page of the site. So delete both grid divs - ones with promo and Flexslider - from the hero area section. Leave the <div class="wrapper">, we still need it. Then change section's id from id="hero" into id="page-header". Inside the page-header section add <h1>Services</h1>. Check how things look in the browser. You still have the grey area which separates logo and navigation from the rest of the page. But now all you have there is the page's title. Which is a good thing - inside pages should be simple and concentrate on being informative, rather than pretty.

There will be a new element in our inside page - a sidebar. Services section has 3 sub-pages. So it is a good idea to have a secondary navigation alongside the content area. Let's make a sidebar. Firstly, delete class="wide-content" from content section. Content section becomes less wide, allowing space for another element beside it. After the closing content section tag (</section><!-- #end content area -->) add mark up for the sidebar:

<!-- sidebar -->
<aside>
<h2>Our Services</h2>
   <nav id="secondary-navigation">
      <ul>
         <li><a href="services-wedding-catering.html">Wedding catering</a></li>
         <li><a href="services-party-catering.html">Party catering</a></li>
         <li><a href="services-kids-catering.html">Kids catering</a></li>
      </ul>
   </nav>
</aside><!-- #end sidebar -->

<aside> is a semantic tag for sidebars and any other kind of related content. In the sidebar you have the navigation menu with already familiar unordered list of links. This navigation has id="secondary-navigation". Check the page in browser. You will see that content floats side by side with Services section menu in the sidebar. Positioning is taken care of in CSS. Resize the browser window, see how sidebar will fall below the content on smaller screens.

If you want, you can add more things in the sidebar, or course. They will go after the closing </nav> tag.

Arrange your content and services.html is good to go. You then can copy and rename it to create the rest of internal site pages.

Changing your site's look and feel.

You've learned how to work with Simple's HTML to create a fully functional website. If you want to give your site a more branded look, change colors, alter which things are vsisible or not on mobile devices, read the second part of this tutorial.