Tag Archives: layout

Should My Designs Be Deep and Wide?

May 23, 2011 Robin 2 Comments

I’ve been designing websites now since 2003, and I’ve seen quite a few web design fads go by. At one time, left-aligned, horizontally “skinny” designs (barely 500 px wide) were the trend; then, it was horizontally- and vertically-centered larger background graphics, with an iframe floated atop them.

Now, as more and more computers are coming equipped with wider screens, I’ve seen more designers widening their designs to 1000 pixels or more–something I would have never seen coming back in the 500-px days. Some layouts are so wide that you have to scroll sideways if you’re on an older monitor.

Since I like to design sites that are accessible to as many monitor sizes as possible, I’ve found myself wondering if I should follow suit with the current “wide design” trend. Since widescreen monitors have become so popular, should designers now build wider layouts for their websites?

Wider Layout: Pros

More space to fit content “above the fold”
You can fit much more content on a wider layout, since you have space not only for text-based content, but for multiple sidebars full of widgets, photo thumbnails, video previews, playlists, etc.

Content is more spaced-out and readable
Since wider layouts use more of the screen space, your content can expand a little; more white space makes it much easier for users to read and enjoy your content, since it isn’t all crammed together.

With more space, you can use larger layout images
Wider layouts can mean bigger graphics–you can create huge background images and float your content on top of them, or experiment with many different images joined together to create a collage effect.

Wider Layout: Cons

People with smaller monitors have to scroll sideways
In the hunt for more and more horizontal space for web content, people with older monitors are going to be left out. Narrower screens will force such users to scroll sideways to see all your content (VERY annoying), and not everyone is going to upgrade to a new monitor just to view your site.

Page can take longer to load
With all this awesome media-rich content, users could be stuck waiting for your page to load a little bit longer, especially on slower connections (like mobile users–more on that below).

Not mobile device-friendly
Widescreen layouts are definitely NOT mobile-friendly–and much before now, you would have needed to make a separate mobile layout so that you didn’t leave your on-the-go users behind. BUT…there is another solution.

Responsive Design: Those With Wide Screens See a Widescreen Layout!

A design that shrinks and expands with differing screen resolutions (also called “responsive design”) is the new way to support all your users’ screen size needs. But it actually has its roots in a design practice I learned back when I first started in webdesign.

In the early to mid-2000s, 800px x 600px was the standard screen resolution, though some people had upgraded to a larger 1024px x 768px resolution. Many of my fellow webdesigners fixed this problem with “alternate layouts”–they made one layout sized for 800 x 600 viewers, and another for their 1024 x 768 viewers. Then, on their splash pages (entrance pages which have gone the way of the dodo bird), they had simple links for you to click to go to each design.

Today’s responsive design, with its automatic “resizing” to visitors’ screen resolution, is the best way to get a “widescreen” feel for users whose screen resolutions can make the most of it. Yet it also doesn’t lock out smaller screens–it’s an automatically customized user experience, one that was heralded by the “user choice” model of the mid-2000s.

Summary

Widescreen layouts don’t have to be just “widescreen” anymore–with responsive design, you can make a layout that satisfies most every visitor’s viewing needs. It’s a lot more backend work, but it’s definitely worth it!

Monday in the HTMLab

The Difficulty of Pricing Design Services

April 25, 2011 Robin 2 Comments

Doing web design as a career and not just as an (expensive) hobby is something I’ve been tumbling about in my mind for quite some time now. Instead of watching money go down the drain every month for hosting, and every year for my domain name, why can’t I use my skills to monetize my sites?

But it’s a harder decision than that. There are, as I’ve unfortunately found out, many roadblocks to making a success of yourself in web design, not the least of which is the knowledge required to do it. But for those who wish to pursue it as a career, there’s one final hurdle to jump: how to price your design/development services?

Today’s article focuses on the 4 most important concerns any would-be designer/developer needs to figure out before jumping into a career:

#1: People need economical services, not exorbitant prices.

As much as you might think you’ve trimmed costs, somebody will always want the price lower. These days, most people can’t afford to pay a web designer/developer much money unless they are part of a corporation. You have to find the balance in pricing between “selling yourself too short” and “never getting any clients.”

I found this very difficult when I was trying to price my designing abilities. I generally overshot what most people wanted to pay for maintenance services, and undershot the original layout and development price. Finally, I took to writing it all out: what I valued my coding skills at, what I valued my graphic design work at, etc. I came up with a list of prices I could live with:

HTML/PHP Coding (Page Coding Structure)

Each Page of Content: $10.00
Main Page Layout Coding: $12.00

Graphic Design of Page (Visual Layout)

Each large image (layout pieces): $20.00
Each small image (icons, buttons): $10.00
Full layout (1 page, with images and appropriate coding): $35.00

Layout Mockups

Each mockup beyond the first: $7.00

Are these prices exorbitant or economical? To be honest, I’m not sure. But I have strong reasoning behind each of my prices. Given that it takes me about 30-45 minutes to put together a fully-debugged page of anything, and 45 minutes to an hour to make small images of any good quality, I reasoned that 10 bucks covered that time investment that I put into creating a quality product. I then scaled up the prices on large images, full layouts, etc., using these price baselines.

You’ll need to determine what your own prices will be for yourself, taking into account how much money you need to make and how low on prices you’re willing to go. Since I want to help individuals and maybe a few small start-up businesses, I wanted to make sure my prices would be accessible; your price reasoning and money goals may be different.

2. How much work do you want to put in?

When people say “I need a web designer,” they sometimes mean that they need a little HTML-driven personal site, and sometimes they mean that they need a huge database-driven multi-user site. You have to determine for yourself what kind of work you want to put in. If working for the “big guys” fires your engines, then by all means go for it! Just remember that it will be a LOT more work than likely any of your personal web design projects have been.

You also have to take your lifestyle and current available time into consideration. If you want big-money projects, but web design is only a side business for you, you will likely run into trouble trying to keep up your time commitments. Web design is one of those things that you can dip your toe into or dive in completely and still be okay; however, you have to take on the jobs that are sized for your time allotment.

For me, personally, I am not experienced enough yet in design to where I’m comfortable pitching my skills to corporations and the like; likely, they would not even look twice at somebody like me who’s completely self-taught in this field. I’m more comfortable working with individuals who need personal sites and perhaps small business sites because I simply don’t have the knowledge yet to do large-scale sites. Neither do I have the time allotment in my schedule as of yet to completely devote myself to a web design career–I have many different interests and am enjoying pursuing them all. Thus, smaller projects work better for me overall.

3. Do you do design, development, or both?

This is one of the huge stumbling blocks I found when first trying to decide on pricing my designs. Did I want to do just layouts, icons, and buttons, or did I want to do just HTML and PHP coding? Or, instead, did I want to offer both types of design services?

For people who do one or the other very well, you may be better off to go ahead and specialize in either the graphic design side or the coding side of web design/development. If you have wonderful visual design skills, then you might have a great career in web graphic design awaiting you. Conversely, if you’re a “code ninja” and can make sites that function beautifully with scripts and databases, you can easily specialize in web development with no problem.

Now, if you’re a designer like me with some skills in both web design and development, you’ll likely want to offer both design and development services, so as not to shut out clients. I don’t do awesome digital illustration, nor do I write my own super-sleek web applications, but I can write HTML/CSS and design a page. These skills are still marketable, regardless of the methods.

4. Don’t sell yourself short—make a contract!

When trying to figure out how to price design services, don’t let anything slide by for free. Some unscrupulous customers may want you to do more than you first bargained for, such as saying “Well, I thought icons and buttons would just come with the layout design–can you go ahead and make me some?”, or “Hey, can you add about 5 more pages? I just realized I need more pages about these other topics.”

That’s why I suggest making a contract beforehand, so that both you and the client know exactly what needs to be done and how much money it will cost. Getting the contract in unalterable writing, either on paper or in a PDF file, keeps anyone from falsifying the contract terms later. That way, if the client wants you to do something extra that’s not on the contract, you can simply refer to the document and say, “I’ll be glad to do this for you, but we’ll need to add this to the contract and re-total up the price.” Clients changing what they want done is okay–it’s just that you need to be compensated for extra time and effort investment.

5. Paid by the hour or by the project? I think it depends on the situation.

There’s a big debate in the web design world about whether you should be paid according to the number of hours you’ve worked on a project, or whether you should be paid according to the size of the project you did. I thought that I was solidly on the side of “by the project,” until I started trying to price services myself. Now, I think it depends on the type of work you’re doing.

For One-Time-Only Projects, Get Paid by the Project

If you’re doing a one-time-only design/development project–say, if a client wants a layout and coding to go with it–then I’d likely choose to get paid by the project. Since you’re not going to be doing ongoing maintenance, and assuming you’re going to complete the work in as quick a time as possible, asking for payment based on the number of images you made and the pages of code you created seems to be a better fit than asking to be paid based on hours you worked.

For Ongoing Projects, Get Paid by the Hour

However, for continuous maintenance job on a website, I’d personally get paid by the hour. Since you’re likely doing daily to weekly maintenance, you need to be compensated for that time you spend each day or each week. It’s not really a “project” in and of itself–it’s keeping up the quality of the project by checking in on it and making sure things are still current.

This is, however, a personal decision that each web designer has to make for himself or herself. These are simply my reasons for choosing which type of payment style works best for me.

Summary

If you want to do web design/development as a career, you need to consider methods of payment, client relations, type of work done, and contracts. This all goes into how you want to price your design services. I hope this article has helped jump-start your own thinking, and given you some food for thought!

Monday in the HTMLab

How Does Web Design Affect The User?

April 18, 2011 Robin 3 Comments

We designers often feel saddled with the need to make our layouts compact and yet readable, everything beautifully-designed and yet fast-loading. And often, in the fever of design, we end up forgetting to make our pages actually usable (guilty as charged). When we’ve spent so much time with our graphic design creation, we tend to see it more as an extension of our pride and effort rather than an entity that needs to be intuitive and useful.

Based on this tendency, I have created a checklist for creating web designs that are both graphically pleasing and user-friendly. Bear in mind, most of my experience comes from my personal preference, but it also comes from many years of trial and error in web design. Beauty is still in the eye of the beholder, but usability is on trial today.

Color/Pictures

Do the design’s colors draw attention where you want it most?

In general, users’ eyes are attracted to the brightest or most interesting-looking color first. In your design, is there color beside or behind the element you want users to pay attention to first? If there isn’t, your users might be momentarily confused as to where to look first. (See point #3 for how to choose an interesting color that doesn’t take over the whole page.)

Do the pictures in the layout enhance the content?

When we design layouts, we can easily get too caught up in how pretty the pictures look in the layout, how well we’ve blended several pictures, etc. But we have to make sure that our designs’ pictures don’t take away from the content, but instead offer our “brand” or otherwise identify our site in the user’s mind.

Your graphics can be simple or complex, incredibly detailed or pixelated, but it’s got to make sense with the rest of the site. A grungy design can take away from a sleek technology-based site, for instance, and vice versa.

Do the colors “go” together?

Using complementary (opposite) colors in a web design can work to great effect when trying to draw attention to important elements (see point #1). But if there are way too many colors going on, the site design can cross the line between funky and tacky (like wearing too many patterns at once). Likewise, if your site has a monochromatic look, it may seem boring to users’ eyes. You have to throw at least something in there to break the tone-on-tone look, otherwise users won’t know where to look, or they will be turned off and navigate away from your site.

My fix: put in at least one contrasting or vibrant color into your layout, and for the rest of your color scheme, select colors that harmonize with each other. Then, you’ll have an “accent” color that draws attention to what you want to highlight, without overwhelming the rest of the page.

Content Organization

Is it easy to find site navigation?

I’ve seen it many a time–site navigation that is so darned tiny you can barely see it, and it’s tucked away close to the bottom of the page where nobody is going to find it. Place your navigation at or near the top of the page, and make it big and bold so your users immediately see it–otherwise you’ll have a lot of frustrated users on your hands!

Is it easy to keep reading the page?

Headings, subheadings, and a good amount of white space are essential, especially for long articles (such as the one you’re reading right now). If text is crowded together with no paragraph breaks, no headings, etc., then it will suffer from “Wall of Text” syndrome and no one will read it.

Is it easy to figure out where a particular page is located?

We designers can be awfully vague when we name our navigation links! Be careful that your navigation categories make sense and are immediately recognizable…even if this means typing a few more words into your navigation panel/bar than you’d really like to. (For instance: “Layout Info” is much more meaningful than just “Site Info”.)

Fonts

Let me preface this by saying that Web designers have long been trying to outdo each other by using the prettiest or most complex fonts they can find in their graphics. Nowadays, the font battles continue even on regular text in blog posts and pages, since designers have found custom font tools such as Typekit. (I still stick to the Web-standard Verdana, Garamond, Arial, Times New Roman, etc., but many designers have gone over to using custom fonts for everything.)

Fonts do, however, tell users more about our content than perhaps we intend; one funny chart about fonts’ true meaning (with a bit of bad language) puts this competition over fonts in perspective. (I read this chart and thought, “Finally, somebody else who can’t tell the difference between Helvetica and Arial!”)

While this lends a humorous angle to the “font wars,” we as designers do have some serious concerns to address when we choose fonts for our designs:

Is the font style easy or hard to read?

We often forget, in trying to make our site look inventive and cool, that the font actually has to be reasonably legible. Overly cursive, decorated, or symbol-like fonts may look really unique, but it makes it almost impossible to determine what letter is which, especially on small resolutions. When we choose fonts, we must make sure that our users can still read our content underneath the “icing” of the font. (Pet peeve: really cursive font that is set to a tiny size. STOP. DOING. THAT.)

Is the font size big enough?

Before you choose 10pt font for your body text, ask yourself: do you like looking at pages and pages of text in 10pt font? Most people will say that they don’t. Many web designers, however, resort to using 10pt font (and even smaller!) to try to cram all their content onto one page without the user having to scroll. This is not the best way to draw users to your site–if it’s hard to read, they’ll leave and not come back. If you want your user to enjoy your content, make your fonts big enough to read; after all, isn’t the content the reason you created the site in the first place?

Summary

Designing layouts is not just about creating a visual work of art–we’re also creating an INTERACTIVE work of art, one which our users must be able to navigate and use to their heart’s content. Being considerate and careful in how we use color, fonts, and content organization will make our layouts much more usable–which means more people will visit our easy-to-use, easy-on-the-eyes sites!

Monday in the HTMLab

The Cherry On Top–A Beautiful Header

April 4, 2011 Robin 3 Comments

Headers (not the PHP file “header.php,” but the content at the top of each web page) are the first things that load on any web page, and they are nearly as important as good content and good navigational design. It’s the first impression of your website, the first inkling visitors have of your style and website content even before they’ve read anything. Making your website’s header as impressive and lovely as possible is a priority!

My Personal Experience with Headers

When I was first learning how to do websites in the fall of 2003, the style for many sites I visited was the iframe style, which didn’t actually get much of a header–in fact, the site’s style was generally defined by the use of a big background image over which the iframe floated. What we would now call the “header image” was just part of the background image–it was usually a stylized-text version of the site’s name and purpose.

However, this began to shift over the next few years, as CSS became more and more popular for designing page styles. I began to see more designs featuring a long rectangular image at the top of the page, with columns of information displayed below. I began to design more CSS-based layouts around this time, which is probably one reason why most of my layouts tend to have that same 900 x 200-pixel header image at the top–I found something that worked and I stuck with it!

This was around the same time that header images started being called “header images” in the web design field. Having a beautiful image at the top of your page often meant that you got a bit more attention for your site, and to some degree it’s still that way today.

Headers Today

But web designers today are not confined to just having a specifically-sized glossy image at the top of their page. There are actually many ways to style a header these days, and I’ll go into some of those styles here.

Navigation as Header

Image credit: EvolvingOctopus.com

Some sites, with a more compact style, choose to have their navigational links as their header. They might have the name of the site in a pretty or cool-looking font, and then right out to the side of that, or even above their site name, they have their navigation links.

This is great for web designers who want a very clean look, or they want their navigation up and out of the way so people actually see their content rather than just web graphics up front. This is also fairly mobile-friendly design (I say “fairly” because sometimes the bar of links can be too long for mobile screens to display properly).

With this style, you want to be careful that your navigation links are larger and clearly visible so visitors aren’t hunting all over the page looking for your content. Making the navigation links have a background color or eye-catching graphic effect of some sort can draw attention to it better.

Content Samples as Header

Image credit: Riyuu.org, now GeekyPosh.com

Pictures? Featured content links? Author information? Yes, all this can go in your header if you want it. Some web designers will place little teasers relating to their content in their header, so that when your page is loaded, visitors get an immediate taste of what your site is about.

This is great for web designers who want to highlight certain sections of their website, or to connect their sites to their social networking activities. I’ve seen people use a feed of Flickr photos, post their latest Twitter status, have a selection of featured articles, or just have a beautifully-styled Author Info section that makes you want to know more.

With this style, you want to be careful that you’re not overloading your header section with a ton of information–just a few pictures, a few links, or a small blurb of info is all you need. Otherwise, your users will be suffering from info overload before they’ve even scrolled down the page!

Simple “Text as Header” Design

Image credit: Devlounge.net

I’ve seen a lot of designs going with this header style lately–just a CSS-styled site title, often in a cool font in a large size, and with a shadowed effect to the text. This style is minimalist, bold and to-the-point.

This is great for web designers who want their site’s name to be the most important thing on the page–especially if you’ve gone around the Internet and done a lot of advertising, you don’t want your visitors forgetting what site they’re on!

With this style, you want to be careful that you’re choosing a font style with some punch–“default” fonts like Arial, Verdana, or Times New Roman just ain’t gonna cut it. You want a great-looking font, since it’s taking the place of a header image. Using the CSS property @font-face, which I recently learned about by visiting this article and this article on Devlounge, you can make your simple text header really amazing!

Summary

Headers can be intimidating–you want to make your site look amazing on first impression, after all!–but don’t let yourself be locked into one style, thinking that’s all you can do. If you’ve thought of another way to organize your site’s header, go ahead and do it; let your Muse dictate. Who knows, you might come up with the next big Web trend!

Monday in the HTMLab

Laying Out Your Page: When Pencil and Paper Trump Keyboard and Mouse

March 28, 2011 Robin 1 Comment

One of the best things I’ve ever tried when trying out a new web design was to get away from the computer entirely. (Sounds weird, but it actually worked for me.)

My First Paper Layout Mockup

I was still fairly new to web design back in 2004; I was entirely self-taught, and was desperately trying to come up with something just as original and cool as the awesome designs I’d seen my Internet friends do. Problem was, I couldn’t figure out how to do what they did–how could I make the text of my page appear in this little bitty box in the middle of a beautiful background picture, like theirs? I couldn’t make heads or tails of the page sources I looked at, either. It was all just expanses of wild code, tangled and insurmountable…my creative mind was absolutely flummoxed.

Finally, in exasperation, I pushed away from the computer, got a sheet of notebook paper from one of my college notebooks, and literally drew out a couple of designs with the closest writing instrument to hand–a pencil. I knew I wanted the background image to be wispy and pretty, and I wanted the text to “float” on top of the background image. Even with my (very) limited art skills, I got down what I wanted, enough to know that I would need a scrolling box for most of my content, since the “box,” whatever it was made of, would be small.

I found myself referring back to this rudimentary drawing over the next few days, as I searched the Internet for “text boxes” and “scrolling boxes” and whatever other terminology I could try. Finally, a tutorial defined what I wanted (a text box that could float over a background image) as something called an “iframe.” This, coupled with the iframe tutorials I looked up later, revolutionized the way I designed sites completely. I learned how to create the background image in the graphics program I had at the time (Photoshop Elements 2.0), and, armed with the code, I began to create my first iframes layouts.

If I had never done that little sketch, I would have never been able to figure out how to make my site both easily updatable and trendy with current web designs of the day. I also would not have figured out one of the key elements of my design style: the less a user has to scroll to see vital site information, the better. Sketching out what I wanted was the first step–it was a new way to approach the problem, which in turn helped me research and eventually innovate.

Paper Mockups: Still Using ‘Em!

I still resort to using paper mockups when it’s just too much trouble to try to Photoshop something together, especially something that I’m not even sure will work. Good ol’ pencil/pen and paper are faster to pull up than Photoshop, for sure, and it’s easier to direct a pen precisely around the page than to move a laptop mouse cursor to attempt drawing something. Plus, something about actually touching a physical pen to physical paper makes me get into a better “designing” mood, and I end up with a better, more carefree result.

This is a recent mockup I did, for a possible new layout for WithinMyWorld.org (click for larger pic in new window):

Not only do you get a sample of my horrendous handwriting (LOL), but you get to see a bit of the design process–I’ve mocked out where the sidebar and content will go, including RSS feeds, links, and affiliates, as well as possible image-map navigation, and a “pretty wavy background” that, for now, only exists in my imagination. 😀 Also, I included a couple of funny hints to myself, in the vein of “(maybe some fish?)” and “OMG BUBBLES!” 🙂 I think you have to have a sense of humor when you’re putting mockups together–it makes the process a lot easier to manage, at least for me.

Now You Try!

Try the website sketch idea when you’re stuck on a layout idea–it’s amazing what a pencil and paper can do in this day and age. You might just come up with something that you hadn’t thought of…like using hand-drawn bubbles as an image map. 🙂

Sunday in the Wild

Two Problems Tackled, One Remains!

March 20, 2011 Robin Leave a comment

WOOT! I finally (FINALLY) figured out how to make my header image stay visible when navigating to other post pages and other standalone pages. Also, I figured out how to take away the silly “Posted on” and “Category” lines from my standalone pages–they didn’t need it, after all. YAY for victories, however small!

One problem remains: how to make comments work. Currently, I’m tinkering with the comments template, but there’s a lot of things I need to add to the stylesheet in order to make comments look right, as well as function right. Sigh. Coding awaits.

Just wanted to let my viewers know that I’m still working on this theme and trying to make it right. 😀 And at this rate, I hope to be 3 for 3 soon!

Monday in the HTMLab

Multiple Sidebars: Useful Design or Info Overload?

March 14, 2011 Robin 2 Comments

One trend in web designs to have not just one vertical sidebar, but two–or even three or four if page space allows. This columnar design hearkens back to the days of “table” site designs, where all the pieces of the layout as well as the content were aligned in table cells rather than CSS-styled divided layers. (Even though tabular web design has been pooh-poohed since the advent of CSS-only designs, we as web designers apparently haven’t traveled too far from our roots, especially when you look at dedicated news pages full of content “above the fold.”)

Some Examples

Note: I’ve highlighted the left sidebar in red, the content block in yellow, and the right sidebar in blue in all these screenshots.

(click for larger image in new window) This example, from CNN.com, shows lots of content crammed into a small space, and yet it still manages to be readable because of a good bit of white space around each element, as well as clear labeling.

(click for larger image in new window) From Kiss 95.1‘s website, you can see lots of pictures and links on the sidebar, and the content space is almost the same size as the sidebars. But it still manages to keep it organized with white space and iconic navigation.

>
(click for larger image in new window) On Ordinary Miracles (a favorite blog of mine to visit), the designer has incorporated two sidebars, but they don’t feel terribly clogged with information. Again, white space is the key.

Trying My Hand at It

I created a very simple (color blocks and dummy text) multiple sidebar layout for my own knowledge–available for viewing here. In my design, the two sidebars are placed next to each other rather than each beside the content block, but you still achieve the look, seen below:

(click for larger image in new window) Using color-blocking to show where each column begins and ends, you can see how the layout is divided up into five sections, 3 of them occurring side-by-side.

Pros

Multiple sidebars can give maximum content display space. Very little space is wasted, with links and excerpts everywhere, an images and clickable video starters sprinkled between blocks of content. It’s all very efficient, and users don’t have to scroll too much to find what kind of content they are searching for.

Two or more sidebars can also make ads, blogrolls, and linkrolls more plausible for a site that already has an overcrowded single sidebar. With another sidebar, you can put important content back up toward the top of the page where users can see it.

A layout with more sidebars also makes use of more screen space. With more and more users viewing sites with widescreen monitors, that’s a LOT of web design real estate you can play with. A wider site can mean bigger pictures and font, more eye-catching content, and generally a better user experience.

Cons

Multiple sidebars can make pages look overcrowded with information. Sure, the only consequence for a user is to lose a few seconds clicking the Back button if he or she hits the wrong link, but what about the frustration index? The first rule of web design I learned is that when a page is too difficult to navigate, the user will leave and won’t come back. All this information clustered right near the top of the page might be easy to see, but it also runs the risk of being overwhelming and confusing.

Two or more sidebars can also be hard to code effectively. In my example, I had to use a containing divided layer, floated to the right, to hold the two sidebars, and floated them left and right inside it. I’m honestly not sure how browser-compatible that is, but aside from using the much-maligned table, that seemed to be the only way I could do it.

What I Typically Use

I find myself favoring one sidebar for most web designs, either for small blocks of content or for the site’s main navigation. Sometimes, if I need more space for more generic navigation (Home, Guestbook, or Updates, for instance), or for external links (such as social networking site links), I’ll create a small bar of text or icon links across the top of the page (usually under the header image and above the main content block and sidebar). I find that this maintains the necessary white space that a typical user’s eye needs for easy information processing (especially if you’re like me and tend to write a lot on a page!).

However, I could see the possibility for using a second sidebar on my page, especially if I put ads on my page. Affiliates and other link exchanges could also benefit from a second sidebar, should I ever choose to do so.

Summary

Multiple sidebar layouts are plausible and doable in modern webdesign, but that doesn’t mean they are suitable for every page. Think about what your site really needs before designing a multi-sidebar look–do you really need all that content space right near the top of the page, or could you get away with just one sidebar instead?

I hope this article has given you a bit to chew on concerning multiple sidebars as part of the user experience!

Monday in the HTMLab

Fast Loading Times: A Personal Trademark

February 28, 2011 Robin 3 Comments

Since I began designing and coding websites in the fall of 2003, much has changed on the Internet. Websites can now include more scripts, plugins, and images; websites are just simply BIGGER than before high-speed Internet and social media became more widespread. But I still monitor the file sizes for my layout graphics, post images, and Web pages, because I still like my pages to load quickly, and I still consider loading speed to be important.

Why I Concern Myself with Loading Speed

I suppose part of my design style got stuck in the pre-high-speed-Internet era, since it has only been since winter 2013 that I finally could get any kind of high-speed Internet at home. But if we designers and developers take the time to learn how to make our sites load quickly, even on slow connections, that makes it more likely that our content will be read, and hopefully that visitors will return–something we all want.

For instance, many people now take in Web content through mobile connections, which can be slow depending on individual data plans and signal strength in the area. Why choke that slower connection with unnecessary “junk” on our layouts, or in our files? Why not polish up our sites so that even on a weaker strength mobile connection, our content still loads quickly?

Ways To Optimize Loading Speeds

#1: Keep images to a minimum.

One of the main ways I streamline a page is to edit down my images as much as possible, including just enough visual detail without going overboard on file size and complexity. With mobile web usage on the rise and flat design theory currently in vogue, many other designers are moving toward this “less is more” concept. Many things which previously could only be achieved with images can now be accomplished with HTML special characters, CSS styling, or icon fonts, for instance. (And there are quite a few other CSS3 and HTML5 tricks, which can reduce or even eliminate the need for images altogether!)

#2: Divide up the content into smaller pages.

Another way I streamline is to divide long pages up into smaller pages and make a sub-section out of them. Yes, that means more links to click or tap, but it also means your users don’t have to load huge pages of material and waste time scrolling around trying to find what they want. Just make sure you provide clear navigation paths, like breadcrumb navigation, so that users can easily find their way around your site’s content!

#3: Compress images.

Compressing your images may seem like an unnecessary step, but when you’re trying to save kilobytes (or even megabytes) wherever possible, this can REALLY help! Choosing the right type of image compression, however, is key. (If you’ve ever tried to save something as a Web-Color-Restricted GIF file, you’ll know what I mean by a “grainy GIF.” Ugh, gives me nightmares.) See my post about JPG, GIF, or PNG file types to see more about which compression style is best for the type of image you’re making.

Summary

With just a few simple changes to the way we construct our pages, we can make our sites load super-quick on just about any connection speed and device. It’s worth the time we spend behind the scenes so that our users have a much better experience visiting the fruits of our efforts!

Monday in the HTMLab

What’s a footer for?

February 21, 2011 Robin 2 Comments

Most are ignored altogether. Some are sparsely populated with a line or two of text. A rare few are overstuffed with information. What is a footer, technically, and what is it for in web designs?

A footer is simply the bottom of your web page. (In some PHP designs, the footer is actually in a separate file, called either “footer.inc” or “footer.php”, and included using the following code: <?php include(‘footer.php’); ?>)

Generally speaking, web designers won’t put a whole lot of stuff in the footer, since it’s at the bottom of the page and most users of your site aren’t going to scroll down that far. But lately, there’s been a trend in web design to stuff one’s footer section with content–anything from author information to a full sitemap, from a collection of photos to a selection of favorite links.

I took screenshots of various styles of footer-formatting to show what I’m talking about, going from smallest to largest:

Mini-Footer

(click image for larger version in new window)
This footer, from Infektia.net, has tiny text and just a few helpful links to the user. This matches with the overall minimalist vibe of the layout and doesn’t compete with the content for the user’s full attention.

Styled (But Still Small) Footer

(click image for larger version in new window)
PacificDusk.org’s footer contains a tone-on-tone world-map image (left-aligned), as well as a funky site slogan and a few well-chosen, helpful links. This gives a punchy, graphic finish to the end of the webpage without being overly detailed.

Bigger, Well-Spaced Footer

(click for larger version in new window)
Though this footer from Kloud-Nine.com is bigger vertically than the other two footers we’ve looked at thus far, it’s still simple because of all the white space around each of the elements. And, surprisingly, the bigger text size offers readability and simplicity as well!

Super-Detailed, Super-Organized Footer

(click for larger version in new window)
Detailed imagery and clearly-delineated content boxes makes this footer from a previous version of EvolvingOctopus.com lots less confusing than it could be. Even though there’s a lot of information present, it’s not overwhelming because it’s organized attractively.

My Personal Footer Style

I’m personally not a big fan of stuffing footers with lots of info, because I often find myself wondering, “How many people are actually going to look at this stuff in my footer?” I would rather put all that cool content into a sidebar where it is much more easily visible when a user first loads my page. But that’s a personal decision on my part, part of my style of building websites. As I get better with web design and better with content management, I find myself branching out into new styles, and one new style may just be a larger footer than I’m used to!

Footer Styling/Content Tips

If you like the idea of putting content in your footer, I would recommend making it simple–a small selection of links that are easily readable, for instance, or thumbnails of some photos that are significant to you. Crowding a footer full of information can be visually overwhelming, but an undesigned footer can be an unsatisfying end to an otherwise cool webpage. Keep it in balance!

If you’re not putting content in your footer, a “back to top” link in your footer can be very appropriate if you usually have long pages full of information. (I generally put a “Proudly part of WithinMyWorld.org” link in my footer, and perhaps a few other links, but I don’t add much else.)

Lastly, whatever you’re putting in your footer, be it links, pictures, content feeds, etc. make it clearly labeled and organized. Your users will thank you!

Summary

As the above screenshots show, footers can be anything you need them to be on your website. For taste purposes, I like a clean and uncluttered-looking footer, but they can be as big or as small as you like. Whatever you do, make it meaningful to your website and easy to read!

Monday in the HTMLab

Navigation Placement, Part II: New Ideas to Try

February 14, 2011 Robin 2 Comments

In last week’s post, we looked at 3 traditional navigation placements in layout design, and briefly discussed the pros and cons of each. But there are some tricks to changing up and decorating the navigation itself without making it too hard to use, as you’ll see!

Idea #1: Mix in a few icons as well as text links.

Font names, from left: Webdings, Wingdings, Wingdings 2, Wingdings 3, Stateface, Socialico, Nymphette, Entypo, Bergamot Ornaments, Modern Pictograms.
Navigation doesn’t have to be just plain, boring text links–icons are a modern webdesigner’s friend! For instance, you could use the Facebook icon shown above to link to your site’s Facebook page, or you could use the speech bubble icon to show where users can leave comments, etc.

Most designers rely on icon fonts for this; Modern Pictograms, Socialico, and Entypo (all linked above) are some of my favorites, and there’s a more comprehensive list here. To use your icon fonts, you can either link and style them directly in your CSS using the CSS property @font-face (more about that here), or you can use a graphics-editing program to type out each of your needed icons and save them as individual images. Just make sure your icons all have transparent backgrounds so that they blend in more seamlessly with your layout.

(Note: I included some ornamental icons as part of the above graphic as well, for the purpose of dressing up your navigation if you don’t like the idea of just having clickable icons and no text. Icon fonts are multipurpose!)

Idea #2: Keep similar links together.

A long list of unsorted links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about grouping like pages together within your navigation instead?

An example would be my City of Heroes site, Skies over Atlas–I placed all my site content links going down the left side, and used a horizontal navigation bar underneath the header image for my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. Even though the navigation is in the same general area on the page, one part of it is devoted to site content, and the other part is devoted to user interaction.

You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.

Sorting your navigation this way can help your user more easily pinpoint what area of the site they wish to go to. Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!

Idea #3: Combine your header and navigation for a super-streamlined design.

For the tidiest, most mobile-friendly design, pull your navigation into your header space–in fact, just a site logo or site name text plus a horizontal navigation bar can BE your header! This way, your navigation is up where your users see it when the page first loads, and it leaves more room for your content so that perhaps your pages won’t even scroll so much. Your navigation bar can then be colorful or even patterned to play off the colors in the rest of your design, drawing attention to it without making it huge or heavy with text links.

Additionally, using social media icons alongside text links in a horizontal navigation bar at the top of the page can highlight your navigation further, bringing the user’s attention to it as the rightful central hub of your site. As a user, I love seeing an organized navbar like this; I know I won’t have to worry about searching the rest of the page for info I need!

Summary

I hope the ideas in this two-part series have started your brain percolating about navigation. It may sound like the most boring part of your website, but with these tricks, it certainly doesn’t have to be!