Creating Your First Arena Template – Part 2
Now that we’ve arrived at this point, let’s change topics to one that we’re all a little more familiar with. Website design is one of the oft overlooked sciences on the internet today. Everyone knows a good design when they see it and everyone knows a bad one in turn. It would seem logical then that anyone would be capable of producing a good design, right? Not exactly.
There are multiple elements that all need to align to produce a good design. In today’s search engine-obsessed internet, a great deal of money has spent on research into end user behaviors as well as search engine indexing methods. This means there’s a far greater amount known about how we humans react with these keyboards and monitors today then was known ten years ago when the internet was less permeated through our modern society. I beg of you, please do not ignore this data!
Don’t build a site completely made of Flash. Just don’t do it. Search engines don’t like it. Users don’t like it. Sure, you may think its neat to have images sliding in and out and flashing to the point of near stroke-inducing frequency, but no one else does. We’re people, not cats. If someone has taken the time to visit your site, respect that and present them with an easily legible site that has elements placed in the same places the other 95% of the internet places them. What do I mean by that?
Simple really. Ever seen a heat map of where users tend to look on a page? This is an example of reaping the benefits of the billions of dollars of research that have been spent to identify these tendencies. Use it! If you look at one of these heat maps, you’ll see that people tend to look at web pages like they look at newspapers. When was the last time you grabbed a newspaper and immediately flipped it over to read the area below the fold first? Yeah, me neither. People look at the TOP of a page. Hmmmm…. so what might we want to put at the top of a page instead of the bottom? If you said something like “site navigation” or “site banner” or “our logo” then you’re headed in the right direction! Don’t put the site navigation at the bottom of a page. Just don’t do it. Next, when you’re scratching your narcissistic itch to put the coolest banner complete with your logo, picture of your building, picture of yourself, whatever at the top of the page in that precious little space where users tend to look…. well, be prudent. Yes, your building is quite impressive and that logo obviously has some history, but nobody wants to see a 500 X 500 pixel version of any of it. Keep it small. Limit things like that to no more than 150 pixels in height, if even that. You’ve got a limited area to engage your user so spend it wisely. This top area that draws people’s attention needs to then compel them to check out the areas they wouldn’t otherwise see.
When you’re designing your new Arena template, always keep these ideas in mind and you’ll start to think like a web designer. It’s not WHAT it looks like, its HOW it looks. Before you even think about opening Photoshop, grab a napkin. Turn it over on the back and take out a pen. Draw a page skeleton consisting of nothing more than boxes that the content will go in. Then add in some of our key elements inside these boxes. “Nav goes up here.” “Banner with logo will go across here.” And so on. This is going to be helpful in just a few, so hold that thought.
That’s probably a sufficient amount of time lecturing on this topic for now. I could talk for days on the things to NOT do but then we’d be no closer to having our first Arena template, right? So…. let’s press on!
Before we jump back into Visual Studio, there’s a fair amount of work that we need to put in on our design. We know some of the pitfalls to avoid but we don’t have anything of any substance yet. Let’s put aside our concerns about having the perfect design. For now, we’ll just focus on getting a template created with the understanding that this first one is a demonstration, not the final product.
Let’s dust off the old HTML skills real quick and mock up an area where we can display some text. Here goes nothing:
<div>
</div>
Done. Not bad at all, no? Why didn’t I use a table? Because nobody uses tables anymore. This means, now, you don’t either. You are a master of CSS (Cascading Style Sheets) or you will be soon enough. Sure, you can use tables if you want to but that’s another habit that you really need to break if you’re going to grow as a webmaster. If you throw a 800px wide table on a page, how is that going to look on my cell phone? By using CSS files, you can detect mobile browsers and resize content for smaller screens. If you use tables, you’re going to need a whole separate mobile site with smaller tables and that’d just be more work, right? Who wants that?
So now we have a masterpiece of HTML ingenuity in front of us. Surely that’s not all that is required, right? Correct. But there isn’t a whole lot more, if I’m honest. In fact, the only thing that’s left is something called a “Placeholder”. This is a .Net control that we’re going to drop into our template. It’s name makes it pretty obvious what its purpose is. It’s a placeholder. In this case, a placeholder for that first module we’re going to drop in there once we get back in to Arena.
Sit tight while I labor over this next step and add the placeholder to our HTML.
<div>
<asp:PlaceHolder ID=”plContentCell” Runat=”server”></asp:PlaceHolder>
</div>
Done. This is tough work, no? Alright, sure I’m oversimplifying it quite a bit but its important to understand the most very basic tenants of the HOW and WHY before we tackle something as arduous as an entire site design. Congratulations, you’re now finished with the front-end of your first template. All we have to do next is take this massively complex HTML/ASP.Net code over to Visual Studio and plumb it into the next new concept, our “code-behind” file.?
