I've created this Blog as away of opening up the web development world to people who want to lear about having a website that is easy to maintain and attractive and comfortable to browse.
I've seen through my years many websites that use overly complex markup to present the simplest of designs. When simpler, easier to understand markups can do the same in less time, and consume less resources for the visitor.
In today's World Wide Web we have to cater to a variety of people, Operating systems, and web browsers. This can make it difficult to create a website that looks the same across all these different platforms. The more complex the markup is, the more likely something is going to break, or fail to look the same for everybody.
I'm also of the idea that a simpler site is a better site. I find sites that have all these transitions and effects and things that change and animate around to be kind of annoying. I also completely despise sites that abuse Flash animations.
Flash can be used as an intro movie to the site if required, but basing the entire site around Flash is just overkill.
Additionally Flash based websites alienate an important part of the browsing population: The mobile population.
The Mobile Population are those people that use their phones, PDA's or other mobile devices to access websites. Well if you are one of the many users (like me) of iPhones, or iPod Touches, and now iPads then you know Flash based sites are a big no no because these devices have no Flash support. At least 30% of the mobile users use one of these devices. That means a Flash based site just turned down 30 out of every 100 users. That's a lot of people that can't see the site at all. Add to that the devices that have limited Flash support and there's no guarantee all the features in your Flash site will work. I've tried to navigate through different flash based sites with mobile devices such as Nokia phones, and there's always some type of issue preventing the full functionality of the site. You might be losing 50% of your target audience because of Flash.
Simpler, easier cleaner sites, have a better chance of looking right in mobile browsers. This also has the benefit of allowing you to design a single site instead of 2 or 3 versions for different devices.
The first thing to know when developing a website is that Internet Explorer is almost always wrong in how it renders elements. Sadly Microsoft's own browser still doesn't know how to properly render websites even in their current version 8 browser. Fortunately the statistics show that the usage of IE is declining rapidly. From 2006 where IE6 garnered about 60% of all browser users to a mere 19% now for IE8.
IE's disability can be overcome with properly coded websites.
The first step to a site that works across most platforms is creating Valid HTML, CSS, JS etc.. What is valid code? Valid code is code that adheres to certain standards established by a group called the World Wide Web Consortium or W3C for short. They determine the set of rules and norms that are to be followed to create a site. Valid code follows these rules and guarantees a consistent look across the different platforms.
One must also let the browser know what these rules are so it can render the content appropriately. These rules are contained in files called Doctypes. Short for Document Types these files basically list the rules the browser should follow to render or display the page. Setting this at the top of your page means that any browser loading your page will know how its supposed to render it. This keeps things consistent. Even IE follows these rules when properly set.
The most common Doctype is the Transitional Doctype.
This gives you the most leeway in coding, by giving you access to presentational and stylistic elements within the markup like font tags and other deprecated tags. Other doctypes like the Strict doctype disallow such tags, and demand all presentational and stylistic coding to be done through CSS.
There are other doctypes that can be used in other specific circumstances but for our purposes will stick mostly with Transitional, and Strict.
What this approach wants to achieve is to separate the presentation from the structure of the document. The structure refers to how the information is organized. You have paragraphs, lists, sections etc.. The Presentation is how those structure elements look. Do they have a border? A background? Are they 10 or 50 pixels tall? etc...
Though as mentioned before, the Transitional doctype lets you have the presentational elements within markup, its always a good idea to avoid their placement there as much as possible.
Here's an example of how a full separation of presentation and structure can make having completely different looking websites with the same base markup a simple task.
Base Markup:
Our base markup consists of a header bar, a navigation section, a content section, and a sub content section inside the larger content area.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Structure Vs Presentation</title>
</head>
<body>
<div id="header">
<h1>This is the Main Website Title</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h3>This is Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
</p>
<div id='subcontent'>
<p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
</p>
<p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
</div>
<p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
</p>
</div>
</body>
</html>
Without any CSS applied to it it looks like this:
That's a very plain website, but as you can see its completely usable. Everything works, and can be used. But suppose we want to give it a little flair. We want the links to be on the left side as a column, and the content in the middle, and maybe even a narrower column on the right. Well CSS can do all that, without touching the basic markup.
Lets add a Stylesheet to our markup, basically a set of instructions of how the markup is supposed to be presented to the user.
This is the stylesheet:
But how do we link it to our markup? There are 3 ways to accomplish this:
*{
margin:0px;
padding:0px;
border:0px;
}
body{
width:100%;
height:100%;
background-color:#DDDDAA;
}
#header{
width:100%;
height:120px;
background-color:#DDDDFF;
}
#navigation{
float:left;
width:15%;
background-color:#DDDDAA;
text-align:center;
}
#content{
width:78%;
float:left;
text-align:justify;
background-color:#FFFFFF;
}
#content p{
width:80%;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
}
#content #subcontent{
border:2px inset gray;
background-color:#666666;
color:#FFFFFF;
}
- Stylesheet Reference
- In file Style Section
- Inline Styles
Number 1, the one we'll use for this example, is basically a secondary file that is linked to our base HTML file.
We link the stylesheet to our HTML markup file with a LINK tag:
We place this link in our html file, between the head tags of our markup.
<head>
<title>Structure Vs Presentation</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
Lets see how our page looks now:
Look at that, we now have a navigation bar on the left, a colored header bar, and our content section with a defined subsection in dark gray, and the markup is still the same.
Lets try a slightly different stylesheet:
*{
margin:0px;
padding:0px;
border:0px;
}
body{
width:100%;
height:100%;
}
#header{
width:100%;
height:120px;
background-color:#DDDDFF;
}
#navigation{
width:100%;
height:20px;
background-color:#DDDDAA;
text-align:center;
}
#navigation li{
float:left;
width:80px;
height:100%;
}
#content{
text-align:justify;
}
#content p{
width:80%;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
clear:both;
}
#content #subcontent{
margin-left:auto;
margin-right:auto;
width:40%;
height:200px;
overflow:auto;
border:2px inset gray;
background-color:#666666;
color:#FFFFFF;
}
Now we have a horizontal navigation bar between the header and the content, and we have a scrollable sub section inside our main content area. But the main HTML markup remains the same.
That's the beauty, anyone can look at the code, and immediately understand what each section is, and then just apply their own CSS to make it look however they want to.
This is of course a very basic example, but it shows the power of CSS. And how a simple structure can have different layout designs.
Well that's it for my very first Web development post.
I hope you enjoyed this as much as I enjoyed writing it. I'll be going into some much cooler CSS techniques in up coming blog posts, before moving on to Javascript and finally PHP.
Don't forget to comment.
Appendix
For basic coding, any text editor will suffice. My personal favorites are Notepad for Windows, and TextWrangler for Mac.
No comments:
Post a Comment