Tag Archives: webdesign

Monday in the HTMLab

The Renaissance of Web Animations

1 Comment

renaissance_webanimations
Moving images on the Web have now come full-circle–first fashionable in the early 2000s, becoming passé in the mid- to late 2000s, and now back in style thanks to sites like Tumblr and BuzzFeed. Not only that, but a new format has arisen to possibly challenge the GIF format for its animation crown. The WebM Project describes a new compressed video format, much smaller than typical videos and yet still delivering higher-quality picture than GIFs, with audio to boot.

Because of this, the temptation to overuse animated image formats is again going to soar. But let’s not throw ourselves back into the “bad ole days” of pages so crowded with Flash movies and GIFs that they load slower than molasses. Here are some ideas for (carefully) using animations in your web design:

Feature Just a Few Large Animations Per Page

Since GIFs especially can be large files, don’t clump them all on one page; even super-fast connections will balk trying to load these heavy pages. Instead, have only a few animations load at a time, using separate pages.

If Animations Are Your Main Content, Let Them Shine Alone

When you’re working with animations as your main attraction, make sure the rest of your site doesn’t distract from them. Too many animations (even lots of small ones) equals a busy page!

Subtler Ways to Use Animations

Link Rollovers

Links with subtle movement when the user hovers over them, like a gradient of color washing from left to right behind the text, can give your site a little boost. It’s also fairly easy to incorporate using GIFs and CSS–here’s the W3Schools post on :hover, and a tutorial on hover animations for image links.

New Content Alert

When you have new content, a little animated graphic pointing your users to the updated content can be a cute way to draw their attention without having to write out “Hey, I updated this and this, go check it out.” A simple arrow moving back and forth beside your updated content can be all it takes, for example.

A Site Brand

Since you want to make sure your site sticks out in users’ minds (so they return), you could have a little bit of animation in your site’s symbol, like an animated avatar that you use for all your social media sites connected to your website. That way, when users see that animation, they know they’re on a page that’s associated with your site, and they’ll remember it. Just don’t make it too gaudy or overpowering!

Summary

Web animations are back, but we still have to look out for common pitfalls. Try a few of these tips and see what works for your site!

Monday in the HTMLab

It’s Trendy to Be Illustrated

Leave a comment

trendytobeillustrated
Websites have been shifting away from text, going toward images and videos. Why is this?

Well, there are some solid reasons for minimizing the amount of text on your blog:

The Pros of Using More Images

  1. More people (about 70% of the world’s population) are visual learners–they take in information better with pictures rather than words. Thus, charts, graphs, illustrations, and other images are going to be more easily understood by your audience.
  2. Making images is often easier and more fun than writing up blog entries day after day. Images can be more easily designed in creative and colorful ways than text can be.
  3. Website visitors can more easily save images to their hard drive or share it with other people using social media. You can’t do that so easily with text, even with an excerpt of your blog entry.

But Wait a Minute…

While there are benefits to doing more things by illustrations and images, I believe there are drawbacks, too, and they concern me a great deal, both as an English major and a former Language Arts teacher.

The Cons of Going Completely Textless

  1. Images make us lazy readers; we end up not able to focus on long paragraphs because we haven’t practiced this skill often enough. (This is also called “how to make your English teachers cry”)
  2. Images are harder to format than text, since they are a fixed height and width. You’ve pretty much got to design your site around displaying your images properly.
  3. Images are not always mobile-device-friendly. Ever tried looking at an un-resizable image on a mobile browser? It’s usually blown up too big, or it shows up way too small to be any use. Text is a lot friendlier (and easier to load) on mobile data connections.

What Do We Do About This?

Here are a few ways to include more text on your websites without overwhelming your readers:

  • Include enough images to make your content interesting, but also provide descriptive text captions. (This also makes your website friendly to screen readers)
  • Space out your lines of text using the CSS “line-height” property–whatever your body font size is in pixels, set your line-height to be 4-5 pixels taller. (Example: “font-size: 18px; line-height: 22px;”)
  • Use images as highlighters for your text–place them so that they draw attention to the important points.
  • Write and format descriptive, bold subheadings/headings to make your articles easy to scan through for content.

Summary

Our sites don’t have to be completely text-free in order to be “modern sites”–instead, we can include images WITH our text. It doesn’t have to be one or the other; in fact, our visitors will benefit greatly from seeing lots of different information formats on our pages!

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

Feed Some RSS to Me

1 Comment

feedsomersstome
Aside from content widgets automatically generated by social media websites, RSS feeds are the easiest way to get content from other websites onto your pages. However, the process can be REALLY esoteric, especially if you’re new to the process of incorporating RSS feeds into your personal designs.

When I first started fiddling around with RSS, I had no idea what I was supposed to do with the RSS link…and then, I found a Web service that handled most of the backend code for me.

The Solution: Feed2JS.org

I literally stumbled across this site while aimlessly browsing StumbleUpon–best random search result ever! Feed2JS.org, or “feed to JavaScript,” turns any RSS feed into a block of JavaScript-ed content that can display on your web page.

To test this, I went to their Build Your Feed page, plugged in the URL of the RSS feed I wanted (the first one I did was Last.fm), and then I was given the chance to consider the following options.

  1. Show or hide info about the feed publisher (the website you’re getting the feed from)
  2. Number of items to show in the feed
  3. Show or hide item descriptions
  4. Show item author (if applicable) or not
  5. Use HTML in the item display, or format it with CSS
  6. Show posted date or not
  7. Show the time of post according to your specific time zone or not
  8. Open links in new window or not
  9. Choose UTF-8 character encoding or not
  10. Podcast enclosures or not (link directly to media file)
  11. Create a custom CSS class for your feed or not

An Example of a Built Feed

In the case of my Last.fm RSS feed, I didn’t want a title (because I was going to title it myself with the words “Last Played”). I also didn’t want any descriptions of each song, just the title of the song. I wanted the 10 last played songs to display, and I wanted their info to pop up in a new window so that people didn’t just lose my page.

I also didn’t bother with including the date, time, or author of the post because I felt that would unnecessarily clutter the look of the feed. I wanted it to look as much like a WordPress widget as possible. Lastly, I added the custom CSS class of “lastfm” so that I could style my Last.fm feed just like I wanted it.

So, my Last.fm feed’s Javascript turned out looking something like this in Javascript:

<script language=”JavaScript” src=”http://feed2js.org//feed2js.php?src=http%3A%2F%2Fws.audioscrobbler.com%2F1.0%2Fuser%2F__MYUSERNAME__
%2Frecenttracks.rss&num=10&targ=y&utf=y&css=lastfm”  charset=”UTF-8″ type=”text/javascript”></script>

And this is what it ended up looking like on the actual test page:


I added the Last.fm icon and “Last Played” text myself, but the rest of the info is all Javascript-ed in! Neat, huh?

WARNING! Don’t Forget to Style The Feed!

The last thing about Feed2JS feeds? Remember to style them, otherwise they look pretty yucky on the page–just basic Times New Roman size 12 font, and default link colors (oh, the horror!).

Even though I had specified a custom CSS class using the “Build Your Feed” page, I had no luck styling my Last.fm feed with the class. I even went to the Style Your Feed page and read up on how to construct the CSS classes that my feed ostensibly needed, but it didn’t work for me at all. (Not sure if it was a browser issue or user error–somehow, I suspect the latter. LOL)

So, instead, I styled the display and the links by specifying the link styles of the div with the id “lfm” that contained my Last.fm feed, using code like the following:

#lfm {
background-color: #abb461;
color: #FFFFFF;
border-radius: 10px;
padding: 3px;
list-style-type: none;
font-size: 11px;
font-family: “Arial”, sans-serif;
}

#lfm a {
color: #fbfcf3;
}

This worked beautifully (aside from the silly list bullets that won’t go away despite putting “list-style-type: none;” in my code), so I’m not worrying about the custom CSS class unless I have to. The less headaches I encounter while coding, the better. 🙂

Summary

RSS feeds are great ways to put interactive, live-updating content on your page, even in this age of WordPress widgets and little automatically-generated boxes that do it all for you. Feed2JS provides a quick way to put the RSS feed on your page using Javascript, and through their generated code, you can learn how to code the Javascript yourself one day!

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

Clothing for Your Website: Color Schemes

2 Comments

clothingforwebsite
Choosing the colors for your site’s layout might seem like an arbitrary decision, but in fact, a layout’s colors can have a remarkable impact on your visitors. Using color strategically and beautifully is one more way we as designers can delight our visitors (and keep them on our site long enough to enjoy our content!).

But how do we choose just the right colors, and how do we implement them? Here are a few tips:

Image-Heavy Sites: Simple Blocks of Low-Key Color

imageheavysites

Sites with a lot of images, such as photoblogs, Tumblrs, or craft sites, just need color to visually delineate the site, since the images themselves will be attractive enough to viewers’ eyes. In the illustration above, the “navigation/sidebar” is a different color blue from the “content,” and the lower panels are done in light green, enough to draw attention when the user gets to the bottom of the page. This separates out the site’s content.

Image-heavy sites don’t need a lot of dramatic color; choosing softer shades of any color will work best, especially colors with lots of white, gray, or black mixed in (such as pastels, slate blue, and jewel tones). Try working within the “warm” colors (red, orange, yellow) or “cool” colors (green, blue, violet).

For Text-Heavy Sites: High-Contrast Text and Background Colors

textheavysites

The number-one concern for sites with a lot of text content is readability, and for that, you’ll want a color scheme with a high contrast between its text and background colors. The example above uses a light blue for the background color and a dark blue for the text, which helps the text stand out. (An even better contrast would be white background and dark blue text, but you can still use lighter colors for your background.) You can arguably use a dark background and light text, but your older visitors will have a harder time seeing the text.

As for which colors to choose, it’s best to stay within the same color family on a text-heavy site. Shades of the same color make the site both easy to read and attractive. (Just don’t use a red background color!)

For Feed-Heavy Sites: Small Shots of Color

feedheavysite

When you have a feed-heavy site (or a site with a lot of little sections you want to draw attention to), you can get away with little pops of different colors. Above, I have used colors from Facebook, Youtube, RSS feeds, and Twitter, with a couple of random colors mixed in, to show how this can work. Tiny bits of different colors helps your visitors see right away that your site has lots of different content–just don’t go overboard! Use unifying neutral colors (I used gray) on the rest of the site.

As for choosing which colors to use, you can just about use any shade of any color you want, since you’ll be using each color in such a small dose. Just try not to use the entire rainbow in your site–limit your color usage, perhaps, to 5 or 6 different brighter colors for the “color shots,” and use neutrals everywhere else.

Get More Color Scheme Inspiration

Be sure to look around you wherever you go for color scheme inspiration. In my hometown, for instance, there’s a beautiful old hotel that was once painted in cream and light pink, with a lot of black wrought-iron details. The colors have all faded somewhat over the years, so that the wrought-iron is now dark gray, the pink is just barely there, and the cream is almost white, but you can still see parts of the building that haven’t faded so much. I took that unexpected color scheme, modified it a bit, and used it for my novel update page. Literally anything can be color inspiration!

Color Scheme Websites

ColourLovers
Adobe Kuler
Paletton
ColorCombos.com

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

Liquid Layouts vs. Ice Layouts

1 Comment

liquidvsice

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

Liquid Layout/Responsive Design

Click for Liquid Layout Interactive Example in New Window

Pro: Expands and contracts to fit browser width

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

Con: Distributes content unevenly and haphazardly

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

Ice Layout

Click for Ice Layout Interactive Example in New Window

Pro: Allows for perfectly-spaced designs

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

Con: Requires side-scrolling or zooming for smaller screens

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

Which Kind Should I Use?

Use Liquid Layout If Your Site Is…

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

Use Ice Layout If Your Site Is…

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

Summary

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