Saturday, April 21, 2007

Pagination Domination [part 1]

"Pagination Domination" is an idea for a website that I derived from FOX network’s "Animation Domination", a two-hour segment of new shows. Pagination is a web design term where, well, I can best explain only by example. Look at the navigation on Ellis Labs, where the current page button stands out from the rest of the links. I have never done a pagination-style navigation before on a website, and I knew I wanted to try it. Plus, I had recently learned of a new technique for planning the layout of a webpage and I wanted to try my hand at that too. At this point, I knew there would probably be only two possible outcomes: I would cry myself to sleep at night, haunted by the hideous monster I had created, or I would rejoice to the angels of web design. I wasn't too fond of the first choice.

Planning


The planning phase began yesterday afternoon. My first step was to head directly over to Dynamic Drive's CSS library, to pick up a free pagination example. Wow, that was a lame first step, wasn't it? I can only agree, but I do have some defense here – it was my first time and I needed a bit of a push in the right direction. So take that.


The next step was to make a copy of my template, a folder with only two mostly-empty files. But these files are a huge time saver for me, as most of my websites begin with me typing the same exact thing each time. The template I have created (continue to tweak) has set up most of the beginning work for me, so I can dive right into getting the harder parts out of the way. I would recommend this practice to anyone who builds multiple websites or plans to in the future – saved time is saved money.


After inserting the pagination code into my blank template files, I began the new technique I namelessly mentioned in the introduction: wireframing. This is something I’m sure most web design professionals have been doing for years, but I've just now picked up on it and in hindsight, it does work well. This is where elements of a website, such as the header, footer, content boxes, sidebars, logos, etc., are just roughly sketched out via an image editing program. I decided I wasn’t going to use Photoshop for this though, and would instead code everything directly into my template. I don't think it was necessary for me to attempt to draw out a website I would not even be publishing online. After some simple editing, I came up with this:


Pagination Domination: Planning
Tune in on Monday for part two of the design!


Link of the Day


Today’s Link of the Day belongs to SEORat.com – “A new way to track Web 2.0”. I could try to explain, but their introduction puts it nicely: “SEORat is a website that monitors, tracks and displays several different types of backlink related information for any given web site. The purpose of SEORat is to actively monitor sites rather then having to do manual lookups on other websites.” Check it out!