Tag Archives: user interface

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

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

Hits Don’t Really Matter

1 Comment

hitsdontreallymatter

Uh oh! Unpopular opinion alert! I just said website hits don’t really matter!

Even though I get tons of spammy emails and comments telling me I need to “backlink” and “up my Google ranking” (which sounds uncomfortable and/or rude, LOL), I actually will dare to say that the sheer NUMBER of hits our sites get doesn’t matter.

Why? Well, there are a couple of major reasons:

#1: A Five-Second “Visit” is Not a Visit

Web statistics record every visit, even if somebody’s just on your site for a few seconds; this doesn’t mean that anybody’s actually staying around to really SEE your site and get meaning out of it. In fact, most quick visits are Web crawlers/robots anyway!

Instead of focusing on the number of hits, look at how long each visitor stays on your site(s). Long visits mean that someone out there is ENJOYING your content–which is what all us webdesigners want!

#2: No Comments and No Repeat Visitors is a Bad Sign

If you get a few longer-duration hits, but none from the same IP address, it can mean that people are visiting your site and finding no reason to come back. Likewise, if you’ve got no repeat commenters, your site is interesting, but not interesting enough to warrant a second comment.

Instead, look for the number of times an IP address pops up in your site statistics per month. If IPs show up more than once, you know you’ve got someone’s attention out there. Also, people who come back to comment a second or even third time are likely engaged with your content and are enjoying it.

How to Get Meaningful Visits and Keep People Returning

  • Don’t just post your link on random sites that have nothing to do with your content. Advertising in this spammy, selfish way will make people think your site is full of spam, too!
  • Affiliate or link-exchange with sites that are similar to yours, so that you drive traffic to each other’s sites.
  • Another great way to advertise: get active in forums and online communities that are relevant to your topic, and mention your site as something others in the community would like to visit.
  • Keep making content, and keep your site updated. Fresh content gives your visitors something to keep coming back for–update at least once a week and post the newest content prominently on your front page. (Plus, a layout/design update every six months to a year is a good idea!)

Summary

Don’t just chase after a certain number of “hits” to your website–instead, seek out meaningful connections with your users, and you’ll find your website being visited a lot more often. After all, numbers don’t mean everything in this business!

Monday in the HTMLab

Get a Fix on Position: Fixed

1 Comment

getafixonpositionfixed
With the modern Web and its hyper-fluid, mobile-friendly designs, you might think there isn’t much use for a piece of CSS code that makes a page element stay in the same place, like “position: fixed”.

But never fear, there are still uses for fixed element styles in your CSS! Read on to discover 2 ways that fixed elements actually help the style AND function of your page!

Use #1: Fixed Sidebar

Some websites have a little sidebar on some of their pages that scrolls with you in the same place on the screen, no matter how far down the page you go. That behavior is all because of “position: fixed;”.

For instance: a typical sidebar’s CSS, below.


#sidebar {
float: left;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FF0000;
font-size: 11px;
font-family: “Verdana”, “Arial”, sans-serif;
width: 180px;
height: 200px;
}

This would be a cute, basic little sidebar, but when the user scrolls up or down, the sidebar would vanish with the rest of the scrolled content.

However, if you wanted that little sidebar to stay with the user, you could simply add a couple of lines to the the CSS:


#sidebar {
float: left;
color: #FFFFFF;
background-color: #000000;
border: 1px solid #FF0000;
font-size: 11px;
font-family: “Verdana”, “Arial”, sans-serif;
width: 180px;
height: 200px;
position: fixed;
margin-top: 30%;
margin-left: 10%;
}

This fixes the sidebar in place, 300px from the top of the page, and 100px from the left side of the page. Now, if the window size changes, this measurement system would be a bit off, but for most desktop users, that should hold it in place sufficiently close to the main content without overlapping.

This technique would be useful for navigation sidebars as well as social media sidebars–it keeps a list of handy links nearby for users to easily navigate the page.

Use #2: Background Images

Large background images are great–that is, until you scroll down and you realize it’s not repeating down the page, or it’s repeating but the tiling effect is not smooth at all. If you’ve ever been in this position (as I have, many times), it’s very frustrating! But a fixed styling on your background image can save you a lot of hassle.

Say you have the body styles section of your CSS done like so:


body {
color: #000000;
background-color: #FFFFFF;
background-image: url(‘YOUR_COOL_IMAGE.GIF’);
background-repeat: no-repeat;
background-position: top center;
}

This would just place your background image at the top of the page, centered, and it would not tile, but it also wouldn’t affect anything but the top part of the page. Once your user scrolls down, that background image disappears.

However, if you added just one line to your body styles CSS, you could change that, like so:


body {
color: #000000;
background-color: #FFFFFF;
background-image: url(‘YOUR_COOL_IMAGE.GIF’);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}

“background-attachment: fixed;”, in this case, works like “position: fixed;” with any other element. It forces the background to stay in the same place on the screen, meaning that your content and everything else scrolls on top of it.

This can be a beautiful look if you design for it properly; you just want to make sure that the text is still readable as your users scroll down the page. Fixed backgrounds are great for sites that don’t need a really detailed background, or that don’t use their background image as a header image.

Summary

Fixed elements still have a place in modern web designs–and these are just a couple of ideas. There are plenty more ways to use this design strategy!

Monday in the HTMLab

5 Tips for Increasing Site Loading Speed

2 Comments

loadingspeed
In this day of widespread fast Internet coverage, I’ve noticed that many webdesigners have built much more complicated pages, with larger images, more feeds, and multi-step scripts. For most users, who have access to higher-speed connections, this is not a problem.

However, just because most desktop users have faster access doesn’t mean that all our visitors have fast access. As more and more people use the Internet via smartphones and tablets (which often have slower data connections), we now have a new challenge: to design good-looking sites for desktop users which still load quickly and look good on mobile, too. (Not to mention that there are still places where fast internet is not offered; my household could not get anything but dialup until the winter of 2013!)

So, how do we go about designing these beautiful but quick-loading sites? Here are some tips from my experience on slow connections:

#1: Slice Up and Compress Images

I can’t count the number of times a page wouldn’t load on dialup simply because the designer used a background image the size of a small soccer field. (And on mobile, it’s a lost cause. TRUST ME.) If you want a big background image (or any big image on your page), please, PLEASE, for the love of Internet, use a graphics program to slice it up into smaller pieces and compress each piece (see Tip #5) so that all connections can load the page much faster.

You might complain, “But then I’ll have to align all the image pieces in a table or bunch of divided layers!” True, it might be a little more backend work for you, but it will likely result in a faster-loading page for your users, and that’s what you ultimately want: a page that loads quickly so that your users can get the information they came for. (Free graphics tools and programs that slice: GIMP and PicSlice.com.)

#2: Don’t Use Images Where Well-Formatted Text Would Suffice

Pages full of images are very frustrating for both mobile and slow-connection users, especially when the images are just text. Each big image can take up to 15 minutes to load, just by itself, on a dial-up connection, whereas a page full of just text would have loaded in under a minute.

If you really, really want a different and trendy font for your web site, try using the @font-face CSS property and be sure to include the font file on your site. (Also, make sure that there’s a more generic “fallback” font specified for mobile and dialup connections, otherwise your text will be invisible until the font file loads!) Style your font carefully with CSS, and you might just like your text better than the image version anyway!

#3: Divide Up Long Pages of Images

Instead of having an “endless” page of images (which never load on mobile/dialup anyway), break up image pages into sections/pages. This does mean more clicks for your user, but it also means each page loads more quickly so that they can enjoy your content quicker. Using a fast-loading thumbnail image script, like the one at DynamicDrive, phpThumb(), or HighSlide, can work well, too.

#4: Minimize the Number of Site Branding Images

The more images you have per page, the longer it takes to load every time your user clicks an internal link on your site. Thus, you want your image usage to be striking but not overwhelming. Any place you’re using an image for site branding, brainstorm ways you could reduce or replace that image with a CSS trick, icon font, or HTML special character.

For instance, you can use CSS’ margin, padding, and line-height properties to space text out without having to resort to using a text image. Icon fonts, like Socialico and Modern Pictograms can be brought in with the @font-face property to use for social media links or iconic navigation. (Alternatively, you could use HTML special characters, such as the ones listed on UTexas, Webmonkey, and DeGraeve.)

#5: Pay Attention to File Size and Content

No matter what files you’re using, pay attention to how big they are. If you’re consistently creating and calling files over 500KB, slow connections won’t have a prayer of seeing those in a timely fashion. (And 1MB files just make mobile and dialup users cry at the unmoving progress bar.)

Do all you can to keep file size down. Firstly, use image compression techniques that work for your needs (see my JPG, GIF, or PNG article about which image compression technique would be best). Also, for large text files, PDFs, or coded webpages, cut out extra stuff and load it separately–for instance, I use PHP includes to load my header and footer on most of my sites so the browser doesn’t have to keep reloading the same layout info every time.

Lastly, using deprecated tags or having a page loading in quirks mode (without a doctype) is also a loading speed killer–make sure your code is valid, otherwise, your mobile and dialup users will be waiting a long time and most likely see an error page instead of your site.

Summary

Loading speed may not be the issue it once was, but it’s still important. Streamline your site, and you’ll be surprised how much faster your sites will load–even your fast internet users will notice!

Monday in the HTMLab

Icons Are Like Candy

2 Comments

iconslikecandy
Due largely to the advent of apps, many webdesigners are choosing to do more of their site’s navigation with the help of icons rather than text. After all, doesn’t it look so much cleaner just to use an icon in place for an RSS feed, or for a Twitter account, than to spell out “RSS Feed” or “Twitter” in text?

Well, yes and no. Icons can look clean and tidy–that is, until you have tons of them on the page. Too many icons can make your site look more like somebody’s cluttered desktop. Plus, if every single navigation link on your page is an icon, users can get easily confused about what to click or tap to navigate your site.

Just like candy, small doses of icons are best, so that your design looks sleek and doesn’t suffer from icon overload. But how many icons is too many? It really depends on how you organize them on the page. See below!

Think carefully about where you place and arrange your icons.

Considering your layout, how and where would your icons be best placed? For some layouts, a small table of icons might work best if you only have a tiny bit of space on your sidebar, in your header, or in your footer in which to display them–see an example below:

But if you have a small strip of space across the top or along the side of your content, you can place icons there, as seen below:


Horizontally-aligned icons can look cool as part of a navigation bar…

…and vertically-aligned icons can look neat on a sidebar.

Give at least 10px of space between your icons.


Visual spacing around your icons is hugely important. Whether you choose to arrange them in a table, like the example above, or whether you choose a vertical or horizontal strip, leave a bit of space around them. This will prevent them looking all crowded together and unreadable. The icons in my example above are spaced 10px apart, giving each one enough space to be clicked on and understood as separate entities.

Be ready to reduce the number of icons.

Take a hard look at all your icons–if they’re collectively taking up at least 200px of vertical/horizontal space, you might have too many. One way I get around this design issue is to design my icons’ display, leave it alone on my hard drive for a few days, and then come back to it with fresh eyes. With time away from it, I can better tell if there are too many even to my eyes. In that case, I pick out the most important ones (the ones I really want my visitors to click on) and put the rest on another page, well-spaced. Try this–your users’ eyes will thank you!

Make use of alt and title text.

For some layouts, you may not want the added clutter of text displaying every time you hover over an icon. For that, you can use alt text in the <img> tag and title text in the <a> tag to stand in for the text hover labels I showed how to do earlier. See how the alt and title text works in the icon table, below:

(Optional) Make a text “hover label” for each icon.

Whether you choose to do a mouse cursor hover effect for desktop users, or a “tap-to-reveal-text” effect for mobile users, it’s important to make it clear exactly what the icon represents before your visitor clicks on it.

There are plenty of dynamic script-heavy ways to do this (like using Foundation), but if you want to label your icons the old-fashioned way, here’s my hack:

1. Put link text below each icon; make the a:link and a:visited text color the same as the background color, and make the a:hover text color a strongly-contrasted color, like the examples below:


For this, I put each icon into its own table cell, and then put a line break between image and text within the link, like so:

<td valign=”top”><a href=”http://www.facebook.com/”><img src=”facebook.png” border=”0″>

<br>facebook</a></td>


For this example, I gave each icon its own table cell and row, and just put a few non-breaking spaces between linked image and linked text, like this:

<tr><td valign=”top”><a href=”http://www.facebook.com/”>

<img src=”facebook.png” border=”0″>&nbsp;&nbsp;facebook</a></td></tr>

Remember that you can have multiple lines of text displaying underneath or to the side of your icons in this format (just using HTML line breaks), as shown below:

The size of your icons is your choice–but think it through!

Icon size is a personal choice, but it also depends on the grandness of the layout you’re designing. If you have a very simple layout, small icons might look sufficiently different enough for users to notice them; if you have a very detailed, graphics-intensive layout, you’ll likely want bigger icons so that they stand out more.

(Also, for responsive layouts meant for mobile designs, big icons are easier for fingers to tap. This message brought to you by a girl with big fingertips. :D)

Summary

Adding icons as part of your site’s navigation is up to you–just remember that a few pieces of icon “candy” go very far on a web design!

Monday in the HTMLab

Making Ads Less…”Ad”-y

1 Comment

adslessady
I’ve toyed with the idea of putting lots of ads or sponsored posts on my sites for years, but I’ve rarely if ever gone through with it. On the one hand, I’d love to make a little money off these labors of love, but on the other hand, I’d rather not clutter up my sites with ugly or annoying ads that will drive away the visitors I do get.

This is a common concern for many webdesigners: how do we make ads/sponsored posts less…well, “ad”-y? How do you incorporate them seamlessly into your design, so that people notice them but don’t get distracted by them? How do you make them fit with your site, rather than having to fit your site around them?

As I have puzzled over this for my own personal benefit, a few salient points came to mind (ones which I may or may not put into action over the next few months). If you’re considering using ads or sponsored posts as part of your website, here are some things to think about:

Choose ads that are relevant to your site.

Nothing is more distracting than going to a favorite website and seeing a huge animated ad for random pills or e-books blaring at you from the sidebar or top of the page. When possible, choose ads that go with your site content, because it will be more interesting to your users. For instance, an ad about the latest video game controller wouldn’t suit a medical site, but it would work beautifully on a gaming site!

Try to tame visual ads’ “gaudiness factor.”

Lots of flashing colors, bad font choices, and low-quality pictures tend to plague visual ads, and to some degree a designer/developer can’t change those design choices (much as we would like to!). But you can still place flashy ads on an attractively-designed sidebar, so they’re visible and eye-catching, but they don’t actually interfere with regular content.

(Important: Avoid ads that block content, either as a pop-up window or one of those God-awful slide-in ads that gray out the rest of the screen. I can’t stand those things, and I’m sure I’m not the only user who does. Ads that don’t make the user look at them are best.)

Endorse products you’ve personally tried.

This is a pet peeve of mine: Don’t just randomly endorse a product in a blog post because the people behind the product are going to pay you mega bucks. If I’m a regular user of your website and see that kind of post, I want to know why you like that product, not just “Hey, buy this product, it’s cool–here’s a link, bye.”

It may be harder to choose to write about a product that may not pay you as much, but the company will likely be happier with your ad for them, especially if your passion for the product encourages more business.

Add anecdotes from your testing of the product you’re advertising.

Going off the last point: tell a story about your use of whatever product you’re writing about. If I’m a regular visitor, I probably already appreciate your honest opinion on things, and I enjoy your writing style–why not show off your ability to share your opinion by telling about your first experience (or seventieth experience) of the product? I’m sure I could write some pretty and informative prose about my favorite shampoos and favorite jeans than I could ever write about a mascara brand I’ve never tried, for instance.

Summary

Make ads and sponsored posts a true extension of your site, and make them meaningful and useful to your users. Junky, purely annoying ad content should be a definite thing of the past!

Monday in the HTMLab

The (Necessary?) Evil: the Pop-Up

1 Comment

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

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

Bad Pop-Ups

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

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

Good Pop-Ups

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

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

Other Important Notes about Pop-Ups

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

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

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

Summary

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

Monday in the HTMLab

Designing for Mobile Devices

4 Comments

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

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

Think small for site logo and content

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

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

Choose text and background colors that contrast well

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

Use icons rather than text

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

Make your page easy to tab through using down arrow key

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

Summary

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

Monday in the HTMLab

Should My Designs Be Deep and Wide?

2 Comments

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

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

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

Wider Layout: Pros

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

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

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

Wider Layout: Cons

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

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

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

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

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

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

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

    Summary

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