Tag Archives: images

It’s Trendy to Be Illustrated

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!

Icons Are Like Candy

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!

Bibbidi-Bobbidi-Boo with CSS

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

Without CSS: A Sad, Sad Layout Indeed


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

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

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

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


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

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

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

JPG, GIF, or PNG: This Is The Question

jpggifpng
Most beginning web designers have some difficulty with file formats, especially concerning images–I know I certainly did when I was starting out. There are three separate formats for images, and it’s hard to know which format is the best for saving image files that you’re going to display on your website, either as part of your layout or as part of your content. You don’t want the images to take two days to load, but you don’t want them to look like you used them for toilet paper, either. What is a web designer to do?

JPG: Best for Photographs, Not for Graphics

When I first started out, I read a few tutorials here and there about image saving, but I really took to the JPEG file format because it saved my images in such a small kilobyte size, which was and still is important to me. I was very impressed with how JPEG compression packed the image into such a small space that it transmitted well even over a dialup connection, so I began using .jpg format for all of my layout images, content, everything. It’s sort of the same principle as admiring someone who’s managed to pack a ton of stuff into their suitcase–you sit there wondering “How’d they do that?” Little did I know how much JPEG had left out of my images–like people leaving half their outfits at home to save space.

I don’t claim to know how JPEG compression works, but for the most part, it tends to leave a good bit of information out of your image, especially when you save it as a JPEG and choose “Low” or “Medium” quality. The blown-up versions of the two images at the first of this section show you what results from saving an image at “Low” or “Medium” JPG quality:


From left to right: Low: 2.70 KB; Medium: 3.74 KB

As I’ve heard it described, JPEG, especially low- or medium-quality JPG, is a “lossy” format–it’s like your image’s “suitcase” has a hole in the bottom. It sure is lighter when you get to your destination, but there’s a reason for that–the style of compression leaves out some of your image’s pixels to make the file smaller. The JPG file format doesn’t work very well for layout images and small icons because it tries to make up for all the pixels it left out, leaving your image rather pockmarked and subtly polka-dotted with oddly-colored pixels. Once you go up the quality scale, however, you get much better results, but you’re going to have to have a bigger file size, as shown below:


From left to right: High: 5.99 KB; Very High: 8.72 KB; Maximum: 13.7 KB

The blown-up versions below show how much better the image is constructed:


From left to right: High Quality, Very High Quality


Maximum Quality

But do not despair–JPG is absolutely wonderful for photographs, for some odd reason. I’ve taken to using JPG sparingly or not at all in my layout designs unless the layout features a full-color photograph or two, and if I have lots of pictures, I’ll use JPG to compress them without losing too much. (I find that JPG “Very High” quality blends the best of both worlds–smaller file size and good-looking product.)

GIF: Best For Icons and Little Graphics

I used to never touch GIF files except to make random little animations. I thought the file format was overly bloated–certainly its files were usually twice as big as JPG files of the same item. Little did I know, the format was actually going to prove quite useful to me! It may not be as good as JPG at compressing files, but it is great for making your layout tick.

As you can see below, there are four different sub-formats within the GIF format type. Again, I don’t claim to know how each of these works, but I have noticed that “Perceptual” and “Selective” generally turn out the best results; “Adaptive” and “Restrictive (Web)” make me die a little inside, as a web designer, because of the loss of colors. These formats generally correspond to how many colors make up the palette that the image is created from; “Restrictive (Web)” pulls from the smallest palette.


From left to right: Perceptual: 5.77 KB; Selective: 5.75 KB; Adaptive: 5.83 KB; Restrictive (Web): 2.49 KB

For certain, GIF files are terrible when it comes to full-color photographs. But they are wonderful for creating tiny layout graphics that would have otherwise been mistreated by the wrong end of a JPG format. I have used the GIF file format to make some of my first semi-transparent images, as well as the well-beloved transparent “spacer” image. Also, I still use GIF format here and there to make small but readable icons, as well as some of the infographics for my articles.

PNG: Best for Big and Detailed Graphics

Now we come to the file format that is my favorite for web designs as of late. It used to be that I couldn’t even open PNG files on my computer at all–it would load an error message if I went to a site that had PNG files as part of its content or layout. But that was in the dinosaur days of design, I suppose–nowadays, PNG is the great beautifier of the Internet, doing well at saving fully-colored graphics with an even smaller file size than GIF usually can.


PNG-8: 5.43 KB

This image is exactly the same as the GIF image, but PNG saved it with a few less bytes than even the smallest of the quality GIFs (excepting “Restrictive”, which is tiny file size at the cost of a good-looking image). Again, not sure why there is this difference, but I like it–anywhere I can save on file size without losing quality is great for creating a fast-loading and good-looking website.

It also seems to me that PNG does a better job of maintaining the colors I use in my designs. Sometimes, when I save a layout’s pieces in JPG or GIF (and especially GIF for some reason), the colors in the image change, just slightly, just enough to throw off my CSS color codes and make me have to go back and resample the image for my colors. Now, with PNG, I find myself more able to go straight from Photoshop to Notepad to code, and not ever have to refer back to my image for colors, because they’re right on target!

As for using PNG-8 versus PNG-24, I find that PNG-8 does most of what I need it to do. However, if my image just HAS to be highest quality or has transparency in it, I choose PNG-24–it may add half again to the kilobyte size, but it produces the smoothest-looking image. Compare the two below:


From left to right: PNG-8: 5.43 KB; PNG-24: 11.7 KB

Lastly, PNG seems to be better than GIF at handling transparency and not having strange chippy pixels on the sides of the supposedly-“transparent” image or icon. See evidence of this goodness below:


From left to right: Perceptual GIF, Selective GIF, Adaptive GIF, Restrictive GIF


From left to right:  PNG-8, PNG-24

Summary:

If you’re not sure what kind of file format your images need to be in, remember that JPGs are best for photographs, GIFs are best for simple web graphics (icons and the like), and PNGs are best for detailed web graphics (big layout pieces). These simple tips will save you tons of time working on and saving your images!