Category Archives: Monday in the HTMLab

All about web design and development, and my triumphs and defeats therein.

Monday in the HTMLab

Liquid Layouts vs. Ice Layouts

1 Comment

liquidvsice

Even though most of the Web today has gone to using liquid layouts (also known as “responsive design”), the fixed width “ice” layout style is still quite popular. Today, I’ll demonstrate both layout styles, as well as give advice on which style is best for your website.

Liquid Layout/Responsive Design

Click for Liquid Layout Interactive Example in New Window

Pro: Expands and contracts to fit browser width

Whatever size your user’s screen is, whether it’s a smartphone, tablet, or laptop/desktop, the liquid layout style will stretch or compress to fit it. You don’t end up with acres of space to either side of the layout, and you don’t end up having to scroll side to side to see all the content on a tiny screen.

Con: Distributes content unevenly and haphazardly

If your reader has a really wide screen, they’ll be jerking your head back and forth to read the long, extended one line of content going clear across the layout. You also might have large blocks of white space between layout elements, giving the design a chaotic look.

Ice Layout

Click for Ice Layout Interactive Example in New Window

Pro: Allows for perfectly-spaced designs

No need to worry about whether your content will be interrupted by huge blocks of uncontrollable white space! Ice layouts give you the ability to perfectly control where things will be placed, whether it’s images, lists, forms, content boxes, or anything else.

Con: Requires side-scrolling or zooming for smaller screens

If your user is viewing your site with a tablet, for instance, and you’ve created a beautiful desktop design, an ice layout will require a lot of zooming in and out to read the content. It’s annoying and time-consuming, and most users simply won’t bother.

Which Kind Should I Use?

Use Liquid Layout If Your Site Is…

  • Based on visual media
  • Meant for mobile users primarily
  • Not dependent on big layout graphics

Use Ice Layout If Your Site Is…

  • Based on text
  • Meant for laptop/desktop users primarily
  • Dependent on big layout graphics

Summary

Though liquid layouts seem to have won the day for now, you can most certainly still use ice layouts in this age of responsive design. You just have to know when to use fixed-width and when to use a variable-width style!

Monday in the HTMLab

The (Necessary?) Evil: the Pop-Up

1 Comment

thenecessaryevilpopup
Most of us think of pop-ups the same way we think of bugs–annoying or dangerous little pests, the vehicles for drive-by downloads of spyware or viruses, or the tools of the most callous ad-using web designers. Pop-ups, above all, block a user’s experience of an individual website, and thus they can be unnecessary and irritating interruptions.

But pop-ups, as bad a reputation as they have, CAN be used for good purposes. While the fad of using pop-ups as a layout option may be passe, there is still a legitimate call for the miniaturized window in web design, as we’ll talk about below.

Bad Pop-Ups

The usual breed of pop-ups are used in web design for ads, inconvenient surveys, or even unscrupulous downloads (whether you’re aware of them or not). These pop-ups:

  • Look like cheap ads (various bright colors, huge, primary-colored text, animated GIFs, etc)
  • Appear at inconvenient browsing times
  • Appear without warning when a link is clicked

Good Pop-Ups

What I term “good pop-ups” can contain content that doesn’t necessitate a full webpage, such as a feedback or contact form, a listing of affiliates or joined sites, comment or guestbook forms, etc. Good pop-ups:

  • Contain small amounts of easy-to-scan text or photo content
  • Match your site’s layout style and color scheme, if possible
  • Appear after sufficient warning (i.e., “link opens in new window” or “pop-up will appear”)

Other Important Notes about Pop-Ups

Firstly, you don’t want to overuse pop-ups in your layout. A good rule of thumb, I’ve found, is to use no more than two instances of pop-ups in an entire site, maybe using one as an announcement platform and one as a form for contacting or subscribing.

Secondly, pop-ups should not cover the whole screen. Since you can direct the size and positioning of pop-ups, make sure you are placing an appropriately-sized pop-up where it will not be obtrusive to the rest of your design and content. You want your user to see it, of course, but there’s nothing a user hates worse than having to deal with an unexpected stumbling block in reading a site’s content.

Thirdly, do not make your design hinge on your pop-up. Since many users now have pop-up blockers and ad blockers in their browsers, make your content available both as a pop-up and as a regular page, so nobody misses out on your content.

Summary

Pop-ups have long been vilified on the Internet, but by using them smartly and carefully (and not depending on them too heavily), you can include them without annoying your users. Happy readers are returning readers!

Monday in the HTMLab

Designing for Mobile Devices

4 Comments

designingformobiledevices
Are you stuck on how to create a good-looking and functional mobile device layout for your site? Then you’re not alone–when you’re trying to design for a much smaller screen than you ever thought possible, it can feel as though you’re trying to cram your entire website into 480 pixels of space!

However, we independent designers can take cues from social media sites; Facebook, Twitter, and other sites manage to maintain their site’s “look,” while still making their design appropriate for a mobile device. How do they do that? Read on to find out!

Think small for site logo and content

Instead of doing a huge background image or a great big header image with your site name, a simple icon and text declaring your site name should be enough for a mobile design. Better yet, use CSS to style a text version of your logo so that mobile users don’t have to wait to load a weirdly-sized image.

Also, when designing how your content should display, imagine a space about 300-400 pixels wide, and about the same in height. Your content must fit comfortably within that space, in big enough font that mobile users can read on their small screens.

Choose text and background colors that contrast well

When someone is using a mobile device to view your website, you don’t want them having to squint and turn their phone every which way trying to read your content. Make it easy on your users’ eyes! Using a white background and black text is a classic choice, but feel free to choose any one very light color and one very dark color to use.

Use icons rather than text

Whenever possible, change out text links for icons. Not only is it space-saving on your smaller mobile-friendly designs, but it is also less tiny text to read, which will lower your users’ frustration level drastically. (Also, make the icons big enough to tap!)

Make your page easy to tab through using down arrow key

For those who have touch-screen smartphones, they will be able to scroll down with a swipe of their fingertip down the screen. However, you also want to make sure that your non-touch-screen mobile users can use the down arrow on their phones to “scroll” efficiently. Don’t crowd too many links or pics on one mobile-friendly page–that’s just more for the down arrow key to highlight. (This brought to you by a former non-touch-screen user)

Summary

With these tips, you can make a compact, easy-to-read, functional mobile design for any site. It might look a bit bare-bones on your big screen, but trust me, your small-screen users will thank you!

Monday in the HTMLab

Should My Designs Be Deep and Wide?

2 Comments

shouldmydesignsbedeep
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

    Puzzling Through PHP, part 1: Give Variables a Value

    1 Comment

    puzzlingthroughphp1
    PHP is a strange animal, as I’ve noted before. And, since most of my webdesign and development experience is self-taught and I’ve mostly worked with front-end design in HTML and CSS, PHP has been more of a frustrating puzzle than a new horizon in my coding skills.

    Because of this, I’ve run into a couple of PHP fails in my attempts to teach myself this new language. That story follows!

    Problem: Can’t Search My Own Database

    I couldn’t understand why my variable-laden code for a simple database search wasn’t working, since I had gotten the majority of the code off a fairly reputable PHP code website, and I thought I’d input all the variables correctly. But the code continued to return an error, saying that the database was not “a valid result resource.”

    Debugging with a Good Friend

    One of my good friends is a computer programmer by nature, and though he knew little of PHP at the time, he was able to express one of the fundamental truths of PHP in a way I could understand it. “Basically, PHP sounds like a function-based language,” he said. “You tell it things to do–functions–based on the variables and values you give it.”

    What this meant to me: if the variable isn’t right, or you haven’t got a way to give the variable any value, you’re in trouble! Certainly I had already run into that problem when I was trying to make the PHP code search the MySQL database; the darn thing just wouldn’t budge, and now I knew at least one reason why.

    Solution: You MUST Be VERY Specific When You Work with PHP

    Once I finally understood that I had to give PHP a variable’s value before I could ask it to make that variable jump through flaming hoops, one of the main problems in my searchable database became clearer: somehow, one of the variables that related to the database was not being given a correct value. Otherwise, what else could be making the database an “invalid result resource?” (We eventually discovered that the database connection itself was to blame–I had mistyped ONE comma as a period, and the whole code had gone bonkers as a result.)

    It may seem like common sense to people who have already mastered PHP and MySQL, but for a non-mathematical person who would have preferred to leave variables back in algebra where they belong, it was a very tough hurdle to jump. Even realizing this small piece of information was a victory.

    Whenever you work with a highly technical language like PHP, remember that it is unforgiving of most errors. Double- and triple-check your code, testing it often, to make sure your changes actually work. And please, for the sake of your eyeballs and blood pressure, make sure your database connection works so that your database variable has a proper value!

    Next Up: The Triumphant Fixed Database

    Thankfully, this wasn’t the end of the story! Head on over to Part 2 of this article to see how we transformed this broken database script into a functioning one! (Samples of PHP code, oh my!)

    For More Info:

    PHP Variable Explanation @ W3Schools.com (low-tech explanation)
    PHP Variable Explanation @ PHP.net (high-tech explanation)

    Monday in the HTMLab

    Scheduling Posts Using WordPress

    1 Comment

    schedulingposts
    One of the things that first drew me to using WordPress is the ability to schedule posts. Since I had horrible 26.4 kbps dial-up internet at home when I started my blog in January 2011, I had to grab Internet time at libraries and coffee shops as I could. Thus, scheduling posts worked beautifully for me, enabling me to write posts at home and upload them for later publishing to keep my blog active. And now, even though I have fast internet at home, scheduling posts still works for me–I can work ahead and still space out my posts across days. Awesome!

    How to Schedule Your Posts

    When you’re on the Add New Post page of your WordPress Dashboard, look over to the right side of the screen. A module will be on display there (shown at left), with options to save your draft, discard what you’re working on, etc. One of the options reads “Publish immediately.”
    You can click the “Edit” option beside the text “Publish immediately” to expand a form with text boxes (shown at left). This will allow you to change the post’s publish date and time.

    When you first open the Scheduling option, the current date and time will be in the text boxes. In this screenshot, it was May 4th, close to 2:00 pm (WordPress has a 24-hour clock, so keep that in mind!)

    Now, all you have to do is fill in the date and time you want your current post to appear!

    I have deliberately highlighted the date and time text boxes to call attention to the changed publish date and time: May 16th, 2011, at 9:01 AM.

    Click the white OK button, and the text in the box subtly changes to “Schedule for: May 16th, 2011, at 9:01,” as seen at left. (This is how my blog posts magically appear at the same time every day, whether I’m actually awake/at my computer or not–another great function of scheduling!)

    Why Scheduling Posts is Awesome

    1. You can schedule dozens of entries well ahead of time. This is what I’ve done with my Friday link posts–I’ve scheduled them several weeks in advance, since they are easier posts to put together. This means less writing overall for each individual week.
    2. You can get around having limited Internet access or blogging time by scheduling the week’s posts in advance. I generally upload the coming week’s posts on Saturday or Sunday of each week, so I don’t have to worry about it during the week.
    3. You can have posts lined up for publishing even when you’re going on vacation or will otherwise be away from your computer. This is a good option if you want a week or two without having to worry about blogging, but you don’t want your blog to lie un-updated for all those days.
    4. You can post announcements ahead of time, right when they need to be posted (such as a warning an hour before an online contest closes, etc.). Timely updates ensure your visitors that the site is being watched and updated regularly, and is a great interactive tool.

    Summary

    WordPress makes it easy to do posts in advance, for whatever reason, with its Scheduling option. Try it out sometime–it’s certainly been a lifesaver for me!

    Monday in the HTMLab

    Blog Content, Ahoy!

    1 Comment

    blogcontentahoy
    Each week on this very blog, I’ve been challenging myself each week to write good content for my blog posts, so that people will want to read more of my writing.

    But what does “good blog content” mean? How do you write an article that people actually want to read? Here’s what I think makes a great article:

    It’s Well-Informed and Well-Researched

    Good blog content is the result of study AND experience with the subject matter. When you include not only your own thoughts, but reference the thoughts of others, you have a much more interesting article, no matter how long it is. (In fact, a concise, well-thought-out article is MUCH better than a long-winded one!)

    It’s Thoughtful and Respectful

    A good article is balanced, not biased. It shows that you’ve taken time to explore your subject matter from many angles, and you’re not disparaging any one opinion just because you personally don’t like it. (This is especially key in religious or political posts, but any article benefits from a respectful tone.)

    It’s Personally Connected

    Articles without some sort of emotional/personal investment in the subject matter also lack one other thing: READERS. We all write more compellingly when we care about a topic, and that kind of attitude toward a topic will draw people in to read what you have to say.

    It’s Got Pictures

    Photos, graphs, charts, or any other visual aids you can put in to accent your content is key. But I’m not advising you to fill your article full of pointless clipart–choose images that help explain your points, or mean something in the context of your article, especially if the article is long. This also helps visually break up your writing so your article doesn’t suffer from “Wall of Text” syndrome.

    There Are Subheadings and Headings

    Headings and subheadings, like the ones in this article, help break up long paragraphs just like visual aids do. Also, if you write your headings with summary words (like I’ve done in this article), readers can also scan your post for its content much more quickly.

    You’ve Put Links In

    Since we blog authors are writing for the Internet, linking to others’ opinions has never been easier. When you provide links, it’s clear that you’ve “done your homework” about this topic, and you can give readers a list of good sites to go if they want to know more. (Just make sure that your link text isn’t just “click here,” and you’re good!)

    Summary

    Blog content is part writing and part designing–you have to write content that IS interesting, but you need to make it LOOK interesting, too. These 6 tips will help you shape your own content so that readers will want to read and talk about what you’ve said…which is a blogger’s dream!

    Monday in the HTMLab

    The Difficulty of Pricing Design Services

    2 Comments

    pricingdesignservices
    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?

    3 Comments

    affecttheuser
    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

    Bibbidi-Bobbidi-Boo with CSS

    3 Comments

    bibbidibobbidiboo
    For this post, I’m doing something a little different–I’m going to show, rather than tell. CSS is a magic wand for your HTML structure, but rather than go into the realm of technical details, most of which I’m not totally familiar with (LOL), I’ll illustrate just what CSS can do for your pages.

    Without CSS: A Sad, Sad Layout Indeed


    Click to view “Layout Without CSS” (in new window)

    See what’s missing? The color, the organization–pretty much everything that makes a layout is not present, even though the divided layers are still there. Without CSS to direct how the divs appear and how they line up on the page, it’s just a linear, one-after-the-other presentation, along with the horrid default color scheme. The sight of bright blue links that turn purple when you click on them…ooh, it gives me the creeps. LOL

    With CSS: It’s HTML, Now With Less Fail!

    Now, see what happens when just a few touches of CSS are applied to the SAME EXACT layout!


    Click to view “Layout With CSS” (in new window)

    Look at all that has been added! A background image is present, as is a header image (like we talked about in last week’s web design article); the navigation links are styled more boldly and stand out when hovered over. Not to mention that the welcome and the “about this page” section are now placed side-by-side, taking up less vertical space. Most of all, the layout is pulled together with a tone-on-tone color scheme, blending with the header and background image to make a basic (but pretty) design. (Now, CSS can’t make your images for you, but it can sure position them and make them repeat! :D)

    Seeing this drastic change is quite like watching your own Code Fairy Godmother wave her wand and transform your ragged HTML structure into a sparkling CSS layout. Now you, too, can go to the webdesigners’ ball!