Category Archives: Monday in the HTMLab

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

Monday in the HTMLab

Affiliates: How to Start Getting Traffic to Your Site

2 Comments

Making a site for yourself is great, but if no one comes to visit, what’s the point? *ahem*…*directing your attention away from my affiliate-less blog* To get visitors, you need people to link to you and people to link to…this is where the affiliate program comes from.

What is an Affiliate?

An affiliate is someone with a site on the same or a similar topic as yours, who has agreed to link to you in a special, privileged fashion (first-page or front-page display). To become affiliates with them, you have to offer them the same courtesy.

How to Get Affiliates

First, do a search for your site’s topic. For instance, if I wanted to find blogs about music, web design, Biblical interpretation, or gaming, I could easily search those topics and find sites about those through any of my favorite search engines.

But don’t limit yourself to just the specific subject match–look for sites whose webmasters seem worth getting to know, too, and link to them as well. One other way to begin getting affiliates is to send emails to webmasters whose sites you visit frequently and enjoy; if your site is along the same lines, they might be willing to give you affiliation, or if you’ve already made a friendship with them, that might help, too.

If you’re doing a search, you’ll next need to scan through the search results for sites that don’t sound spammy or created just for pay-per-click ads. There are a lot of fake blogs out there, and if you can skim through those or avoid them, you’ll save yourself some time. Telltale marks of a “fake” blog are overly-generic blog themes, with content that sounds either like it’s written just to advertise, or sounds like a bunch of non-sequiturs strung together.

Once you’ve come up with several sites that seem like they’re worth checking out from this initial search, thoroughly review each of them. Check content to see how theirs compare to yours; make sure they haven’t stolen any content or images, and that their site has been updated recently (within the last month at least).

Now, if you like what you see, contact the webmaster with a politely-phrased email, telling them your site’s name and topic, your Internet nickname, and your URL, and also sending them a link to your link button image if you wish. Ask if they are accepting affiliates, and say that if they are, you would be glad to be one.

Can’t Affiliate? Link-Exchange!

If they don’t want to affiliate, don’t despair! You can always link-exchange instead. Link-exchanges are often looked at as inferior to affiliation, but you’re both still putting each other’s link on your site–it’s just on a dedicated “Links” page rather than the front page. It’s second only to affiliation, and can still get your site name and URL out there for others to enjoy! Exchanging links with another site can be the opened door to affiliation sometime in the future, and meanwhile, you’re both helping each other with site recognition.

Summary

Linking to other similar sites is a great way to start building community with those who love the same content, as well as getting more recognition for your own work. This is where real Search Engine Optimization begins–with good ol’ keyboard-work and a little savvy networking.

Monday in the HTMLab

Writing Your “About Me” Page

Leave a comment

It always feels a little narcissistic, putting together an “About Me” page. A whole page just about yourself? What do you put in for interest’s sake, and what do you leave out so as not to make it too long? What can you put in safely, and what would get you possibly into identity-theft trouble?

As a webmaster and designer since 2003, I’ve been doing “About Me” pages for my various websites for a number of years, but I’m certainly not the absolute authority on them. I have, however, had a lot of experience with writing, and that has stood me in good stead when creating personal descriptive pages. The following tips are all bits of advice that have helped me over the years.

A Few Do’s

  • Do include some basics.

    Your Internet nickname (possibly first name), your age, gender (if you wish), and the country, state or province you live in is always appropriate for an About Me page. Including your career field and a few hobbies is also interesting for users, since it gives them a small window into what kind of person you are. And a random, small list of a few things you like will further illuminate your personality without being too in-your-face personal.

  • Do format it beautifully.

    Whether you’ve got a long About Me page like I have (heck, mine’s almost an autobiography, LOL) or a short one, format it and section it off with headings, subheadings, and otherwise styled text. Nothing is more overwhelming than seeing a wall of same-styled text running down your screen. Break your content into paragraphs by subject (career, likes/dislikes, web design experience, etc.), or break it down by the time in your life that it happened (middle school, high school, college/first working years, etc.).

  • Do choose your images carefully.

    If you’re going to include images (more about that later), choose them carefully. Select colorful, sharp photos or images that directly supplement the text of your page, so that the images contrast well and provide visual interest for your readers. And don’t let the images overwhelm the text–the About Me page is all about the written content, unless you’ve done a complete pictorial About Me page (which is entirely possible!).

A Couple of Don’t’s

  • Don’t post anything you wouldn’t want your boss/religious leader/parents to see.

    Since the Internet is open to anybody, it can feel as though you’re free to air all kinds of dirty laundry to whomever may come by. But a few grounding guidelines can save you from unintended disasters. For instance, if you’re going to reference any family members, friends, or co-workers in your About Me page, best to keep their names out of it; if you’re going to talk about any personal hobbies that might raise a few eyebrows at your job, worship center, or home, you might think about making a password-protected page for that, or just not writing about it at all unless your site is directly associated with it.

  • Don’t post absolutely everything about your identity.

    For instance, never post your last name on an unprotected webpage, and it may be safer even not to use your real first name. Posting your exact location (city, street name, etc.) is also a safety no-no, due to Internet creeps. Lastly, posting your birth date (full date, I mean) is downright dangerous, sadly enough–keep that off your personal page. And I don’t think I need to say much about bank account numbers, Social Security numbers, phone numbers, etc.

  • Don’t post a picture of yourself that’s too detailed.

    As I was talking about images earlier, I mentioned that you should choose images carefully. Not only should they look great alongside your text, but they shouldn’t be complete facial portraits. Perhaps an artsy-style Photoshop avatar of your picture, or even a cartoon version of your face, but for safety reasons, leave the real profile picture to Facebook. I hate that we have to be this careful, but enough crimes have happened to prove that one cannot be too cautious when posting things about oneself on the Internet.

Writing Style

When you’re writing an About Me page, you need to consider the type of site you’re writing the page for.

Is This Site for Business/Work?

Doing a business- or work-related site means that your About Me page’s tone should be professional, cool, and collected, and your grammar, sentence structure, and spelling is exemplary. This is the place to state your career skills, job aspirations, and personal vision for yourself. This is not the place to describe any fetishes, quirks, or personal problems unless they directly relate to your work and/or career.

Is This Site for Community/Social Organizations?

A community-oriented or more social-oriented About Me page warrants a little more familiar tone than the all-business About Me page. Your tone can be more conversational and friendly. This is the place to show why you love this particular community or social group, why you’re a part of it, and what parts of your life mesh with it. This is not the place to brag about how much you do for the group, how much you hate certain people in the group, etc.

Is This Site for Personal/Leisure Use?

More personal and leisure-time sites allow you to be the most familiar in tone on your About Me page, since you’re likely letting them into your life with each page of content on the site. This is the place to tell a little more about your personality, your everyday life, and your life passions. This is not the place to list tons of accomplishments, awards, or other shameless plugs–it comes off as bragging.

Working with Content

Keep in mind that your readers are not necessarily your most trusted confidants or therapists. While you may feel comfortable, especially in a blog setting like mine, getting a large load of emotional baggage off your chest, try to keep your About Me page as positive in tone as possible.

If physical pain or a specific medical condition is part of your life (the way it is in my life), for instance, you may just want to write something like “I deal with [name of illness here], and I talk about it on this site because it has affected my life.” Writing about it in this non-confrontational way allows the user to know some of your struggles without feeling as though they’re walking away carrying the burden of your life with them.

Emotional and spiritual battles fall under the same heading. Whatever you’re carrying in your life, you can write a bit about it, but don’t get too deeply into it in your About Me page–let it be known, but maintain a more positive stance.

And of course, if you’re writing for a business site or a social organization site, you might want to keep out any personal struggles altogether unless your business or organization deals directly with the kinds of problems you’re facing. For instance, the leader of a local cancer organization could write about being a cancer survivor on that social organization’s page, but he or she might want to leave that off their LinkedIn profile.

Tailor Your Page to Your Particular Site’s Purpose

Each of my About Me pages on the Internet is slightly different, based on what the site is about and who I’m trying to reach.

On my novel blog, my About Me is a little blurb with my name, age, state of residence, and how long I’ve been writing the novel, plus a link to my domain. On this blog, my About Me page references all the things I do in my everyday life and how it feeds into my blog articles; it also links users to my much more in-depth About Me page on my domain, which is wayyyy detailed about me without giving too much about my identity away.

When you create a site, remember that the people who find your site are typically just interested in that subject matter, and as such, they want to hear why you’re qualified to write about it. Keeping your About Me page steered towards that topic while still making it about you is a tightrope walk, but it can be done.

Let Creativity Reign

If you have a more media-driven idea for your About Me page (like I suggested before, a page full of meaningful images, a poem that you feel describes you completely, or even a video or music clip that you love and has personal meaning for you), try it out! Even if it doesn’t end up working for you, at least you gave it a shot. A memorable About Me page is much better than one that plays it very safe. Just make sure that your target audience will not be offended and will be able to access your content.

Don’t Limit These Ideas to Self-Created Pages

Wherever you go on the Internet, you can keep these ideas to reference for all your social media pages. Profiles on sites like Facebook, Twitter, LinkedIn, Last.fm, and tons of other sites can all be sculpted using these same tips. It’s not about lying to your visitors, but making sure that your profiles are honest without being too gritty.

Summary

In a way, when you write an About Me page, you’re performing a delicate dance for your visitors. The most attractive dance is one in which just enough but not too much is revealed, because it leaves viewers wanting to know more. Likewise, when you write about yourself, you want the visitors to know a little about you, but not so much that they never come back after one visit, because they feel they “got the whole picture” already. Walk that tightrope!

Monday in the HTMLab

Content Organization: Like Cleaning a Digital Room

1 Comment

Sometimes, when you’re developing a website, the sections of your website just fall into place. Say, if you’re creating a business site: you’d likely have a page called “About Us,” plus a page about each of your products and services, a page of affiliated businesses and links to their homepages, and a contact page. Fairly simple, straightforward page creation, which leads to simple, straightforward (and compact) navigation.

Unfortunately, dividing up your site’s content into pages and sections is not always that easy. Take my City of Heroes fansite–I’ve mucked around with the navigational sections for so long and tried so many different organizational styles, and I still haven’t gotten it where I want it. In my case, there are so many sections, and some of the sections kindasortamaybe overlap…not to mention that some pages that seemed like they’d be better as huge conglomerations of subject matter now seem like they need to be separated out into 4 or 5 different pages.

To try to fix this problem, I delved into the concepts of making individual pages and dividing up your navigation into understandable (and user-friendly) sections. Here is the step-by-step process I have come up with for fixing navigation and page division:

Look at Your Site as a User Would

This is very difficult for web developers and designers to do–looking at the site as if you’re not the one who made it is unsettling, at the least. But you need to have a fresh perspective on your site if you’re having trouble developing intuitive and understandable navigation for your users.

To gain some insight into this process, try browsing a site you’ve never been to. Doesn’t matter what it is, just browse it. While you do this, note any frustrations with the site’s organization. Does the navigation make sense? Is it easy to find individual pages just by clicking through the navigation, or have you already had to resort to the search box (if there is one provided)? Are the pages arranged into logical sections, or do the sections seem to have arbitrary labels?

Experiencing a new site like this forces you into a user’s perspective–for a short while, you have to navigate a site you’re not intimately familiar with. Now, go back to your own site, and explore the exact same way you just did. Does the navigation you’ve crafted, the sections you’ve devised, really make sense, or does it only make sense to you because you developed it? Be honest with yourself here.

In the case of my City of Heroes site, I have much of my navigation sorted by topic, but then I have a couple of non-topic labels (“New Players”, etc), which doesn’t fit the rest of the site’s organization. It makes it difficult to know which sections are most appropriate for pages to reside in–isn’t everything I publish more for new players, after all? If I want to fix this navigation problem, this content section problem, I need to take away the New Players section and make a more topical section (or sections) for all the pages that are currently within it. (This would be me practicin’ what I’m preachin’.)

Look at All Your Content, All Together

Sounds like a huge, time-consuming job, but trust me, it really, really works. Copy-paste all your written content into one large, simply-text file. (If you have photos as most of your content, congregate them all into one folder, and it works just as well–any place where you can look at all your content as a whole instead of in navigational pieces is the goal.)

Why do this? Because it will enable you to see what all your site encompasses in terms of content. In my case, even though I have 70+ pages of content on my City of Heroes fansite, copy-pasting it all into one file can show me where my articles for new players overlap themselves, and what articles don’t really fit the purpose of my site (like the “Humor” section, which, according to some users, isn’t very funny at all).

Doing this for your site can help you weed out what content doesn’t really “go” with the rest of your site, as well as figure out how it could be grouped better. Maybe those 3 tiny pages of useful links could be grouped together on one page instead; maybe that huge page featuring several novella-length articles could be broken apart and made into a section instead of a single page.

This exercise is especially helpful for figuring out where you have duplicated content on your site without realizing it. For instance, I had a fansite back in 2005 that I was trying to fix up, and I discovered during this very process of copy-pasting and scanning my content that I had 3 pages of almost exactly the same information. I don’t know how this escaped my attention, but it had, and so I could actually delete two of the pages and fix up the remaining one. Not only can this help you with your content, but it keeps you from doing unnecessary work later on pages that don’t need to exist!

Start Fixing

Combining pages together or breaking them apart can be time-consuming as well, but if you’ve got all your content in one file like the last step suggested, it makes this task a lot easier. Rearrange, rewrite, delete, or add content as necessary, and if you need to, break your content into totally-new sections. Yes, this will take some time, but if you can make your site better and more efficient by doing this, then you need to do it–better and more efficient sites are more visited and enjoyed sites.

For my City of Heroes site, breaking the New Player section into possibly two or three sections based on topics is the big concern. But along the way, I could also tighten up content that needs a rewrite, and delete some places where I’ve accidentally duplicated content. There are also some places in the site where I need to update my information to make it current with the game environment.

Upload Your New Content and Navigation

I’d advise not to debut your new content organization until you’ve warned your users about it. It would be very disconcerting for a user to be browsing and suddenly–whoops!–that page they were just viewing isn’t there anymore!

Instead, give notice a week ahead of time that you will be scheduling “site downtime” for the reorganization process, and make the site inaccessible for the time that you’re going to need to upload everything. You can put up a temporary index page that tells the users what’s going on and what date/time you expect to have everything done, without any links to any content yet. (Don’t forget to edit the index page back to the way it was at the end of the process!)

Summary

When you have a site, be it a large informational site, a small business site, or anything in-between, you need to have a good sense of how content is divided up and how it is accessed. If it’s too confusing for users, they won’t return. Reorganizing your site, just like reorganizing your room, is key to helping your site function better and be more welcoming!

Monday in the HTMLab

WordPress: Doing Pages versus Posts

1 Comment

On a typical WordPress blog (and possibly other blogging software as well), you have the option of doing Posts or Pages for your content. But what’s the real difference?

Many beginning bloggers do not know, and I was confused when I first started using WordPress. “My posts are going to appear on web pages, so why do I need to bother using something called a ‘Page’ with a capital ‘P?'” I wondered.

So I set about learning the differences for myself. Here is what I discovered:

Pages

Pages are static–they occur outside “the Loop,” or the time-sensitive code that produces the Posts. Because they’re outside the normal blog post structure, they have to be accessed through the “Pages” links and sidebar modules instead of falling in chronological order with Posts.

Because they’re not in “the Loop,” Pages look kind of silly with a date on them. After all, you can’t find them by searching through the date-sensitive archive anyway. Also, Pages don’t usually have a need for the comments template, unlike Posts. If and when you design a custom blog theme, don’t just copy-paste your Posts template as your Page template–if you don’t want a date to show, and don’t want comments to be allowed on your Pages, remember to take out those bits of code before you publish.

I find that Pages are better for static information that isn’t time-sensitive like Posts tend to be. Content like your “About Me” page, a links page, an FAQ, or product information looks better on a Page and can be more easily accessed from anywhere on the site.

Posts

Unlike Pages, Posts happen within the time-sensitive framework of “the Loop,” at least in WordPress. Because they happen in “real time,” so to speak, having the date included as part of your Post template makes it possible to search for Posts through the Archives pages of your WordPress site. Apart from needing the date included, Posts also more than likely need a Comments template so that visitors can post replies.

Posts seem to be best for regular blog entries and time-sensitive information like site updates, rather than general site information like “About the Author,” or more static information like “Product Specs.” Also, since Posts are more searchable through the Archives pages, Posts are better for your main blog content.

Making the Choice

If you’re still confused about which format to put a certain block of content in, ask yourself the following questions about the content you’re working with:

“Does this content need to be readily available to users no matter how long it’s been since I published it?”
If yes, you likely need to put this content on a Page.

“Is this content only going to be relevant for a little while, and then fade into old news?”
If yes, you likely need to make it into a Post.

Summary

I hope this quick rundown of using Pages versus Posts has helped you figure out what type you need more of for your site. WordPress offers this diverse functionality as a way to help us bloggers and webmasters publish content–we just have to know how to make use of it!

Monday in the HTMLab

Dress Your Page

1 Comment

I’m probably the last person who needs to write a blog article equating web design with fashion design, since my own fashion style isn’t exactly “runway” quality. I choose quality looks over trends any day. Who cares if something is “so last season,” if it fits and it looks good? I’m usually not “up” on new trends and don’t care to be.

But I do something similar with my web designs. I like “classic” web-design looks, but for me, “classic” means sometimes reverting back to tables instead of divided layers, and sometimes doing really small graphics in order to help the page load faster. As with my fashion sense, my web-design sense likes simple and fitting designs rather than designing to fit the latest trends.

The two fields are really quite similar, but web design is often seen as something too technical to understand, too detail-oriented and encrypted with strange code. This blog post seeks to show even the newest web designer how to truly “dress your page” as if you were dressing yourself.

The Role of Color in a Web Page

Color on a page, just like color in your outfit, draws attention or deflects it away. A black business suit paired with a white shirt underneath looks clean and trustworthy on both sexes; change that white shirt to a red shirt and you’ve instantly got a different vibe, of ambition and boldness. Wearing a brightly-colored shirt with a neutral-colored pair of slacks draws attention to your upper half and to your face, while wearing the neutral color on top and bright color on the bottom draws attention to your lower half instead.

In general, bright colors attract users’ attention, and muted colors fade into the background; you can use this to your advantage in a web page. Bright colors are best for accentuating new features on your site, such as a new article, a new page, or new functionality. They also infuse freshness into your site, like a fresh change of clothes.

But bright colors can also look too “young” and frivolous for a web page that needs a stable and solid look. Just like brown, deep green, navy, burgundy, black, ivory, and white lend solidarity to your look (and to doctors’ and lawyers’ offices), they can make your page look sufficiently important, sufficiently knowledgeable.

Using color on your site is partly about knowing where color needs to be placed, and which colors to use. If you have a personal site that needs to speak of your personality and your love of life, a selection of two or three bright colors, combined with one or two neutrals, might be just the spice and excitement the page needs. And if you have a business site that needs to maintain its professionalism, for instance, you can use a brighter version of one of the main colors to draw attention to new information without making the page look too colorful to be taken seriously.

Does Texture Matter? Surprisingly, Yes

Just like cotton, silk, and leather feel differently to the wearer, texture also appears on web pages, but not in a tactile sense. But don’t underestimate the subtle power of textures in a webpage.

For example: Ever visited a web site that only had solid blocks of color as its design? No patterns in the background, no patterns in the header or footer–just solid blocks of color? It might have looked neat, but it likely felt a little…bland. No visual interest existed except the play between colors. (Okay, okay, I admit it, my designs are like this more often than not. What can I say, it’s a “safe” way to design.)

Sadly, visually boring sites don’t get visited often because they seem like they’re old news; there’s nothing to set them apart from other sites, nothing to keep users returning. That’s what I struggle with in most of my sites, all in the pursuit of making a design that looks uncluttered and easy to read.

Then there’s the opposite problem: the “pattern overload.” Not only is there a tiling background pattern on the page that’s all zigzaggy, but there’s a pinstripe pattern on the header, and a crosshatched pattern behind the navigation. Add in some curlicues on the Links page and some polka dots on the footer and you have a very confused page. This is visually overwhelming to the user, and it makes it hard to enjoy the content when your eyes are swimming in patterns.

When you have a visually confusing page, users don’t even get to focus on the content because of your design, and it may turn them off from revisiting your page later. Having an interesting page is great, but does absolutely everything have to be sparkly or moving text?

So, how can we as designers use texture well? Do as the fashion designers do–put your most interesting pattern on your smallest feature. Ladies carrying snakeskin purses or wearing plaid shoes is a classic way to introduce pattern, because it’s just a “POP” of pattern rather than an oversized coat or dress screaming its pattern to the skies. Likewise, web designers can use pattern to draw attention to new features, to grace just the tops or sides of their pages, or to float lightly in the background, adding visual interest without overwhelming the content.

Also, if you’re nervous (like me) about using texture in your web page, just do a tone-on-tone pattern based on the background color of your page. Something I could do easily with Crooked Glasses’ background is to do a thin, diagonal pinstripe pattern with a lighter blue-green and a darker blue-green, alternated back and forth. It would be simple, possibly too subtle for most users to pick up on, but it would be just a little hint of pattern. It’s all about experimenting–if you don’t like the effect after all, there’s no harm in trying again!

Bejewel Your Page with Icons

As I’ve mentioned in a previous post, icons are great, but they can easily overwhelm a page, just like too much jewelry can literally and visually overwhelm a person wearing it. Too many bangles, rings, necklaces, earrings, ankle bracelets, belts, chains, and toe rings, and you end up looking like you robbed a jewelry store but forgot a bag to carry your loot in. Similarly, web pages with too many icons on them look busy and hard to read–who wants to hover over each of those icons trying to figure out what to click on?

One way web designers can display icons is to be selective about which icons they display. If you’ve got a link to every single social profile you’ve ever owned, that’s great, but you may not want to display them all on the main page. Such a list might be better if it was sorted into various categories and listed on a separate page instead. If you absolutely need to display some on the front page, have just a small, “most-important” icon list there, and then link to another page with more of them.

Also, you can arrange icons into a graphic shape (triangle, circle, diamond, or star pattern, for instance), and display them that way. (You could either make them all into one image and use an image map to do the links, or you could position them all using CSS–I much prefer the image map, though, since it’s static and won’t change with the different padding and margin “interpretations” between browsers. Looking at you, IE and Firefox. XD)

Whatever you do, be sure that at the end of your design process, your icons decorate but don’t over-decorate your page. You want your users to make sense of them, after all. And you might even remove an icon before you publish your page, just like moms used to teach their daughters to take off one item of jewelry before leaving the house.

Styling Your Webpage’s “Hair” — The Header

The header of a page is the first thing to load, and it’s the first impression of our site that users get. Yet, users don’t spend much time looking at the header while they’re on our site–they’re focusing more often on the content. It’s the same way with hairstyles–our hair makes an instant, initial impression on someone, and then that impression fades into the background as the person gets to know us better.

Hairstylists and web designers both spend a lot of time on making their creations give off a positive statement, and yet not too strong a statement that it is distracting. They also both work to make their designs memorable (though I’m not sure those crazy beehive ‘do’s should be that memorable). We as designers should work to make our headers just like good hairstyles–framing our content (the “face” of our site) rather than getting in the way.

To do this, we make headers that clearly state our site name and subject matter, but do it in a cool way (either through images or text). Whatever else your header has to offer (navigation, affiliate buttons, announcements, etc.), make that clear, as well, but don’t crowd it with information. Leave most of the information to your content area and sidebar(s) instead, and keep your header styled but not over-styled. Too many colors and too much text in your header is like too much hairspray and too many hairpins–it ends up being a mess atop what could be great content if people could get past the top of the page!

Fitting Your Footer Into Great Styles

Footers, like shoes, come in all sizes, all colors, all styles…and all heights. Some shoes are laughable because of the height of the heel; some websites’ footers are laughable because they seem to want to cram all the site’s information into a 300-pixel-tall space across the bottom of the page.

Now, I don’t have a footer fetish, but I like to see a well-designed end to a web page. I used to never pay attention to it, and I still style mine very simply, but I like to see what other people do with the footers on their web pages. A page without anything concrete at the bottom of the page to “anchor” it to its site feels a little naked, or unprotected–not even a “Back to Top” link? Sad!

Now, if it looks like an encyclopedia entry is included in the footer, it looks way too complicated for most users to mess with. If, instead, there is some author info and maybe a few pictures (or info feeds from other sites), it looks tidy while still being informative. If you can, try to avoid large blocks of text in your footer, and instead do a bulleted list or just provide a few links to pertinent information. Other content, like icons, thumbnails of relevant pictures, social media connections, or even comment boxes can be great in a footer.

Also, if a footer is jammed with colors and patterns that have nothing to do with the rest of the site, I’m often confused–“wait, what site am I visiting again?” You don’t want to confuse your users with a footer that doesn’t seem to match, even if all you’re putting in it is a couple of links. You want to make sure your footer blends in with the rest of the design.

A fashion example would be wearing red shoes with blue jeans, a green shirt, and a gold bracelet or watch–the shoes don’t match anything else in the outfit, so it looks strange. Instead, if you echoed the gold color of the jewelry in your shoe color, it looks a lot more cohesive. Echoing one of the colors of your site in the footer or one of the patterns from another part of the design pulls it all together without making the header and footer complete copies of each other.

Summary

Styling your web pages is not as difficult as some guides make it out to be–in fact, much of our graphic design skills are skills we practice every day when we stand in front of the closet piecing together an outfit. While it’s nice to stay informed on trends, really simple guidelines are about all you need to make a page look like a supermodel clothed in CSS.

Monday in the HTMLab

Using Music to Inspire Your Web Designs

1 Comment

musicinspirewebdesign
As an avid musician and composer, I find that music, like writing, permeates the other areas of my life, and that definitely includes web designing. I often use music as a background when I am in full “Photoshop mode,” sometimes assembling a full playlist of particular moods and flavors of songs, and sometimes just letting iTunes Shuffle dictate what mood I’ll hear next.

Some of the more memorable designs I’ve churned out over the years have begun with music. For example:


deeppurplelayout
The clock-like notes and soaring guitars of “Alone” by Heart inspired this deep, space-like violet image, studded with faint stars. This became the background for one of my early personal sites’ splash pages.


softbluelayout
Wispy vocals and an ethereal music box sound in Britney Spears’ song “Everytime” helped me create this handmade gradient of soft blues and sunny white. I eventually used the image as the fixed background for a contact page.


darkoceanlayout
“Saltwater” by Chicane had such fathomless depth and rain-like rhythms that I was inspired to create this energetic swirl of blue-green and black. Later, this became part of a header image for an early fansite.

Where These Images/Color Selections Come From

Since I listen to the songs while I’m creating the images, I believe a lot of it has to do with my sound-color synesthesia, which I’ve referenced in other blog posts. The choices of colors and shapes often have absolutely nothing to do with the music videos, album artworks, or the artists themselves–it seems instinctual for me.

From doing this process over a number of years, I’ve discovered that hard rock, metal, or generally angry songs usually lead to harder lines, violent streaks of bright or vivid color, and harsh delineations of visual space in the resulting layout. By contrast, Celtic, New Age, or generally peaceful songs leads to soft gradients, less delineation of space on the layout, and more pastel/muted colors. Love songs of any type have almost invariably led to monochromatic designs with soft lines and yet defined content/sidebar/menu spaces on the layouts.

This is likely a result of the emotional content of each song as I experience it. But what about your own experience?

Try It For Yourself!

  1. Pick a song, any song, from your music library, and start playing it. You’ll likely want to set it on repeat for this exercise.
  2. Open your favorite graphics creation program (mine is Photoshop).
  3. Immerse yourself in the music. What colors and shapes would you associate with what you’re hearing? Does that funky guitar riff sound like a series of stretched-out triangles looks? What about that lovely glissando on the harp? Does it remind you of ripples in a pond? Let your imagination stretch out on this, and go with whatever comes to mind–don’t try to control the result too much at this stage.
  4. Whenever you’re ready, choose some colors and start creating. Anything goes at this point–remember, if you don’t like it or it doesn’t fit your vision, there’s always an Undo button!
  5. Once you’re satisfied with it or finished with it, whichever comes first, save your work.

Can’t Use It Yet? Don’t Worry!

You may never use this created image for anything–but on the other hand, it might become the basis for your next web design, or it might inspire you to create a totally new image a few months from now. If you can’t use your created image for your current project, save it for inspiration later!

Monday in the HTMLab

The Lowly Transparent Shim

2 Comments

transparentshim
You probably read this post title and thought, “Shim? What’s that? And why is it transparent?” Well, in the days before CSS padding and margins, transparent shims were a godsend to webdesigners…but they can still help out our modern pages! Read on to find out how!

A Little Shim History

Transparent shims borrow their name from their wooden companions in the carpentry and construction businesses. These thin wooden pieces, often made from scrap wood or plywood, can be used to fill awkward gaps or spaces, help separate a couple of pieces of material, or make something fit more snugly and more level.

In webdesign circa the mid-2000s, a “transparent shim” image was about the only way to precisely position elements on your page. For instance, need an extra 30 pixels of horizontal space between your HTML form’s label and its text entry box? Then you’d just put in a little image tag linking to your shim image between the form label and text entry box, like so:

<img src=”shim.gif” width=”30″ height=”1″>

Or, if you needed more vertical space between your header image and your content, you’d put a little image tag like this between header and content:

<img src=”shim.gif” width=”1″ height=”50″>

Because this image was transparent, it could be stretched to any dimensions using the width and height measurements without the layout looking strangely colored. And, because it started out as a 1px-by-1px GIF file, it loaded quickly and didn’t clutter up slower connections.

These Days: Less Shim, More Padding

With the advent of easier-to-code CSS padding and margins, however, transparent shims have been less and less needed. No more need to call for that shim 50 or 60 times in a page when a couple of well-coded properties in a stylesheet can handle it all, right?

…Well, MOSTLY. There are a couple of instances where transparent shims can still help out:

Shim Situation #1: CSS Padding Rendering Differently Between Browsers

Sometimes Internet Explorer, Firefox, and Chrome will disagree on how to interpret CSS style rules such as “margin: 3px;” or “padding: 1px 10px 1px 10px;”. (CSS box model problems with IE, specifically, have been widely documented for several years.)

Shim Situation #2: Disobedient Layout Elements

Sometimes, an element on the page just will NOT position itself where you want it, and no amount of finagling, debugging, pleading, or shaking your fist at the screen will fix it. Whether text isn’t wrapping like it should, or whether some floated element is somehow “un-floating” itself, display bugs can ruin your webdesign day.

Enter the transparent shim; they act as little peacemakers, going across platforms, being equally accessible and understandable. All you have to do is put in that little image tag wherever you need it, and work with the pixel measurements to your heart’s content.

How to Make a Transparent Shim

  1. First, open an image program that can make images as well as edit them, and that can make images transparent. Adobe Photoshop Elements is the program I use; Microsoft Paint won’t do it, and neither will most really basic photo editors. Free applications that can make transparent images include GIMP and Pixlr.
  2. Choose to create a new image rather than edit an existing one, and make sure its width and height are both 1 pixel. Also, choose the “Transparent Background” option (could be in a dropdown list or a checkbox).
  3. Once you’ve created the image, save it as a transparent GIF or PNG-24 file. (JPEG format doesn’t recognize transparency.) Make sure you click the option to save it as a transparent file, otherwise it will just render as white. (For instance, Photoshop Elements has the “Save for Web…” option, in which you click a little checkbox reading “Transparency” underneath the file format option box. Your image program may be different–check every option before you click “Save!”)
  4. You should be done! To test transparency, load your new image, sized at 50 pixels by 50 pixels, on a basic black-background web page. If no 50×50 white block shows up at the top left corner, your image is indeed transparent!

Summary

Transparent shims are relatively easy to make and work with. If you have an awkward form width, an odd spacing, or even a fairly okay layout that needs just a little adjustment, try placing a shim, and see how heroic 1px by 1px images can be!

Monday in the HTMLab

Keeping Up with the Webmasters

1 Comment

keepingupwithwebmasters
Just like clothing fashions, web fashions go in and out of style, even within a year. I remember when transparent iframes and HTML tables were all the rage back in the mid-2000s, for instance. Today’s super-sleek, Apple-Corporation-like webdesigns are on trend for the moment, but they may fall by the wayside soon. And, when they do fall out of fashion, most of us webdesigners will feel the pressure to “move with the times.”

I say, however, that we don’t necessarily have to throw out all of our “old” design practices with every new trend that comes along. Instead of “keeping up with the Joneses” (or the webmasters), how about some “timeless Internet fashion” blended in with new trends?

Timeless Webdesign Tip #1: Create a Design that’s Easy to Use

Whatever content you have, whether it’s text article, photos, videos, sound clips, etc., make sure your site is easy to read and browse:

  • Design attractive but not distracting images
  • Use just little strokes of bright color to accent new content
  • Space out your content to break up “walls of text”
  • Ensure that there’s a strong contrast between your text color and background color

A site that’s easy to look at and use is a site that will please visitors. Think about what you like to see when you visit a site–this will help you get the design process started.

Timeless Webdesign Tip #2: Keep your Site Organized

Group your pages together logically in your navigation structure, and create a sitemap for larger sites. You can also put in breadcrumb navigation if you have lots of subsections.

Having an organized site makes it easier for your visitors to find what they’re looking for on your site, which means they will more likely return for another visit. And isn’t that what all us webdesigners want?

Timeless Webdesign Tip #3: Interpret New Webdesign Trends for Yourself

Instead of copycatting what everyone else seems to be doing in webdesign, take time to study the new style, and figure out what you like about it. Use web trends as a way to inform and inspire your designs, not as a rigid rulebook for how you “ought to” make your sites look.

You might find, for instance, that you like that new color scheme everyone seems to be raving about, but you don’t like the layout it’s commonly used with. Instead of forcing yourself to use a layout you don’t like, just incorporate your most favorite parts of the color scheme into a layout of your own making. This keeps your site looking fresh and updated, without forcing it into a design cookie-cutter.

Summary

Since web trends are almost always changing, but there are definitely design concepts that never go out of style–and there are ways to personalize each trend for yourself as it comes along. After all, who wants to browse 10 different sites that all look the same? Help your site stand out with your own personal style!

Monday in the HTMLab

Research: The Dreaded “R” Word

2 Comments

research_rword
Don’t glare at your screen like that! Research is necessary for any good web content, whether it be photos, videos, sound clips, and especially written articles. If you don’t want to just rehash ideas that someone else has already presented, you must research and then come up with new ideas that are exciting and interesting to read.

On the Internet, it can feel like everything that could be said about your chosen topic has already been said…but that’s not the case. Doing searches about your chosen topic will show you what’s been said, and then you can add your own unique viewpoint to it, making the “old” topic new again. You can also compare/contrast others’ opinions and beliefs with your own, creating a much richer and deeper article. Like serving last night’s roast chicken as today’s chicken salad sandwich, this is the best way to make fresh content.

Three Styles of Blog Research

Internet Search: What Are People Saying Now?

Do an Internet search on your selected topic, and browse through some of the most recent and most reputable (read: objectively-written) articles about it. Are there any articles that bolster your opinion? Are there any that challenge your stance? How about any articles or websites that further inform readers about your topic?

Like different recipes for the same basic dish, varying articles and websites can expose you to different perspectives on your topic. (Just like chicken salad can be made with celery or grapes, and both types are still called chicken salad–though why you’d ever want to eat grapes, chicken, and mayonnaise all mushed together, I’ll never know. #pickyeaterproblems)

Copy/paste the URLs of any articles you find enlightening or challenging, so that you can point your readers to them later (and also so you can refer to them while composing your own, individual blog article).

Library Search: What Have People Said in the Past?

I know, it sounds weird to do a search at the library in these days of finding everything online. But whether you’re searching an online library or a brick-and-mortar one, be sure to find older books and newsjournal articles about your topic, just to inform yourself about what has been said 10, 20, 50, or even 100 years ago.

You might find, in the middle of your Internet searching, that there was a book published 40 years ago specifically about your topic; in that case, you could look that book up at your local library and read it for more information. Like adding different spices to your chicken salad, doing historical research on your topic gives your viewpoint more impact and depth.

Like with the Internet search, keep a list of the titles and authors of books or journal articles you find particularly useful, so you can point your readers to them when you do write your own article.

Anecdotal Research: What Do Your Friends and Family Say?

Especially if you’re writing about a hot-button topic, get some opinions from friends and family to further inform yourself on how a variety of people think about the topic. Anecdotal information like this can give your blog article more personality and more immediacy than just dry research, kind of like adding mayonnaise to dry chicken to make it into chicken salad.

You won’t necessarily have to cite Granny or Cousin Fred in your article sources, of course, but referencing them in the course of the article makes it more story-like and reader-friendly. (Change names or use only first names/initials as you see fit–sometimes it might be prudent to obscure identities.)

After Research, Stir It Up and Add Your Secret Ingredient

After you’re finished with research on what others have said, it’s time to write your own opinions about it. Some of the research you’ve done may have changed your opinion or refined it; make a note of that and talk about that to your readers. Other research you’ve done might have led you to debunk opinions or declare them unfounded. Just like refining a recipe in the kitchen, writing a well-thought-out blog article takes some time, some trial and error, and some mental stirring, but it’s worth it.

Your readers will be more engaged with an article which is both informed and full of your own writing style–your own blog’s “flavor,” if you will. Your “secret ingredient,” of course, is your own opinion, which is probably why you’re writing a blog in the first place. 😉

Summary

Research may not seem exciting, but if you do it and do it well, you may find yourself more enthusiastic about your topic than ever, and your readers will get a much better article because of it. (Also, I really shouldn’t write blog posts when I’m hungry. I come up with all kind of strange analogies. XD)

Monday in the HTMLab

Why I Chose to Write a Multi-Topic Blog

2 Comments

multitopicblog
When you think of “blogs” you generally think of personal writings, such as the writing about somebody’s day-to-day life, such as Jenn.nu and GeekyPosh.com. And if it’s not a blog about day-to-day life, then perhaps it’s a blogging-platform-driven website based on a topic, turning it into a one-topic blog, such as The Simple Dollar or WPCandy.com.

My blog, therefore, a blog about six different topics, is rather strange in comparison. Why, given these two other (somewhat easier-looking) styles of blogging, would I choose to create a blog this diverse?

Reason #1: Tried Personal Blogs and One-Topic Blogs Before–and Failed

Yes, you read that right. I actually have failed at doing blogs several times before Crooked Glasses came to be. And I have tried both types of blogging styles that I outlined above.

After trying to run a WindowsLive Space, a LiveJournal, and a personal site, I discovered that my personal life was just not interesting enough to warrant writing a post about every day. Some days, I literally thought, “If I post today, it’s going to have the same content as the post yesterday.” Seriously, nobody needs to read a whole week (or month) of posts along the lines of “Today I woke up. I ate something. Then I watched TV before going to meet my boyfriend and hang out. Then I came home and wrote this blog post, then went to bed.”

It bored me to tears to think about writing this drivel, so I had to come to the hard conclusion that it would also be boring for people to read. (I also never kept a steady diary during my childhood for the same reason–it bored me to write identical diary entries day after day.)

In between trying to make a personal blog work for me, I also tried a couple of topic blogs that are best left forgotten, basically about my favorite TV shows at the time. What frustrated me about writing one-topic blogs was that I quickly ran out of content–I ran out of things to say about the topic very quickly when I felt pressured to write about it every day. It wasn’t that I didn’t like the topic anymore or that I got tired of it; instead, I struggled week to week to try to find new nuggets of information that my visitors would like to read, and I ended up feeling like all I was writing was retreads of old articles.

Reason #2: Wanted One Site that Covered All My Favorite Things

Like Julie Andrews’ character in The Sound of Music, I have a lot of favorite things; I am interested in webdesign, Internet surfing, and creativity, but also in Biblical study, gaming, and a bit of philosophy and commentary here and there. I didn’t want to have six different blogs, though–I wanted one place, one login and one blogging platform installation, that allowed me to share about all the things I love.

I also wanted my blog to stand out, and I knew that a multi-topic blog would be a lot broader and more interesting to viewers, as well as providing them a window into topics they might have never thought of or heard of before.

Reason #3: Keeps Me Writing and Doesn’t Let Me Get Bored

The last reason I chose a multi-topic blog is because this keeps me writing. Every week, I challenge myself to write six new blog posts, six new examples of fresh and interesting content, and it helps me hone and trim my writing down to its essential basics instead of allowing my words to run amok. It doesn’t let me slack off or procrastinate (as I am so prone to do in other areas of my life)–this is a personal commitment to working on one of my best-loved crafts.

Writing about six different topics also keeps me from being bored or running out of content. I don’t drag myself through writing six posts about the same topic–I am energized by writing one post each about my favorite topics.

Summary

Blogging doesn’t have to be based in your personal life or in just one topic. Indeed, if you’re interested in many different topics, a multi-topic blog might be just the way to make your mark on the blogging community. (I don’t claim that Crooked Glasses is all that popular just yet, but you never know!)