Dynamic Blox

A Web Design Resourse

Breadcrumb Section

Modern Web Design Part 3

May, 21, 2014 | CSS,HTML

Modern Web Design Part 3, is the final part of our segment. It is based on displaying your business model and the message you plan on conveying to your base of clients – (Hey! I’m on the web, and even more accessible! Tell your family, friends and even your mistress!) – just a little humor. One of the first things I always tell a client is that if you already have a physical business with a decent client base, the only way to go is up by adding a website. Unfortunately, that does not usually go well with the traditional folks in this realm. The real kicker is how they are very connected to their mobile device, whether it’s a laptop or smartphone, but a website for their business is out of the question.

The general business model, whether it’s for Best Buy or a one man courier operation is tasteful presentation. The media section, which is the primary real estate area for all websites is what we will target first. Several years ago the in thing was Flash animation, and then we move to Javascript. But seriously, (I know, bad grammar) the only thing you are obligated to do, is display a very effective message about your business. With that in mind, we will refrain from using an image slider, or some annoying animation, that might turn clients away. Here is the HTML

 <section class="blockz bg-white">

          <div class="wrapper">
            <div class="media">

            <img class="center" src="img/truck.png" alt="truck">
            
            <h1 class="center">For Availability and More Info, Reach us at</h1>
            
            <h2 class="center">1-800-976-1313</h2>
            
            <h2 class="center">info@mmc.biz</h2>
            
              
            </div>
        </div>

    </section>

Let’s say your small business is a moving company, that is ran by you and three of your roommates. You can use a decent picture of your truck along with your crew or purchase a vector graphic from a number of sources online. We will use a very plain image of a moving truck with our company name plastered on the side. The image os 1080 pixels (width) and 300 pixels in (height). However, this is not enough, We have to provide readable information for search engines. With that being stated, we will add some descriptive info with the image that will not display, when viewing the desktop version of the website, but you will see it on the mobile version. See it here with media queries.

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
 
   nav.menu ul { width: 100%;}
   nav.menu ul li {width: 50%; float: left; position: relative; display:inline-block;  
    border-top: 1px solid transparent;  border-bottom: 1px solid transparent; border:none;}
    nav.menu ul li:first-child{border-left: none;}

    nav.menu ul li a{background: #444;}

    nav.menu ul li a:hover{background: #555;}

    .titled h1{text-align:center;}
    
   .media img.center{display: none;}

    .media h1.center{display: block; position: relative;}

    .media h2.center{display: block; position: relative;}
   

}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 780px) {

   nav.menu ul { width: 100%;}
   nav.menu ul li {width: 25%; float: left; position: relative; display:inline-block;  
    border-top: 1px solid transparent;  border-bottom: 1px solid transparent; border:none;}
    nav.menu ul li:first-child{border-left: none;}

    nav.menu ul li a{background: #444;}

    nav.menu ul li a:hover{background: #555;}

    .titled h1{text-align:center;}
    
    .media img.center{display: none;}

    .media h1.center{display: block; position: relative;}

    .media h2.center{display: block; position: relative;}
  


}
/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 780px) {   
 
nav.menu{display: block;}

.media img.center{display:block;}

.media h1.center{display:none;}

.media h2.center{display:none;}

}

We will use the “vw” measuring units for the heading fonts because it’s responsive and perfect for the effects we want. For more information on this measuring unit, go to (http://css-tricks.com/viewport-sized-typography/).

.media{float:left; width: 100%; padding:0px 0px 15px 0px; margin:0px 0px 0px 0px; min-height: 100px;
 background: transparent; position: relative;}

.media img.center{ width: 95%; padding: 0px; margin: 0px auto; background: none;}

.media h1.center{
  font-family: 'Droid Sans', sans-serif; text-align: center; font-weight: 700; font-size: 4.5vw; padding:0px; margin:25px auto 0px auto; 
  line-height:inherit; color: #2c88cd;  width:90%; text-shadow:#ddd -1px 1px 0,#eee -2px 2px 0,#999 -2px 2px 0, #ccc -2px 2px 0;
}

.media h2.center{
  font-family: 'Droid Sans', sans-serif; text-align: center; font-weight: 700; font-size: 3vw; padding:0px; margin:5px auto 5px auto; 
  line-height:inherit; color: #333;  width:90%; text-shadow:#ddd -1px 1px 0,#eee -1px 1px 0,#999 -2px 2px 0, #ccc -2px 2px 0;
 
}

The body area is much more direct, you will display your service options, fees and hours of operation. We will list three service plans with pricing information using three columns. From there, we’ll move to the footer area and list our social media and disclaimer links. That is it, the landing page is complete. Technically, we can place everything on the landing page, which means you would not need a navigation bar. However, we will create an additional contact page.

    <article class="col-1">

    <h1 class="centered-text styled-text font-salmon">Service Pricing</h1>

<div class="col-3 fill3">
  <h2 class="centered-text styled-text1 font-black">1 - 2 Bedrooms</h2>
  <h3 class="centered-text styled-text2 font-offBlue"> $250.00 Flat Rate</h3>
    <h4 class="centered-text styled-text2 font-green">Two Movers</h4>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div>

<div class="col-3 fill3">
  <h2 class="centered-text styled-text1 font-black">3 - 4 Bedrooms</h2>
  <h3 class="centered-text styled-text2 font-offBlue"> $400.00 Flat Rate</h3>
    <h4 class="centered-text styled-text2 font-green">Three Movers</h4>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div>

<div class="col-3 fill3">
  <h2 class="centered-text styled-text1 font-black">Commercial Property</h2>
  <h3 class="centered-text styled-text2 font-offBlue"> $700 Starting Rate</h3>
    <h4 class="centered-text styled-text2 font-green">four Movers</h4>
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div>
    
     </article>

Footer section

 <!========================Footer Section============================-->  

    <footer class="blockz bg-offBlack1">
  
<div class="wrapper">
      <div class=" col-1 fill1">
        <p>My Moving Company &copy; 2014 | <a href="#">Disclaimer</a>| <a href="#">Twitter</a> | <a href="#">Facebook</a></p>
      </div>
  
        </div><!--End wrapper--> 
              
    </footer>

You can use tables to create a contact form, but why bother, We are on our way to become CSS gurus, so forget the tables (for now anyway). The form that we will built has no logic, your web hosting provider will furnish the required information to create a working contact form, or you can get a php version from sources like (http://www.hotscripts.com/). Prior to html5, we had to use Javascript or php for client side verification and placeholder text. Today all you need to add is required within the input tag and placeholder. Client side verification will only go so far, I strongly recommend that in a real live application you use Captcha along with server side verification for security purposes. Here is the HTML.

  <section class="blockz bg-offWhite5">  	        
  <div class="wrapper">

  <article class="col-1">
    
    
          
            <div class="col-2 fill3">
	   <address>
	    <h2>Address</h2>
            You can email me here &#x21e8; <a href="mailto:info@mmc.biz">info@mmc.biz</a><br> 
            You can call us @: 1800-976-1313<br>
	     You can fax us @: 1800-976-1414<br>
             456 Ceelo, West 125th Street<br>
           New York, NY 10007
          </address> 
	    </div>
    
      <div class="col-2 fill3">
    <h2 class="styled-text1 font-salmon">Have a Question or Comment?</h2> 
    <p>Fill out the form below and We will respond right away...</p>
    
    <form>
    <fieldset>
    <legend>Contact</legend>
     <input type="text" name="name" placeholder="first, last name *" required title="Your first and last name">
     <input type="email" placeholder="you@youremailaddress.ext *"  required title="Your email address">
     <input type="address" name="address" placeholder="your-address" >
     <textarea  placeholder="Your Question or Opinion goes here...*" required title="Your Question or Opinion"></textarea>
     <input type="submit" value="Let it Rip!">
     </fieldset>
    </form>
    
    </div>
      
    </article>

Now, the CSS

 /*===============================CONTACT FORM=================================*/
 
 form
{width: 96%;min-width: 200px;float: left;margin: 5px 2% 10px 2%;
padding: 5px 0px 5px 10px;color: #333;text-align: left; text-decoration: none;}

form fieldset{float: left;width: 100%;border: 1px #ddd solid ;margin: 10px auto; padding: 8px 4%;}

form legend{ color:#2c88cd;text-indent:0px; padding: 7px; font-size:1.5em; text-shadow:#ddd -1px 1px 0,#eee -1px 1px 0,#999 -2px 2px 0, #ccc -2px 2px 0;}

form p{ margin: 5px 0px;color: #777; border: none; }

form input:focus{outline: none;}

form textarea:focus{outline: none;}

form label{color: #777;font-family: sans-serif;font-size: 10px;font-weight: normal;border: none; text-align: right;padding-left:5px;}

 form input[type="text"],
 form input[type="email"],
 form input[type="address"]
 {
	width: 95%;min-width: 190px;padding: 2px 5px;margin: 3px 0px;border: 1px #eee solid;
	font-family: sans-serif;height: 40px;font-size: 12px;line-height: 38px;border-radius: 2px;
}
 
 form textarea
{
	width: 95%;min-width: 190px;min-height: 120px;overflow: auto;padding: 5px;font-family: sans-serif;
	margin: 3px 0px;border: 1px #eee solid;font-size: 12px;border-radius: 2px
}

form input[type="submit"]
{
  color: #fff;width: 120px; padding:0px;
  height: 30px;background-color:#2c88cd;text-align: center;cursor: pointer;
  margin: 5px 0px 0 0px;font-size: 12px; line-height: 30px; border: none; border-radius: 2px;
}

 form input[type="submit"]:hover{background: #8ea7bd; }

The initial phase of this tutorial is complete, you have a functioning static website that did not require much to get it up and running, Potential clients have a source to reference, when they come across your business cards, recognize your business in passing or was told of the incredible service you provided through a third party that is extremely happy with your work. We are done for now, but we will dive deeper into the development of this project. I see a WordPress theme evolving from this and eventually a Drupal theme.

View the Demo

Get Download

The Great Banda...

I dream in code, find conformity repulsive and drink excessive amounts of coffee…

6 Responses to “Modern Web Design Part 3”

  1. Anna

    May 31, 2014

    Can I use the download for my own project.

    • Mr.Blox

      May 31, 2014

      Sure, whatever you want.

      • Jorge

        January 25, 2017

        Found your web site and decided to use a fast read, not what a usually do but nice one. Nice to see a blog for any change that isn�t full of spam and rubbish, and in fact makes some sense. Anyway, nice write up.

  2. Heather

    May 31, 2014

    Are you available for individual sessions?

    • Mr.Blox

      May 31, 2014

      Check your email, use the contact form next time…

  3. David

    May 31, 2014

    This tutorial is very descriptive, but the sessions are way more effective. Keep up the good work…