Tuesday, January 15, 2013

The New Standard: Some Tips and Tricks of Web Design

I recently started helping build a website for a friend of mine, and I thought it might be fun to talk a little bit about web design, HTML5 and CSS. As with all modern web browsers, HTML5 and CSS are the standard for markup language used on the web today. The best part about it is that with the new elements that have been added thing that you could only achieve with scripting before are pretty easily done just with using the language the way it is.

The Website I’ve been working on for reference. In case you are interested, check it out: The Hunter Supply Outlet

The Old Days


In The Old Days you could build a webpage in a few minutes slapping just a few lines of code together. It wasn’t pretty but it never needed to be. Back when I first got interested in the Internet, most of the world wide web was covered in black text on a white background.

It was pretty basic, but it worked well because people never expect anything more. Soon, images became part of the web, and web pages were flooded with them, but not always in a good way.

The web started to look like a bad bulletin board system, with lots of advertisements, little content, and a whole lot of nothing. But standards began to emerge and people started obeying them, and real development began to take hold. Soon the web began to look amazing, and people took notice. It was no longer the ugly little place where you got your porn anymore, it could be used for some pretty amazing web sites, and now in the Web 2.0 years we have loads of competing browsers, but a standard that most of them stick to, and thus a designer can design most of his code once, and it will remain compliant throughout.

Of course this wasn't always the case, often times you would code something that worked great in Internet Explorer for example, and it would look terrible, or not work entirely in Netscape. But those days are pretty much gone, and with them a lot of the old code has become defunct. In this tutorial of sorts I will show you some simple techniques to brighten up your website with Cascading Style Sheets, and the newest standard of HTML markup code. Hopefully I can pass along some tips that will make it easier for even the greenest web coder to build something pretty nice.

Basic Tools


First you are going to need something to write your code in, I’d recommend getting a WYSIWYG (What you see is what you get) editor. These editors will allow you to write the code in HTML if you choose, or design the site using a more manageable interface, one where you can see the elements as you put them in. The best kinds of editors are those that allow you to do both. My preference is Adobe Dreamweaver. Coming in at around $399, it can be expensive for your average person, especially someone who just wants to learn how to build their own website for the first time. However, it’s one of the more advanced editors I've used.

There are tons of free or low cost editors out there. Three free editors I would recommend are: Kompozer, Alleycode, and Amaya. The reason I use Dreamweaver is that I do a lot of coding that is not always in HTML, sometimes its in JavaScript, or PHP, and Dreamweaver easily allows me to transition into that. Also it’s one of the first WYSIWYG editors I actually used, having originally coded everything in Notepad or Vi, so I like to stick with what I know.

You are probably going to need some kind of image editing software as well. I use Adobe Photoshop for everything. This is also extremely pricey at $699 and can be terribly difficult for the average user to learn, however its without a doubt the most powerful image editing tool in existence. If you don’t have the $699 to fork over try: Gimp as an alternative, it’s free and it has many of the same features as Photoshop.

You’re going to need a webserver to test your code as well. Now you can purchase space just about anywhere, it’s usually inexpensive and you get a lot of it. GoDaddy comes to mind as a good choice, but Bluehost is also a nice hosting company. You can also run a local webserver if you are so inclined, however, remember, you will have to configure all the elements you might need to run your code. If you plan on basic HTML then a standard webserver like Apache should work just fine. Apache is really powerful, and you can configure it to load additional plugins that will make your website much more powerful, but it requires more complex configuration, so choosing the inexpensive hosting may be a better option.

You are going to need a modern browser. This means if you are still using Internet Explorer 6, 7, or 8, it’s time to update. I personally use four browsers in windows for testing purposes: Chrome, Firefox, Opera, and IE. On my mac, I also use Safari. I wouldn't recommend Safari for windows, without the security of the mac, it’s been pretty exploitable, and having it is just overkill. My personal recommendation, and preferred choice is Chrome or Firefox, I use them both, although Chrome a bit more.

Also Chrome comes with a built in Inspection tool for looking at code, learn it, use it. You can alternatively download the firebug extension for Firefox.

A Basic Tutorial


Now that you have everything you need, let’s start out by trying some basic HTML.

Each webpage will need to be opened with an <HTML> tag and closed with a corresponding </HTML> tag. In fact, with the exception of a few, all tags must be closed. I will explain further along as I go.

So our initial page should look like this:

<html> 
<head> 
<title></title> 
</head> 
<body> 
</body> 
</html>

You will see in the example above I have opened four tags, and have closed four tags. These four tags are all you need to start your HTML page. The first tag is the HTML tag. This tag let’s the browser know that the language of the page is HTML. The second tag used is HEAD, and this tag let’s the browser know all the elements that describe the page. The third tag is the TITLE and it’s used inside the HEAD tag because it’s used to describe the title of the page. The fourth and final tag is the BODY, and it’s used to display all the content of the page. This is essentially the location where everything the viewer sees on the page, will be located.

You notice every one of these tags is opened, and then closed. If you forget to close a tag, the browser will not display the tag properly, and leave the tag open as text instead. In this case, as these are required elements of a page, it can render the page unreadable.

So this won’t really show you anything special about HTML, so we need to add something to this code to make it actually display content. So first we need a title. We accomplish this by placing our title in between the opening and close TITLE tags. And then we need something for the body, in this case, I will use a simple line of text to show you what it would look like. You will notice, text by itself requires no special tag, though there are some that can be used to add style.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body> 
This is our example body text. 
</body> 
</html>

You will notice in the preview that you cannot see the title, that is because the title is hidden from normal view, and can only be seen normally on the title of your browser window.

Now that we've created a very basic HTML page, we can add an image to see what that will look like. To do this we need to make use of the IMG tag. The IMG tag is self closing, and is one of only a handful that do this. Although it is unnecessary in pure HTML, I will add the closing / to it for conformity. I’m also going to use the BR tag to display a line break between the text and image. So it should now look something like this.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body> 
This is our example body text. 
<br/> 
<img src="examplebird.gif" />
</body> 
</html>

There is plenty of more you can do with the IMG tag like add height and width parameters, or make use of the alt parameter to add display text to the image search engines can read. But for this basic tutorial, its unnecessary.

The next thing you might want to do is add some color to your page, maybe either by adding a color to the background or changing the color of the text. Either is an easy change to make, and I’ll show you examples of both. But first you have to know a little something about how colors are handled with a web browser. The W3C standard require the use of HEX Code to display corresponding colors. You can find a list here. I’m going to make a change to the color of the text and the color of the body in the example below.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body bgcolor="#00FF00" text="#FF0000"> 
This is our example body text. 
<br/> 
<img src="examplebird.gif" />
</body> 
</html>

Now a webpage just wouldn’t be complete without some links. So the first thing to do is choose the color we want to use for the link color, then we can add a link to the body by either linking around text or linking around an image. I’m going to create links for both.  For the purposes of the example, I will also add the target parameter so you can see how we can open a link into a new window. The use of the A tag is used to start a link, the parameter HREF is used to reference the actual url itself, and the TARGET parameter is used to specify a target window. As you can see we close the A tag around the linked text or image we have created.
Click Here to open, or Hover over to see a preview!

<html> 
<head> 
<title>This is our example title</title> 
</head> 
<body bgcolor="#00FF00" text="#FF0000" link="#FF00FF"> 
This is our example body text. 
<br/> 
<a href="http://www.wwf.org" target="_blank"><img src="examplebird.gif" /></a> 
<br/> 
<a href="http://www.wwf.org" target="_blank">www.wwf.org</a> 
</body> 
</html>

That’s basically it to creating your own simple webpage. Now obviously there is a lot more that can be done, but this was just a simple tutorial on how to do it. Now I could spend a lot of time and a lot of writing to show you every single thing you can do with HTML but I’m going to reserve the rest of this article for the more advanced stuff like CSS, because its really the stuff that makes the web so beautiful today. If you are really interested in an in-depth lesson on HTML, I recommend W3Schools.com tutorials, as they have everything you will need to build your own website.

Cascading Style Sheets


Probably my most favorite part of the modern web are the CSS (Cascading Style Sheets) element. It is by far the best way to modify HTML outside of using a CMS (Content Management System) like Wordpress to manage your website. Don’t get me wrong, if you are going to blog, or require something that will constantly need to be updated, you should use a CMS. If you intend to have a hundred pages on your website, you should definitely invest in something that is a little more dynamic, because although HTML can be powerful by itself, it is very static in nature, even with the use of something like CSS.

Using a CMS that relies on something more advanced like PHP to power your site gives it that dynamic ability to change on the fly. But understand that it is not for the faint of heart. Learning PHP can be a handful, luckily something like Wordpress is fairly easy to use, because it has a backend dashboard that does most of the work for you. It’s essentially plug &play. But even Wordpress which is designed in PHP still relies on static code in the form of HTML and CSS that display its pages, because even though the pages are created dynamically, the code that is displayed is of a static nature.

So I’m not going to go any further into the use of Wordpress or any other CMS, you can Google that stuff and learn if you like. I’m here to talk about the Style elements.

So what does styling actually do?

Well the use of Style sheets can add a style to an element that already exists in HTML but may lack the ability by itself, or expand that style globally to all elements more easily.

In the example below, I’ll show you how to basically style text you are going to add to a page by adding the style to the <P> paragraph tag so applies style to all text within that element.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#C63;">
<h1>These are some styles and colors.</h1>
<p style="font-family:arial;color:#C9F;"> 
I've styled this text with the arial font in a light purple color.</p>
<p style="font-family:Georgia;color:#CCC;"> 
And here is the Georgia font on gray.</p>
<p style="font-size:12px;">This text is 12 pixels high</p> 
<p style="font-size:16px;">This text is 16 pixels high</p> 
<p style="font-size:20px;">This text is 20 pixels high</p> 
<p style="font-size:24px;">This text is 24 pixels high</p>
</body> 
</html>

That is a simple fun way to modify the style of text. But it gets even way more advanced than that. Text alignment is another thing I like to have fun with because it allows me to create a page that has divided sections that exist in all areas of the page. Without the ability to align the text element, text would all be aligned to the left side of the page. So even if you have an element that resides on the right side of the page, the text within that element may be aligned to the left within that DIV tag. By aligning the text however you want you can do some pretty awesome stuff with it. See how examples below of text alignment and padding.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#FFF;">
<h1>Now for some alignment!</h1>
<p style="text-align:left">As you can see this text is aligned to the left.</p> 
<p style="text-align:center">As you can see this text is aligned to the center.</p> 
<p style="text-align:right">As you can see this text is aligned to the right.</p> 
<p style="padding-left:160px">Now here I'm going to pad the text 160 pixels from  the left so it's not quite in the center.</p> 
</body> 
</html>

Another element you see used a lot is the text-decoration style, which specifies how the text will be stylistically displayed. Although this can be used to stylize normal text, it is more effectively used in linking URLs because it allows the user to create links that have no underline by default. You can also use the effect of coloring the link, a great replacement effect for the normal colored, underlined, HTML link element.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#FFF;">
<h1>Text Decoration</h1>
<p style="text-decoration:blink">Blinking(Doesn't work in Chrome)</p> 
<p style="text-decoration:line-through">Line Through</p> 
<p style="text-decoration:overline">Overline</p> 
<p style="text-decoration:underline">Underline</p> 
<p style="text-decoration:none">None</p> 
<a href="#" style="text-decoration:none;color:#F00">Undecorated Colored Link</a> 
</body> 
</html>

So now that you've seen some of the cool things you can do with CSS, I’m going to show you some really cool advanced techniques that you can use, as well as give you some tips and tricks on web designing with it.

The Good Stuff


Now CSS is seriously awesome, if you haven’t realized it by now. But I’m about to show you some of the coolest things you can do with it, you might not have even realized.

Gradient Effects

So you may or may not have seen this trick before, but its surely a good one and one of my favorite tricks to do with pure CSS. Creating gradient backgrounds used to be one of the toughest things to do, reserved mostly for those with an image editor like Photoshop, but now it can be achieved merely with a little CSS Code in the background.

The only issue you will note is that this feature is implemented differently in each browser type, yes slightly annoying, but it does work on all modern browsers. If someone manages to use a browser to view this without support, they will instead get displayed a violet solid-colored background. (If you are still using something like IE 6 or IE 7, get something more modern. You are denying yourself a vibrant web experience. And you probably cannot see many of these elements.)
Click Here to open, or Hover over to see a preview!

<html> 
<body>
<style type="text/css"> 
.gradient { 
background:#E01BD3;
background:-moz-linear-gradient(top,#00FF44,#F6FF00);    
background:-webkit-gradient(linear,left top,left bottom,from(#00FF44),to(#F6FF00)); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF44',endColorstr='#F6FF00');  
color:#000000;  
height:auto;  
padding:50px;  
} 
</style> 
<div class="gradient" style="height:70%"> 
<h1>Background Gradient</h1> 
<p>CSS Gradient Green to Yellow</p> 
</div> 
</body> 
</html>

Text Shadowing Effects

So I know why I love these effects so much. It’s because again, these used to be relegated to image editing software like Photoshop, and now you can apply them to your elements with CSS. Like gradient, these effects no longer require expensive software to produce, and look equally as unique and amazing. Be warned, some of this may or may not work with Internet Explorer. To be sure, you should be using the latest version, version 10 anyway.
Click Here to open, or Hover over to see a preview!

<html> 
<body style="background-color:#333"> 
<p style="background-color:#CFC;text-shadow:2px 3px 3px #000000;font-size:26px;font-family:'Times New Roman'">Drop Shadow</p> 
<p style="background-color:#3C0;text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000;color:#993366;opacity:0.3;font-size:26px;font-family:'Times New Roman'">Embossed</p> 
<p style="background-color:#000;color:#fff;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #ff2d95,0 0 30px #ff2d95,0 0 40px #ff2d95,0 0 50px #ff2d95,0 0 75px #ff2d95;letter-spacing:5px;font-size:26px;font-family:'Times New Roman'">The Night Life</p> 
<p style="background-color:#CFF;color:#fff;text-shadow:1px -1px 3px white, 0px -2px 6px yellow, 0px -2px 8px #ff8000,0px -8px 10px red;font-size:26px; font-family:'Times New Roman'">Flames</p> 
<p style="background-color:#9F6;color:#fff;text-shadow:0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555,0px 6px 0px #444,0px 7px 0px #333,0px 8px 7px #001135;font-size:26px;font-family:'Times New Roman'">3D Text</p> 
</body> 
</html>

Icon effects

An interesting feature I have used before is Icon effects. You can link icons directly with their file type in CSS, or you can stylize lists. It’s a tool that comes in handy when you want to add something special to some otherwise ordinary text. There is a slight issue when aligning an icon to a list, if the icon is too big. The way to fix this I have found is to reduce the size of the icon to exactly 16x16px. Then it’s super important you remove the list-style by setting its type to none. If you do not do this, it will display the default type for the list, in this case being that its an unordered list, it defaults to a dot.

Another thing to remember is that the default style has to be removed, otherwise it won’t line up properly, image to text. When you use an image as a list icon, the image is always slightly higher than the text. This can be rectified by setting the background-position of the image. Once this is done, padding-left can be used to modify the text position. Doing this is tedious work, which is why you can use the numbers I've already figured out.
Click Here to open, or Hover over to see a preview!

<html> 
<body> 
<style type="text/css" media="screen"> 
a[href$='.zip'] { 
background:transparent url('images/icon_zip.gif') center left no-repeat; 
padding-left:25px; 
} 
ul.social { 
list-style-type:none; 
padding:0; 
margin-left:0;
}
.social li { 
background-repeat:no-repeat; 
background-position:0.1em; 
padding-left:1.5em; 
}  </style> 
<a href="foobar.zip">Foobar.zip</a><br/>
<ul class="social"> 
<li style="background-image:url('images/facebook.png')">Facebook</li><br/> 
<li style="background-image:url('images/gplus_variation2.png')">Google+</li><br/> 
<li style="background-image:url('images/twitter_old.png')">Twitter</li><br/> 
<li style="background-image:url('images/youtube_variation.png')">YouTube</li><br/> 
</ul> 
</body> 
</html>

Flipbook Effects

This is a cute little effect that works with most modern browsers, and it relies on almost entirely on the DIV tag, and how it is used to separate the content of the page. Basically, once you have your div tags separated, CSS is used to make each div colored separately, helping to define the separation between the tags.

By nesting the sectional div colors under the original flipbook, this allows us to create a default state for #flipbook, and a state for each #flipbook div that is nested beneath. All that is needed then is the hover effect added to the div to allow movement between the tags when the mouse is moved over it.

Lastly, the overflow:hidden property is used to clip and hide any content that is not the active div tag. While hovering over the link below will show you the page, only by clicking it can you fully experience the glory.
Click Here to open, or Hover over to see a preview!

<html> 
<style type="text/css"> 
#flipbook {width:500px} 
#flipbook div {height:50px;overflow:hidden} 
#flipbook div:hover {height:300px} 
#red {background-color:#FF0000} 
#green {background-color:#00FF00} 
#violet {background-color:#FF00FF} 
#yellow {background-color: #FFFF00} 
p {color:#000000;font-weight:bold} 
</style> 
<body> 
<div id="flipbook"> 
<div id="red"> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
<p>This is the color red. Hover over me to see what happens.</p> 
</div> 
<div id="green"> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
<p>This is the color green. Hover over me to see what happens.</p> 
</div> 
<div id="violet"> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
<p>This is the color violet. Hover over me to see what happens.</p> 
</div> 
<div id="yellow"> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
<p>This is the color yellow. Hover over me to see what happens.</p> 
</div> 
<div style="float:none;clear:both;height:0;"></div> 
</div> 
</body> 
</html>

Rounded Corners

One of the coolest little tricks you can do with CSS is rounded corners on windows. Now of course this feature is supported differently by each browser, and you can forget IE, without external help in the form of a behavior file. I’m unsure if IE9 supports a built-in function for rounded corners, although I’m sure IE 10 will. But the trick to making this work is border-radius property that is now built-in to CSS3. Chrome and Safari use –webkit and Firefox uses –moz, but both support it. As far as I know, Opera 10.5+ supports CSS specifications directly and do not require the additional prefix to operate.
Click Here to open, or Hover over to see a preview!

<html> 
<style type="text/css"> 
div { 
border:2px solid; 
padding:10px 40px; 
background:#8CBF75; 
width:300px; 
border-radius:50px; 
}
.roundup { 
-webkit-border-radius:50px; 
-moz-border-radius:50px; 
border-radius: 50px; 
} 
p {text-align:center;color:#ffffff} 
</style> 
<body> 
<div id="roundwindow" class="roundup"> 
<p>Rounded Corners!!!!!</p> 
</div> 
</body> 
</html>

Some things to remember, and some helpful tips


  • Always have a good grasp of the properties you are working with, its fundamental to understanding how everything will work together. So if you are unsure, study up, there is a ton of knowledge out there, and Google is your friend.
  • Until you become an expert in coding, I recommend you always comment your work. I know it seems kind of lame, right? NO! Commenting is extremely helpful in determining your place, knowing where something should go, or just readability. It’s also very helpful to others who would like to know how your did something, or why you did it. If you are just beginning, it can be a valuable tool to figuring out how you did something, if you leave and come back.
  • Now one thing I did not talk about, is inline coding. You will notice in all my examples, I've used it. I don’t recommend it. I only did it to show an example of what the code looks like. Instead, you should take all your CSS code, everything inside the <style> tags and instead create a .css file and link to it from within your <HEAD></HEAD> tags. I like to put all my CSS into one common file called common.css and link to it. An example of this would be: <link rel="stylesheet" type="text/css" href="css/common.css" />
  • Try to make your code as compatible as possible. It should work with all modern browsers, I would ignore IE 6, 7, and 8, as they lack compliance and diverged off using their own markup at times. Newer versions of IE, especially version 10 are standard compliant, meaning code that works on Chrome and Firefox should work with IE 10 just fine. Having said that, test, test, test! Just because it works great in your browser does not mean everyone will be so fortunate.
  • Now some people will recommend to you that you build code for older browsers, text-based browsers, or just the random 1%. Do it if you want, but remember it usually means doubling, or tripling, or even quadrupling up on code. So when I write something, I target around 90% of people, and hope that’s good enough.
  • Try to validate your code if you can. You can do this by visiting the CSS-Validator run by the W3C. If your code is badly written, it can cause all sorts of problems for browsers, so validate it. It only takes a few minutes and it can be an invaluable resource.
  • When you're building a website, try to keep everything well organized if you can. I find it makes things a lot easier to find. Keep all your images, scripts, and stylesheets in separate folders, and just link to them from your pages.
  • When creating new style sheets, use grouping to combine elements that have the same properties and separate them with a comma. For example: h1, h2, p, div { color:#000000;text-align:center}
  • Figuring out the height and width of particular elements can be frustrating, but take the time, do the math and remember that when calculating the width of something be sure to include the border, padding, and margins. Width constitutes the whole, not just the parts.
  • Get opinions, its important. Knowing how easy it is for you to navigate your code is worthless, get friends or family to test your code and ask them how easy it is to navigate. If they have difficulty, chances are most people will. Not everyone is an expert, assume they are not, do not over complicate things when you don’t have to. Simplicity is often overlooked and under used. Whenever possible, do not intentionally use an element that does not bring value to your page.
  • Content heavy sites are great for search engines, and people like them too, however giant blocks of text are hard to read if your color scheme is terrible. Validate your color contrast and fix any errors you find, of course you want to have way more elements than errors.
  • With the use of styling, you can now use almost any font on your website. In the old days, you were limited by the fonts that windows supported, this is no longer true. Take advantage of the all the available free fonts on the web, especially in the Google webfonts. Through the use of the @import function in CSS or the standard link through HTML, you can now include a link to most web-accessible fonts, and just style with them as part of the font-family.
  • If you must support IE specific styles, do so using the conditional comments <!—[if IE]> <![endif] –> You do not want to build an entire site and try to support all the differences in IE, so instead create a site using compliant standard styles, and then using the conditional comment, create a single style sheet for IE, and load it that way.
  • When setting link states, the order must be maintained. For whatever reason, it’s a requirement so don’t forget it: a:link, a:visited, a:hover, a:active
  • Understanding and remember containment height differences is important. Know that when you use CSS to specify a height of 100%, it actually refers to the container’s height, all elements within would then need to be specified to 100% as well. So the easiest thing to do is rather set the hierarchy of container height by specifying the outermost first like so: html, body { height: 100%} It’s also important to remember that the container should then be set to a minimum height of 100% as well to prevent overflow. Do so by specifying the elements with {min-height:100%}
  • Use a CSS Reset style sheet whenever possible to help maintain cross browser compatibility. Doing this will reset all values to 0, so they may then be specified by your CSS.
  • Mobile browsing is taking off, whenever possible try to support them by creating a style sheet that offers styles that can be browsed on a mobile platform.

Final Thoughts


Remember that designing a website should take you more than 5 minutes. Do not go into it expecting a masterpiece an hour later. It can take weeks, even months to develop a well designed site. As I suggested before, a CMS is a good solution if you need a dynamically updated content system, and there are many to choose from. You should also not discount the use of templates for making life easier. It’s often unnecessary to spend 50 hours coding something someone else has already done for you. If you find something you like, use it.

I should also say that the use of CSS to stylize your content makes maintaining a site a lot easier, if you contained the CSS to single linked .css files, as I suggested earlier, and it has the benefit of allowing you to make one code change, that has a global effect, so don’t discount its value. Global changes are much more effective than local changes, and anytime you can change one thing and have it affect the whole site, the better off you will be, because ultimately you will spend less time coding. But you should not go into this believing it will be easy, its not, if it were, everyone would be a web designer.

Pages - Menu