Put On Your Thinking Cap.
Evaluate and discuss topics with me.Difficulty level: Novice
Honestly anyone with knowledge of HTML can do this and trust me it will save you loads of time in the long run. The main idea behind this structure is that anything that is going to be on more than one page in your website is going to be called through a php include. The reasoning behind it is that if you ever plan on updating the design or structure of your site, you’ll be able to do so much quicker through this method because instead of updating each page individually, you’ll only have to update one file. It is also a wonderful solution because of how clean your markup will look.
The first thing we want to do is map out the areas that we are going to be using on every page on our site. Let’s start with the information between our <head> tags.
<head> – include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/global.css" />
<script type="text/javascript" src="/js/global.js">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Development Blog RSS" href="http://www.jaredlunde.com/blog/feed/" />
Next let’s think about the <body> of our document. Since I like to keep similar page structure on all of my sites for easier user navigation, I’m going to include a file that has the <body> tag within it. This file will be required directly after the </head> tag.
<body> – include name: “body-top.php”
<body>
<div class="main">
<div class="content">
Now that I have my main page structure set in body-top.php, I’ll want to include a file within body-top.php that takes care of the header portion of my website.
Header & Navigation – include name: “header.php”
Within header.php, we’ll keep our markup for our logo, navigation, search bar, etc. Anything that will be in the header of every page on your site.
If you have a sidebar that is constant on your entire site, it’d be a good idea to include that as well, but for the sake of length I’m only going to include a footer in this example.
Footer – include name: “footer.php”
The footer is where we will close our body, html and set structure tags. You may also want to include a footer navigation or copyright information in this file as we did with header.php.
</div>
</div>
</body>
</html>
So what does this look like when it is all pieced together into a document?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
<meta name="description" content="An example of a well-structured HTML layout" />
<?php require('head-constants.php'); ?>
</head>
<?php require('body-top.php'); ?>
Here is the rest of our body content.
<?php require('footer.php'); ?>
It’s looks clean and pretty doesn’t it? What’s great is that we can now spend 10 minutes updating all of our pages instead of 10 hours or having to deal with the horror of a massive find/replace.
This is part one of a mini-series of blog posts that I will be referring to as “The Flaws and Delusions of Web Designer Depot”
I don’t get particular enjoyment out of pointing out the flaws in others, but in this case it is so worth it. For over a year, WebDesignerDepot (Web Designer Depot) has been handing out terrible advice and ripped off posts to its users. Their articles lack attention to detail, sense, and quality of any kind.
Perhaps the funniest post I read of theirs was one that they did on “Coding for Speed and Quality”. I say it is funny because if they can’t even control the speed at which their own website loads and is presented (it is slow and looks like someone threw up on the header – also lacks any navigation whatsoever) why in the world are they writing an article about it? The site (uncached) weighs an incredible 1642.3KB, with a cached weight of 118.3K and all the while making an unprecendented 160 HTTP requests. The entire site took an astonishing between 22 and 29 seconds for me to load uncached and between 14 to 20 seconds cached. Maybe I’m nitpicking, but if I’m not on a 56K modem and a site is taking that long for me to load, someone is doing something very very wrong.
The worst part of all of this is that the Web Designer Depot actually has people who drink their kool-aid on a regular basis. Their following is over 85,000 on twitter and they sport a cool 4,500 Alexa ranking. You get what you pay for I guess. At least I assume that’s how they did it – paying users at digg to get their articles to the front page. There is no other possible way that intelligent beings would ever digg or distribute their drivel. I suppose it’s easy from there, you’ve got your name in the ring and you become a hobby for beginner and know-nothing web designers and developers who are now doomed for eternity (or at least until they find a better blog).
We are all well aware of how hard a lot of Brandstackers work when coming up with their clever, witty and absolutely original ideas. Well life just got a little easier for them and all of us! I present unto you the Brandstack Brand Name Generator. Now you don’t have to use your brain to come up with neat brand name ideas, a fresh idea is one click away!
How do I use it? It’s simple! Simply visit the link above and press the “Lay it on me baby!” button. That’s it. Don’t like it? Click it again and presto change-o you’ve got a new one! Careful, though, some may already be in use! Wouldn’t that be a drag.
Minima is my under construction Logo Design Portfolio where I will showcase the design elements of my job in a more in depth and creative way than is possible on this site.
The most important thing with the minima logo was to communicate the name in the most appropriate (minimal) way, while still producing something that was unique and memorable. I knew right away that I wanted to do a custom logotype. Here is a grid representation of the logo:
I like using grid representations in this manner because it really helps you see minute details or inaccuracies you might not see with the naked eye. As you can see, by using a lowercase “a” instead of an uppercase “A” the logo is much more cohesive and the whitespace is more consistent throughout. Not only does the lowercase “a” balance the logo better, it also made the logo a touch more unique.
My inspiration for the style of “a” that I used was Chalet Paris 1960 which actually showcases my favorite “a” in typography. Here are side by side comparisons between the minima “a” and the Chalet Paris 1960.
The major similarities between the two reside in the bowl where the curves are nearly spot on. The only in your face difference is in the spur where I decided to keep it straight to maintain consistency in the type. There are maybe more similar “a’s” out there, but like I said, Chalet’s was where I drew my inspiration from.
The end result of this logo ended up being everything that I wanted it to be. It is simple, memorable, minimal.
“I could ramble on about how talented Jared Lunde is at programming and design, but like any other artist or dedicated professional, I believe it is best to let his work speak for itself. After engaging with Jared and similar vendors on countless large projects, however, I can honestly say there is one thing that truly… absolutely… unequivocally set him apart from the rest: the process. In a business environment in which your success is becoming more and more interdependent with the success of outside vendors, I wholeheartedly felt Jared took the time to understand my needs and my goals which he then translated into the final product. He gave me a powerful level of confidence in his abilities that eventually developed into an incredibly trusting customer-client relationship.”
Frank O’Driscoll
E-Revenue Project Manager
American Cancer Society
Eastern Division, Inc.