Teochew Thunder: The Importance of Placeholders (Part 2/2)

We've just covered placeholders in scripting code. Now it's time for...

Placeholders for the Front-end

When you're working on layout, you're going to find yourself refreshing your browser over and over again till you get it just right. That's, rather unfortunately, unavoidable. But you can save yourself approximately three-quarters of the hassle.

Not all of your content is going to be in one place. Sure, they'll be on the same page, but scattered throughout different sections. And of course, you'll want to ensure that they fit together nicely, or at least according to specifications. You'll be able to do this a lot more effectively, by applying placeholders.

Consider the HTML layout below. I'm going to simulate creating a Liverpool FC fan site. You have dummy text where the content is, just so you can figure out how everything should look like.

<!DOCTYPE html>
<html>
   <head>
       <title>Placeholder Test</title>
   </head>

   <body>
       <div id="container">
           <div id="header">
               <div id="header_logo" class="left">

               </div>
               <div id="header_title" class="right">

               </div>
           </div>

           <div id="subtitle">
               You'll Never Walk Alone
           </div>

           <div id="navbar">
               <ul>
                   <li>About Us</li>
                   <li>Team of 2015/2016</li>
                   <li>Fixtures</li>
                   <li>News</li>
                   <li>Contact</li>
               </ul>
           </div>

           <div class="sidebar left">
               Mauris sollicitudin porttitor nibh ut tincidunt. Donec a elementum elit. Pellentesque

enim lacus, sollicitudin vitae luctus quis, interdum sit amet massa. Nunc commodo urna quis ex ornare posuere. Sed a

pellentesque nisl. Sed ut nibh dignissim augue pellentesque laoreet vitae et metus. Nam vulputate finibus accumsan.

Phasellus dui quam, molestie at elementum a, rutrum at mi. Sed leo metus, gravida vitae sagittis pretium, lacinia eget

massa. Nulla mattis nibh ut viverra placerat. Suspendisse fermentum ornare sem eu auctor. Donec finibus vestibulum

tortor, non tincidunt dolor vulputate iaculis. Praesent volutpat urna sit amet augue gravida mattis.
           </div>

           <div class="content left">
               <div id="content_article">
                   <h1>Article title</h1>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex vel enim

volutpat euismod. Duis bibendum pretium nunc, ac porta arcu posuere at. </p>
                   <p>Aliquam erat volutpat. Cras porta metus sed venenatis consequat. Aenean

tristique, leo vel pulvinar elementum, nisi est porta eros, vel interdum dolor lorem quis lacus. Nam quis bibendum erat.

Nunc quis felis gravida, sodales eros sit amet, blandit mauris. </p>
                   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Nunc sit amet lobortis odio, nec venenatis justo. Morbi id quam massa.</p>
               </div>
               <div class="content_gallery left" style="background:url(http://2.bp.blogspot.com/-

1oo7CPOixIU/VTIZZFvCPBI/AAAAAAAAAhM/qjLBTa2W1Ps/s1600/covercontain01.jpg) center center no-repeat;background-

size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://3.bp.blogspot.com/-

7nLyedwne-E/VTIZZIGUtSI/AAAAAAAAAhI/0exuMK92Sz0/s1600/covercontain02.jpg) center center no-repeat;background-

size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://3.bp.blogspot.com/--

No09xO9fvA/VTIZZ4qoL_I/AAAAAAAAAiA/jC5yQujsB9w/s1600/covercontain03.jpg) center center no-repeat;background-size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://4.bp.blogspot.com/-

8k81q55TDio/VTIZaMa-SLI/AAAAAAAAAhY/XKwJTweBaBA/s1600/covercontain04.jpg) center center no-repeat;background-

size:cover;">

               </div>
           </div>

           <div class="sidebar right">
               Vestibulum nisi enim, tempus lobortis elit in, aliquet consectetur dui. Cras cursus arcu

et ante ullamcorper, eu posuere diam dapibus. Praesent tristique consequat tincidunt. Etiam nec ex sed augue euismod

consectetur quis eget nisi. Quisque eu diam id est tempor consectetur. Pellentesque at tortor ultricies eros dignissim

fringilla. Nulla posuere nisl dui, id iaculis ante dignissim et. Nam malesuada diam augue, id elementum nibh laoreet ac.

Nulla ut odio a dui dapibus egestas id a leo.
           </div>

           <div id="footer">
               footer text
           </div>
       </div>
   </body>
</html>

Perhaps your CSS code looks roughly like this. This is not a web tutorial, so I've not going to bother making things readable. The CSS is not the point here.

And now your layout looks like this.

But how do you know you have it right? It looks like a mess right now. Remember, you're going to have to test it out on different browsers and screen sizes. This is hard enough as it is. Time to make it easier!

Add this to your CSS code.

See what we did there? We just specified that every div is going to have a red border. Now refresh your browser.

Look at this and tell me it doesn't make your life a whole lot easier. Now you have a visual aid, like a wireframe, to help you as you make the necessary adjustments. You can tell where the code needs to be adjusted.

The "You'll Never Walk Alone" text is mixed into the navbar because the header's width isn't well-defined. The footer text runs all the way to the top because there's no break after the middle content.

In fact, let's make these adjustments right now.

<html>
   <head>
       <title>Wheel</title>

       <style type="text/css">
           div{border:1px solid #FF0000}
           body{background-color:#AA2222;}
           #container{width:900px;height:auto;margin:0px auto 0px auto;background-color:#FFFFFF;padding:5px}
           #header{width:100%;height:160px;}
           #header_logo{width:150px;height:150px;background:url(http://3.bp.blogspot.com/-

a3hUPxlx2lw/VTIeXF-_JhI/AAAAAAAAAic/bjXKaOWHVQY/s1600/logo_liverpool.jpg) center center no-repeat;background-

size:contain;}
           #header_title{width:740px;height:150px;background:url(http://4.bp.blogspot.com/-rpU-

gahiQ0M/VTIZZJQVjZI/AAAAAAAAAhQ/bbaWuD2-9ZM/s1600/covercontain00.jpg) center center no-repeat;background-size:cover;}
           #subtitle{width:100%;height:50px;text-align:center;}
           #navbar{width:100%;height:50px;}
           #navbar ul li {width:150px;height:40px display:block;float:left;background-

color:#440000;color:#FFFFFF;text-align:center;margin:2px;}
           .sidebar{width:200px;height:auto;}
           .content{width:460px;height:auto;margin-left:5px;padding:5px;}

           .left{float:left;}
           .right {float:right;}
           .content_gallery{width:100px;height:100px;margin-right:5px}
           #footer{width:100%;height:150px;margin-top:50px;}
       </style>

   </head>

   <body>
       <div id="container">
           <div id="header">
               <div id="header_logo" class="left">

               </div>
               <div id="header_title" class="right">

               </div>
           </div>

           <div id="subtitle">
               You'll Never Walk Alone
           </div>

           <div id="navbar">
               <ul>
                   <li>About Us</li>
                   <li>Team of 2015/2016</li>
                   <li>Fixtures</li>
                   <li>News</li>
                   <li>Contact</li>
               </ul>
           </div>

           <div class="sidebar left">
               Mauris sollicitudin porttitor nibh ut tincidunt. Donec a elementum elit. Pellentesque

enim lacus, sollicitudin vitae luctus quis, interdum sit amet massa. Nunc commodo urna quis ex ornare posuere. Sed a

pellentesque nisl. Sed ut nibh dignissim augue pellentesque laoreet vitae et metus. Nam vulputate finibus accumsan.

Phasellus dui quam, molestie at elementum a, rutrum at mi. Sed leo metus, gravida vitae sagittis pretium, lacinia eget

massa. Nulla mattis nibh ut viverra placerat. Suspendisse fermentum ornare sem eu auctor. Donec finibus vestibulum

tortor, non tincidunt dolor vulputate iaculis. Praesent volutpat urna sit amet augue gravida mattis.
           </div>

           <div class="content left">
               <div id="content_article">
                   <h1>Article title</h1>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex vel enim

volutpat euismod. Duis bibendum pretium nunc, ac porta arcu posuere at. </p>
                   <p>Aliquam erat volutpat. Cras porta metus sed venenatis consequat. Aenean

tristique, leo vel pulvinar elementum, nisi est porta eros, vel interdum dolor lorem quis lacus. Nam quis bibendum erat.

Nunc quis felis gravida, sodales eros sit amet, blandit mauris. </p>
                   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac

turpis egestas. Nunc sit amet lobortis odio, nec venenatis justo. Morbi id quam massa.</p>
               </div>
               <div class="content_gallery left" style="background:url(http://2.bp.blogspot.com/-

1oo7CPOixIU/VTIZZFvCPBI/AAAAAAAAAhM/qjLBTa2W1Ps/s1600/covercontain01.jpg) center center no-repeat;background-

size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://3.bp.blogspot.com/-

7nLyedwne-E/VTIZZIGUtSI/AAAAAAAAAhI/0exuMK92Sz0/s1600/covercontain02.jpg) center center no-repeat;background-

size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://3.bp.blogspot.com/--

No09xO9fvA/VTIZZ4qoL_I/AAAAAAAAAiA/jC5yQujsB9w/s1600/covercontain03.jpg) center center no-repeat;background-size:cover;">

               </div>
               <div class="content_gallery left" style="background:url(http://4.bp.blogspot.com/-

8k81q55TDio/VTIZaMa-SLI/AAAAAAAAAhY/XKwJTweBaBA/s1600/covercontain04.jpg) center center no-repeat;background-

size:cover;">

               </div>
           </div>

           <div class="sidebar right">
               Vestibulum nisi enim, tempus lobortis elit in, aliquet consectetur dui. Cras cursus arcu

et ante ullamcorper, eu posuere diam dapibus. Praesent tristique consequat tincidunt. Etiam nec ex sed augue euismod

consectetur quis eget nisi. Quisque eu diam id est tempor consectetur. Pellentesque at tortor ultricies eros dignissim

fringilla. Nulla posuere nisl dui, id iaculis ante dignissim et. Nam malesuada diam augue, id elementum nibh laoreet ac.

Nulla ut odio a dui dapibus egestas id a leo.
           </div>

           <br style="clear:both">

           <div id="footer">
               footer text
           </div>
       </div>
   </body>
</html>

See that? Wunderbar!

Now remove the red borders... and there you go. Not perfect by a long shot, but a hell of a lot easier on the eyes now! From here, you can make further adjustments till yor layout is exactly what you want. If need be, bring the red borders back.

Another hack

Alternatively, do this.

div{background-color:rgba(255,0,0,0.2);}

This changes the background of all your divs to a transucent red. Useful for when you have a lot of nested divs.

Know your place(holders)!

That's the principle behind what we're doing. Placeholders for code, so you know what that segment is supposed to do. Placeholders for layout, so you know where your stuff overlaps and where it stops. None of it is rocket science, just applied common sense. They probably don't teach you this in school. In fact, you probably would have figured it out all by yourself after a while.

Have a nice day. Don't get too bordered by the specifics.
T___T

Teochew Thunder

Pages

Sunday, 17 April 2016

The Importance of Placeholders (Part 2/2)

Placeholders for the Front-end

Another hack

Know your place(holders)!

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews