Tag Archives: webdesign

Spraying Your Site for Bugs

November 21, 2011 Robin Leave a comment

Ah, debugging–the most annoying part of web design, at least for me. Drives me nuts to upload a page I think is perfect, down to the last tag, and find instead that something within that lovely code has gone horribly awry. (Debugging this WordPress layout was especially annoying!)

And yet, if we’re going to be responsible web designers and webmasters, we have to check through everything we upload to make sure it’s exactly what we intended. From unintentional (and often funny) typos, to broken links and other bits of HTML, to an unintelligble wall of text with no formatting, and all the way to colors displaying terribly, we have to make sure our sites are displaying the way we intended!

Content Bugs

Typos
Yes, we are all human and can make mistakes. That’s what causes typos in the first place, after all! Many’s the time I’ve meant to type “from” and typed “form” instead, or typed some horrible misplaced series of letters when my fingers got off the home keys. (But that’s the reason I got good at hitting the Backspace key at lightning speed.)

When you go through your content, check for typos first, before you do anything else. Lots of misspellings makes your content look very amateurish and ill-written, even if you know exactly what you’re talking about, and it will give off the wrong vibe about your site. Even if your site is a personal site, you want it to be “dressed for success” in its content.

If you’re not sure about the spelling of the word, you can check Dictionary.com to compare spelling. Also, for a quick fix, you can even type your spelling of the word into a search engine, which generally autocorrects your spelling with the infamous “Did you mean ____?” line at the top of the page.
Unattractive/Listless Phrasing
While offhanded phrasing like “Meh, I don’t really care about this section/article/page, but whatever” may sound okay to you, it will definitely leave your viewing public wondering why THEY should care about your site. If even the creator can’t be bothered to care about this content, why should they? Make sure that you’re using phrasing that plays up the best parts of your site, so that it shows others why they should care about what you’ve written.

Example: Instead of “This is the content, but it’s still under construction…meh,” you could try saying something like “This section is still under construction, but enjoy what is here so far–and keep checking back for updates!”
Half-Hearted Explanations
Use clear and concise language, especially when you’re explaining something. (Yes, yes, I know, I should be following that myself…pardon my tendency toward verbosity, LOL!) If you’re writing informative articles, regular blog content, or anything on a site, always keep in mind that some people may not have an intimate knowledge of your subject matter.

Use links to basic reference material if you don’t want to have to rehash all the most essential details, but do try to explain your content well enough so that even someone who is new to your topic can catch on. This will help make your site much more approachable, and might even interest your visitors in becoming more involved in your subject matter themselves!

Link Bugs

Broken Links
As many links as I collect from all over the Internet, just as many of them end up broken over time. It is very, VERY hard to police your links page and keep up with all the broken links–it could end up being a full-time job in and of itself!

To combat broken links, set aside a time each month to review each of the external links on your links page, content pages, etc. And don’t just rely on an automated link-checker; those will give you false positives on “parked” domains, or spammy domains that are more robot-generated than anything. Physically go through and click on every link to make sure the site you intended to link to is still there.
Mistyped Links
Even if the site still exists, nobody is going to be able to follow your link if you type it like “http:www.thesite.com/” or “htp:/www.site.com/”. It’s easy to mistype stuff like this when you’re trying to assemble a page, especially in a hurry. If you click a link on your site that you KNOW for a fact exists and it doesn’t do anything, investigate how you typed the link–you might find the reason there.

Formatting Bugs

Lack of Headings/Subheadings
When walls of text are not broken up by headings and subheadings, it doesn’t give anybody a reason to keep reading. Use these more boldly-formatted, summarizing lines to help your users find the information they need as quick as possible, and to draw their attention to the content itself.
Not a Paragraph Tag in Sight
If you’ve formatted a big page of text using only one beginning p tag and one ending /p tag, it can lead to the “wall of unreadable text” phenomenon. Your awesome content will end up looking like a formless blob…trust me, I know. It’s best to break up your text into smaller paragraphs so that your users don’t look at it and get intimidated, even if you think your paragraphs look too small.
Text Size Too Small
I will never understand why 8px font became appropriate for personal sites, but for a good long while, it was. Imagine font size from your visitor’s perspective–would you want to read long pages of text that look like “fine print” on some contract? If your content’s very important to your site, you want to make sure it’s readable, and not just with a magnifying glass.

As a rule of thumb, I never go below 10px on any font size (not even Verdana), and usually not below 12px if I can help it. 14px helps some of those more cramped-looking fonts (like cursive or more elaborately-ornamented fonts) expand a little bit so they are easier to read, too.

Color/Design Bugs

Wrong Color Appears
Colors, like links, are susceptible to being typed wrong or accidentally backspaced. If a color renders absolutely wrong on your page, check to make sure all 6 of the hexadecimal numbers or letters are in place. (Sometimes color will render as slightly different based on monitor color settings and what format you saved your images in…keep that in mind. PNGs and JPGs usually preserve more of the intended color in images across most browsers and computer monitors.)
Misbehaving Layout
Divs, tables, sidebars, and navigation are all infamous for inexplicably messing up on certain pages. Check all of your pages to make sure they ALL display correctly–if you have a random layout error, it could be part of your content stretching the page out too far, for instance.

Also, check widths and heights of various layout structure. For instance, when two divs which should float side-by-side instead stack one on top of the other, one of their widths is likely thrown off by something (either a measurement or something contained within the div itself).

Summary

Bugs on your site don’t have to be just server-side or script-related. Much of how visitors perceive our sites comes from what we ourselves put up on the site. Taking time to browse our own websites, page by page, can help us catch errors in content, design, layout, and links…plus, it helps us remember how it feels to BE a visitor!

Monday in the HTMLab

Link-Hopping

November 14, 2011 Robin 2 Comments

When I was bored or couldn’t sleep at college, I often found myself aimlessly cruising the Internet, searching for something to keep my mind occupied. Eventually, I came up with a way to “hop” from one site to the next, using the first site’s links and affiliates page to discover more sites I’d never been to before.

This was in the days before StumbleUpon, so I had to devise my own way of doing it. Try the following process:

Do the Link Hop!

Search for anything you’re interested in, using whatever search engine you prefer. This can be a topic, a TV show, a name, a style–anything!
Scan the list of results for anything that catches your eye. (Beware of scammy or spammy-sounding sites!)
Open one link and check it–see if it’s really got anything that interests you.
If you like what you see, make a note of the site by bookmarking/favoriting it.
Now, go to the site’s links/affiliates pages and check each one, seeing whether any of these sites sound interesting. (I find it easier to open each of these new links in a new tab or new window so that you can keep track of “where you’ve been” so far.)
As with the first site, bookmark or favorite any sites that you really like.
Then, go to the new site’s links/affiliates page, and check out each one in the same way.

How Does This Relate to Web Design and Development?

I find that this is a great way to discover possible new affiliates and link exchanges. By searching for my site’s topic, I can find other sites that are related or on the exact same topic, and by offering to at least link-exchange, we can help each other get more traffic and be more visible on the Internet.

This is also a way for you to find out what kinds of sites are already on the Internet, in case you want to occupy a small niche within your chosen topic rather than trying to cover it all. If there are tons of gardening sites, for instance, you might want to focus your gardening site on growing your favorite flower, instead; if there are thousands of sites about Twilight (as I’m sure there are), you might want to focus your Twilight-themed site around a specific concept in the books or movies.

The Results

Most likely, you’re going to come across some sites which you won’t be interested in adding, but you’re also going to net at least one or two that are worth bookmarking. If you continue clicking through sites, bookmarking the ones you like and exploring their links to find more, who knows how many new sites you could discover? This can help you both as a web designer and as a web surfer–kill two birds with one stone!

I find this to be a very relaxing pastime, as well as a fruitful one. Try it sometime, when boredom or insomnia has eaten your will to do anything but sit at the computer–see what you can find while exploring on the wild, wild Web!

Monday in the HTMLab

Why Offline File Copies Can Save Your–uh, Day

November 7, 2011 Robin Leave a comment

Most webdesigners and webmasters don’t think about saving backup copies of your images, HTML, and PHP files. Especially with the existence of “cloud-based storage systems,” saving multiple copies of files seems a little ridiculous. Why waste all that time when you’re probably not going to need it?

But what if you no longer have access to the Internet–say, if service is switched off in your area for a while, or if you’re moving somewhere where you can’t access fast Internet anymore (like where I live, smack dab in Dialup Country)? What will you be able to do then with all your files stored in an utterly inaccessible cloud?

You’ll likely do what I did–start keeping a copy of everything offline on your own hard drive again.

Before I Was Wise: Only-Online Copies

On my first site, way back in the fall of 2003, I kept no backup copies of anything except my images–I edited everything online. That was because the free host I was using at the time provided an awesome online editor and I had a great connection at college. (Boy, I miss the super-duper-internet in the college dorms…*sigh*) My reasoning behind not keeping any copies offline was that I was changing the content so fast, it almost didn’t make sense to keep old copies of stuff that I’d just have to copy/paste and resave later.

The Problem with Only-Online Copies

Unfortunately, when I came home to visit from college, I soon realized the big problem with just keeping my online files. When I didn’t have access to anything but dialup internet at home, I was stymied–the online file editor wouldn’t load very quickly at all, and so I ended up not being able to stay as updated as I was used to doing. I couldn’t even work on the content at home while being offline, since I didn’t have any copies of the files to look at.

The Better Way–The Offline-Backup Way

After one visit at home like this, unable to write and unable to update, I had had it with only-online copies. From then on, I started keeping offline copies so I could write content while I was at home and unable to connect to the online editor.

Even though it was a little bit more work in the short-term, now I’m quite glad I switched over to doing it this way, especially once I transferred over to a new host and ended up back on dialup for the majority of my everyday life. My new host, while being infinitely better, had a few less bells and whistles on its online editor, and the lack of fast internet meant days of being at home bored and too tired/sick to leave the house in search of quiet places to work on webdesigny things. Thus, offline copies are wonderful inventions.

But they’re not just good for creating content in the first place–making offline file copies is also a great way to save your data if your site goes down. If your site’s host goes kaput for some reason, you’ll be able to move everything fairly effortlessly and without having to make any changes to what you’ve got on your hard drive.

To start this process, just keep an offline copy of every file you create for your website, and save all your changes in it. Practice this so it becomes second nature, and you will thank yourself so much when you need to refer back to these files or need to work on them and have no internet.

Also, if you’re on the go and don’t have a flash drive with you, you can make your edits with your host’s online editor, and then create a temporary offline copy in an email and send it to yourself. This way, whenever you DO get to access the offline copy again, you can at least try to access your email and put in the new changes.

Summary

Whatever kind of site you’re doing, saving offline copies of your files will save you lots of trouble if and when you’re without internet, or have to recover your site if your host goes down or deletes your files. Always having a backup copy means that the Murphy’s Law of the Internet (stating that whatever CAN be deleted most likely will be if you don’t have a backup) doesn’t get you.

Monday in the HTMLab

Affiliates: How to Start Getting Traffic to Your Site

October 31, 2011 Robin 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

October 24, 2011 Robin 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

Using Music to Inspire Your Web Designs

September 26, 2011 Robin 1 Comment

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:

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.

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.

“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!

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.
Open your favorite graphics creation program (mine is Photoshop).
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.
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!
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

September 19, 2011 Robin 2 Comments

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

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.
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).
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!”)
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

September 12, 2011 Robin 1 Comment

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

September 5, 2011 Robin 2 Comments

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

August 29, 2011 Robin 2 Comments

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!)