CRITIQUE : Featured Design Page

I just put together a "feature design" page to feature more into on my FlipOver planning system (the agendas I've written about on here.) I've gotten to that point where I can't look at it anymore. Will you take a look and let me know what you think? Is it easy enough to understand? Do the links look intact? Does anything look weird on your browser?

http://www.andsothere.com/features.html


Thanks!

QUESTION : Blog Etiquette

This one's from Cari of Le Sweet Tooth...

Hello, Hello!! I am still fairly new to the blogging world, in terms of finding what I want my blog to look like, what I want to post and what I want it to say about me! One thing that I have invested some time in is making it look pretty. Now I would like to add all the little fun gadgets to my page. I am of course very visual and for my "daily reads" section, made a list using the the image of the blog headers, and if you click on the image it will go to that particular blog.

My question is this an okay to feature what is essentially, the bloggers identity on my blog, even when it is linked to the appropriate blog.

I have attached an image of my list! Thanks for your help!

RESOURCE : Requesting Facebook Help!

Does anyone out there have a good resource for developing a successful business page on Facebook? I'm working on one for the shop I'm working at, and I'd like a creative way to feature items, artists, etc.

Any ideas or resources you use?

Thanks, as always, for the help. You are awesome.

TIP : File Formats for Web Graphics

Sometimes I find a beautiful site with only one problem- the designer chose the wrong image format. It's another one of those ridiculous things that can make me crazy... but they aren't doing it on purpose... right? I thought I would put the subject to someone who understands the math/programming side of it better, Patrick. Here's what he has to say about JPEGs, GIFs, and PNGs with a couple of visual aids – alison


Early on in the web, programmers and designers wanted to start using photos and other images for web content. However - these files were big and typical connections were slow, and compromises had to be made. Programmers and mathematicians have been working on these problems for years, and the result is a field known as image compression. In short, some data is thrown out, the file size shrinks, and web browser guesses at what used to be there. These are typically referred to as "lossy formats" because some of the original data is lost, and it's gone forever. Once the data is gone, you can't get it back. There are no magic tricks in existence that can make a blurry thumbnail look as clear as a professional photo. This all sounds bad, but luckily the lossy formats such as JPEG, GIF, and PNG were each designed to cause the least noticeable distortion for their specific purpose.


(Keep in mind that data will be lost when working in these formats. When you are working on master images or on images for print, you should use lossless formats such as TIFF, PSD, .AI, or .EPS that keep every pixel of the original file there.)


Here are some examples of the same images - compressed 4 different ways.

Click on the image below for an HTML page of examples.

JPEG files were originally intended as a way to cram photos into smaller file sizes. They're good for images with a lot of varying details, and a wide range of colors. However - this is all based on math designed to approximate everything and keep throwing out more details until the file is small enough. Quality is based on a sliding scale in applications such as Adobe Photoshop, and the farther you pull the slider towards a "small file" - the less accurate the color, and the blurrier the image.

Good for:

• Smallest size for photos

• Small file size for large-dimensioned files

Problems:

• Color Inaccuracy - Colors change slightly when files are saved. If you are trying to use the exact same color in two areas or in two different files - there's a likely chance they will not match. It will also be nearly impossible to match the JPEG’s background to an HTML background color, so the edges of the JPEG rectangle will show.

• Block Artifacts- Another interesting distortion that's common in JPEGs is the appearance of squares. The math is based on splitting the whole scene up into smaller squares, so as the file is more compressed, the squares appear as distortion in the picture. This is especially noticeable on vector based graphics like logos, or anything with a solid contrasting background color.

• Generational loss - Each time a JPEG is modified and saved - it gets blurrier. The result is very similar to repeated generations of copies on an old copier.

PNG uses math to find patterns in images to reduce the file size. The file will recognize large areas of solid color and other patterns to compress them toa smaller file size. You can also mark a background color as "transparent", where the background of a web page will show through.

When saving a PNG file, you can choose the number of colors used, and a best fit will be found. The more color variation, the less accurate the colors will be. At this point dithering is used. Dithering is when pixels are alternated between two or more colors to approximate another color in between them. (Inkjet printers rely on dithering to get the appearance of all the colors in a photo out of a simple 3 to 5 color ink cartridge, so if you look under a magnifier, you can see some of the alternating colors. )

Good for:

• Solid shapes - edges are more accurate and sharper than with JPEG

• Illustrations & detailed drawings - thin lines and other details remain sharp

• Color matching - if you have several images such as company logos and borders that need consistently matching colors - PNG is the right choice

Problems:

• Once a certain amount of color variation is reached - JPEG will make smaller files

• PNG is not well supported on older photo editing packages such as Adobe Photoshop (pre CS3), so consider GIF instead.

• Some older versions of Internet Explorer from before 2005 do not work well with PNG

GIF is very similar to PNG, but is an older format with some minor differences. It can only use between 2-256 colors, not a full spectrum (PNG can). In general, it works well with older software packages where PNG is not fully supported. GIF can also be used for low quality, looped, animations. The animations are just a sequence of images with no sound, which can be created by Photoshop, Adobe Flash, and video editing programs. However, they can be useful for simple tasks, like animated advertisements and don't require plugins such as Adobe Flash.

Good for:

• Solid shapes - edges are more accurate and sharper than a JPEG

• Illustrations & detailed drawings - thin lines and other details are not blurred out

• Color matching - if you have several images such as company logos, backgrounds, and borders that need consistently matching colors - GIF/PNG are the right choice

• Higher compatibility with older graphics applications and web browsers than PNG

Problems:

• 256 color limit (not typically good for photos)

• PNG makes smaller files in most cases

In conclusion, web graphics have a lot of complexities behind them. However, in most cases, using a PNG is the right thing to use today for everything except photos. JPEGs were designed specifically for photos, and remain the best solution for photos today.

If you would like to research the topic further - Lynda (of lynda.com) wrote Designing Web Graphics, one of the earliest books on the subject. Most of what she covers there is still relevant today, and she has some excellent tricks to get the best quality out of your graphics.

Question : Making link buttons

Rachel made a great suggestion of adding link to buttons to this site. (Basically little images that people can put on their blogs/etc to link back to the Adventures in Making site.)

Well, that's all fine and dandy- I can design them all day, but...

Does anyone have a resource to tell me the best way to offer these buttons, and how to provide the coding?

I know it's out there...

Critique : What's wrong with this blog?

Welcome! I thought a good way to start this Adventure was a review of the blog design. True to everything I've written here, I am now sick of staring at it. Do you see any bugs, spelling errors, or things that can be improved upon?

While you're looking, send an email to adventures@andsothere.com and apply to be a contributor.

Ready... set... go!