Tag Archives: webdesign

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!

Fast Loading Times: A Personal Trademark

fastloadingtimes
Since I began designing and coding websites in the fall of 2003, much has changed on the Internet. Websites can now include more scripts, plugins, and images; websites are just simply BIGGER than before high-speed Internet and social media became more widespread. But I still monitor the file sizes for my layout graphics, post images, and Web pages, because I still like my pages to load quickly, and I still consider loading speed to be important.

Why I Concern Myself with Loading Speed

I suppose part of my design style got stuck in the pre-high-speed-Internet era, since it has only been since winter 2013 that I finally could get any kind of high-speed Internet at home. But if we designers and developers take the time to learn how to make our sites load quickly, even on slow connections, that makes it more likely that our content will be read, and hopefully that visitors will return–something we all want.

For instance, many people now take in Web content through mobile connections, which can be slow depending on individual data plans and signal strength in the area. Why choke that slower connection with unnecessary “junk” on our layouts, or in our files? Why not polish up our sites so that even on a weaker strength mobile connection, our content still loads quickly?

Ways To Optimize Loading Speeds

#1: Keep images to a minimum.

One of the main ways I streamline a page is to edit down my images as much as possible, including just enough visual detail without going overboard on file size and complexity. With mobile web usage on the rise and flat design theory currently in vogue, many other designers are moving toward this “less is more” concept. Many things which previously could only be achieved with images can now be accomplished with HTML special characters, CSS styling, or icon fonts, for instance. (And there are quite a few other CSS3 and HTML5 tricks, which can reduce or even eliminate the need for images altogether!)

#2: Divide up the content into smaller pages.

Another way I streamline is to divide long pages up into smaller pages and make a sub-section out of them. Yes, that means more links to click or tap, but it also means your users don’t have to load huge pages of material and waste time scrolling around trying to find what they want. Just make sure you provide clear navigation paths, like breadcrumb navigation, so that users can easily find their way around your site’s content!

#3: Compress images.

Compressing your images may seem like an unnecessary step, but when you’re trying to save kilobytes (or even megabytes) wherever possible, this can REALLY help! Choosing the right type of image compression, however, is key. (If you’ve ever tried to save something as a Web-Color-Restricted GIF file, you’ll know what I mean by a “grainy GIF.” Ugh, gives me nightmares.) See my post about JPG, GIF, or PNG file types to see more about which compression style is best for the type of image you’re making.

Summary

With just a few simple changes to the way we construct our pages, we can make our sites load super-quick on just about any connection speed and device. It’s worth the time we spend behind the scenes so that our users have a much better experience visiting the fruits of our efforts!

What’s a footer for?

whatsafooterfor
Most are ignored altogether. Some are sparsely populated with a line or two of text. A rare few are overstuffed with information. What is a footer, technically, and what is it for in web designs?

A footer is simply the bottom of your web page. (In some PHP designs, the footer is actually in a separate file, called either “footer.inc” or “footer.php”, and included using the following code: <?php include(‘footer.php’); ?>)

Generally speaking, web designers won’t put a whole lot of stuff in the footer, since it’s at the bottom of the page and most users of your site aren’t going to scroll down that far. But lately, there’s been a trend in web design to stuff one’s footer section with content–anything from author information to a full sitemap, from a collection of photos to a selection of favorite links.

I took screenshots of various styles of footer-formatting to show what I’m talking about, going from smallest to largest:

Mini-Footer


(click image for larger version in new window)
This footer, from Infektia.net, has tiny text and just a few helpful links to the user. This matches with the overall minimalist vibe of the layout and doesn’t compete with the content for the user’s full attention.

Styled (But Still Small) Footer


(click image for larger version in new window)
PacificDusk.org’s footer contains a tone-on-tone world-map image (left-aligned), as well as a funky site slogan and a few well-chosen, helpful links. This gives a punchy, graphic finish to the end of the webpage without being overly detailed.

Bigger, Well-Spaced Footer


(click for larger version in new window)
Though this footer from Kloud-Nine.com is bigger vertically than the other two footers we’ve looked at thus far, it’s still simple because of all the white space around each of the elements. And, surprisingly, the bigger text size offers readability and simplicity as well!

Super-Detailed, Super-Organized Footer


(click for larger version in new window)
Detailed imagery and clearly-delineated content boxes makes this footer from a previous version of EvolvingOctopus.com lots less confusing than it could be. Even though there’s a lot of information present, it’s not overwhelming because it’s organized attractively.

My Personal Footer Style

I’m personally not a big fan of stuffing footers with lots of info, because I often find myself wondering, “How many people are actually going to look at this stuff in my footer?” I would rather put all that cool content into a sidebar where it is much more easily visible when a user first loads my page. But that’s a personal decision on my part, part of my style of building websites. As I get better with web design and better with content management, I find myself branching out into new styles, and one new style may just be a larger footer than I’m used to!

Footer Styling/Content Tips

If you like the idea of putting content in your footer, I would recommend making it simple–a small selection of links that are easily readable, for instance, or thumbnails of some photos that are significant to you. Crowding a footer full of information can be visually overwhelming, but an undesigned footer can be an unsatisfying end to an otherwise cool webpage. Keep it in balance!

If you’re not putting content in your footer, a “back to top” link in your footer can be very appropriate if you usually have long pages full of information. (I generally put a “Proudly part of WithinMyWorld.org” link in my footer, and perhaps a few other links, but I don’t add much else.)

Lastly, whatever you’re putting in your footer, be it links, pictures, content feeds, etc. make it clearly labeled and organized. Your users will thank you!

Summary

As the above screenshots show, footers can be anything you need them to be on your website. For taste purposes, I like a clean and uncluttered-looking footer, but they can be as big or as small as you like. Whatever you do, make it meaningful to your website and easy to read!

Navigation Placement, Part II: New Ideas to Try

navigationp2
In last week’s post, we looked at 3 traditional navigation placements in layout design, and briefly discussed the pros and cons of each. But there are some tricks to changing up and decorating the navigation itself without making it too hard to use, as you’ll see!

Idea #1: Mix in a few icons as well as text links.

iconfonts
Font names, from left: Webdings, Wingdings, Wingdings 2, Wingdings 3, Stateface, Socialico, Nymphette, Entypo, Bergamot Ornaments, Modern Pictograms.
Navigation doesn’t have to be just plain, boring text links–icons are a modern webdesigner’s friend! For instance, you could use the Facebook icon shown above to link to your site’s Facebook page, or you could use the speech bubble icon to show where users can leave comments, etc.

Most designers rely on icon fonts for this; Modern Pictograms, Socialico, and Entypo (all linked above) are some of my favorites, and there’s a more comprehensive list here. To use your icon fonts, you can either link and style them directly in your CSS using the CSS property @font-face (more about that here), or you can use a graphics-editing program to type out each of your needed icons and save them as individual images. Just make sure your icons all have transparent backgrounds so that they blend in more seamlessly with your layout.

(Note: I included some ornamental icons as part of the above graphic as well, for the purpose of dressing up your navigation if you don’t like the idea of just having clickable icons and no text. Icon fonts are multipurpose!)

Idea #2: Keep similar links together.

A long list of unsorted links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about grouping like pages together within your navigation instead?

An example would be my City of Heroes site, Skies over Atlas–I placed all my site content links going down the left side, and used a horizontal navigation bar underneath the header image for my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. Even though the navigation is in the same general area on the page, one part of it is devoted to site content, and the other part is devoted to user interaction.

You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.

Sorting your navigation this way can help your user more easily pinpoint what area of the site they wish to go to. Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!

Idea #3: Combine your header and navigation for a super-streamlined design.

For the tidiest, most mobile-friendly design, pull your navigation into your header space–in fact, just a site logo or site name text plus a horizontal navigation bar can BE your header! This way, your navigation is up where your users see it when the page first loads, and it leaves more room for your content so that perhaps your pages won’t even scroll so much. Your navigation bar can then be colorful or even patterned to play off the colors in the rest of your design, drawing attention to it without making it huge or heavy with text links.

Additionally, using social media icons alongside text links in a horizontal navigation bar at the top of the page can highlight your navigation further, bringing the user’s attention to it as the rightful central hub of your site. As a user, I love seeing an organized navbar like this; I know I won’t have to worry about searching the rest of the page for info I need!

Summary

I hope the ideas in this two-part series have started your brain percolating about navigation. It may sound like the most boring part of your website, but with these tricks, it certainly doesn’t have to be!

Navigation Placement in a Web Design, Part 1: Traditional Placements

tradionalnavplacements
Part of designing a website is determining where the site’s main links–its navigation–should be displayed in a layout. It’s important to place the navigation in a clearly visible spot, where the user does not have to scroll or hunt endlessly for it.

Yet many of us webdesigners balk at just putting the navigation in the same tired old places in a layout every time; you want to be able to innovate just a little, make your layout look different from everybody else’s. Yet your site must still be easy to browse.

With that in mind, what are some of the traditional navigation placements?

Position #1: Left of Content

navleft
Many websites nowadays have at least some navigational links placed at the far left of their layouts, like the graphic above. For left-to-right readers, this works great, because the left-to-right reader’s eye instinctively navigates to the top and/or left of any page to begin viewing, and having navigation placed there can direct them quickly to your content.

However, this placement being so traditional means that it can be rather boring in terms of design. How much can you innovate a left-aligned navigation without simply imitating what a thousand other webdesigners have already done?

Position #2: Center-Aligned Over Content

navtopcenter
This navigational position is great for sites that don’t have a whole lot of links in their navigation, and it’s become a big trend in design as of late. It looks clean and sharp, blends in with the layout a lot better than left-aligned, and it allows room for one or more sidebars of extra content beside your main content block. (This has been especially adopted for mobile-friendly layouts!)

However, this presents a problem when users (especially desktop users) are viewing extra-long pages of content: in order to browse to another page, you have to scroll all the way up to the top again to click on another link. All the “Back to Top” links in the world can’t permanently solve that problem.

Position #3: Right of Content

navright
This is actually a favorite navigation position of mine, because it’s a bit unexpected. This way, users are drawn to your index page’s content first. If you’re creating a site that’s meant to be browsed slowly and thoroughly, this is a great design, and it works well for personal sites.

But the problem with this navigation position is also that it’s unexpected. People may spend more time hunting for links than they do clicking on them. How can you draw more attention to the links without putting them somewhere else on the page?

This and many other issues are tackled in Experimenting with Navigation Placement–click to read the 2nd part of this article!

I love display: block!

ilovedisplayblock
Since being introduced to the CSS property display: block by a dear online friend, I have used it to great effect in several layouts, mainly for navigational purposes.

How display:block Looks and Works

This is how I generally use this CSS style in my layouts, because I’m making only the links in my navigation display in a block format:

#nav a {display: block;}

Here’s an example of what display:block can do, from one of my domain’s previous layouts:

I love how clean it makes the navigation look; I actually like it so well that I’ve used display: block-style navigation on a lot of my websites. (I guess I’m a proponent of the saying “if it ain’t broke, don’t fix it.” :D)

A Few Padding and Margin Tricks with Display:Block

There are ways that you can space the links out or crunch them together to create any effect you desire, just using widths and heights specified in your CSS:

  • For 10px of space all around each link: #nav a {display: block; padding: 10px;}
  • For 10px of vertical space between links: #nav a {display: block; margin: 0px 10px 0px 10px;}
  • For 10px of horizontal space between links: #nav a {display: block; padding: 0px 10px 0px 0px;}

(Note: when you do padding or margins with 4 numbers like I just did, the first number corresponds with the top part of the link block, the second number corresponds with the left side, and so on, clockwise around.) And this is just for demonstration; there are lots of ways you can innovate with padding and margins when it comes to using display: block! Try different pixel widths and heights, and see what works best for your site.

Using a Background Image with Display: Block

Secondly, I like that you can decorate the link “blocks” with background images, like a simple gradient or a pattern, especially for an a:hover link pseudoclass. Having a navigation link highlighted by a pretty pattern in the background when you hover over the link can be just the right touch of detail for a design. Doing something like this would involve your own version of the following code:

#nav a:hover {display:block; background-image: url(‘your_image_name.gif’);}

That code is basically just what I did for my main domain’s 11th layout, seen again here:


See the faint blue gradient over the first part of the word “domain?” That’s the background image hover–no Javascript needed!

Other Beautiful Things about Display: Block

Lastly, I like that you don’t need a “<br>” between each navigation link. It’s one less thing you have to type, which is always good for a web designer, since we’re usually typing large amounts of semi-intelligible code at a time. And it’s amazing how a missing <br> tag can quickly bungle up a layout! (Believe me, one little bit of unnecessary code can make quite a headache!)

In short, display:block can give you a CSS-only way to do something that looks as neat as a table without the clunky borders or endless <td> tags in your code. I love it!