Category Archives: Web Design

Topics and discussion relating to web design.

15 Common Web Design Mistakes That You Should Avoid

  1. Content that’s not written for the web i.e., non-scannable text.
  2. Page titles with low search engine visibility, think key words in a combination that entices.
  3. Content that looks like an advertisement or content that is an advertisement, I don’t care which books on Amazon you enjoy, they wouldn’t be listed on your site if you weren’t making affiliate money from them.
  4. In-your-face advertising i.e., blocks of AdSense that push your real content below the fold/scroll.
  5. Violating design conventions – see CRAP Design.
  6. Opening new browser windows. Let the users decide, they will come back if your content is good.
  7. Non-standard links, hyperlinks should be underlined, hyperlinks should be obvious, there’s no reason to confuse novice users. Also strikethrough is being used to indicate a visited link – this is silly and should be avoided as it can be easily confused with corrections which is what strikethrough should be use for.
  8. Over using Flash, Flash requires a plug-in, don’t use it unless it actually provides functionality which you cannot gain through other means.
  9. Browser incompatibility, check what your pages look like on other browsers.
  10. Scrolling text, marquees, and constantly running animations.
  11. Complex URLs, they are not good for search engine hits or usability. Avoid.  
  12. Long scrolling pages, break it up, use excerpts if you have to.
  13. Poor navigation. Try and find some old content on your site. Is it easy?
  14. Overly long download times. Use Photoshop or other applications to optimize images for the net. Read points 12 and 8 again.
  15. Too many animations. They are hard on the eye. If you must use them, use for emphasis.

Even in an ever changing environment, such as the net, you must always consider the user experience before and above everything else.

www.pingable.org

CSS Basics – The Box Model

CSS Box Model

Learning how to design using Cascading Style Sheets (CSS) can be a little tricky for the beginner if you don’t figure out a few of the basics. One of the basic concepts in CSS is the box model.

CSS is the code that is used to define design in most modern web pages. WordPress Blogs and Myspace layouts both require CSS.

The above diagram explains how The Box Model works. The entire diagram represents a single Div element in CSS. So if the div was the main text of a page, the width and height would define the area which text will fill. The padding would define the area between the text and the border. And the margin would define the area between the border and the next div element on the page. I hope this basic tutorial helps.

www.pingable.org

The Top 10 Tips For Producing Better Online Video

Publishing video on your website or blog is now easier than ever, however there are some common mistake which should be avoided. With sites like YouTube seeding over 100 millions videos to users every day, video content is everywhere and there’s something for everyone. Here are some points to set you on the right path towards producing better video content for your site.

  1. Use an appropriate codec. Codec stands for Compression decompression. Xvid, Mpeg4, DivX, Flv, Mov and Mpeg, are some common examples of codecs. Once you have selected your codec make sure you use it correctly. For the best quality and smallest file size you will want a codec that uses a 2-pass VBR (Variable Bit Rate).

  2. Work with files that are as close to the original video source as possible. Even if you are compressing the video content down to a miniature size, editing it using the original source file will make a difference in the final quality.

  3. Don’t mess with the intended aspect ratio of the file. If the video was filmed in wide screen, keep it that way. A stretched or squashed video looks terrible.

  4. Crop any black borders. If your video is letterboxed, you need to crop off those black edges as they will waste file space in your final video.

  5. Deinterlace the video if required. If your source video is recorded from TV, it may be interlaced. Interlacing is a process where two fields are merged to form a single frame. When Interlaced video is viewed on a computer the image may have jagged edges, or it may look like it has lines running through it. Most modern video editing applications will have a deinterlace tool.

  6. Display your video in it’s native resolution. If you have encoded the video in 320×240, then display it in that resolution when you use the video on your site, don’t resize it in the html code when you embed it.

  7. Use plug-in detection on your page. If you are embedding video into a site, use plug-in detection to ensure that the user doesn’t need to think. There are javascript options available to make this decision for your reader.

  8. Be careful where you place video on a site. It does use a lot of resources; system memory and Internet bandwidth, so don’t place it to load automatically on your homepage, a user on a slower connection isn’t going to bother. If you really need a video on your homepage, don’t have it starting automatically.

  9. Consider blog hosting options. If you have the available bandwidth on your hosting plan or server then you could consider streaming the video, or offering it as a download or video podcast. If you don’t have tons of bandwidth to spare, you need to consider using a service like YouTube, and embedding the video.

  10. Embed the video in the page properly, don’t just link to the file. Just placing a hyperlink to your video file probably isn’t the best way to get your users to view it. Use the correct html to embed the file so the screen appears within your page.

I hope you find these tips useful for your projects involving online video.

Many of the ideas of this article are sourced from a feature by Jonathan Green in the September 2007 dot Net magazine.

www.pingable.org

What Does Your Blog Look Like On Other Browsers

I had the awful experience the other day when showing my blog to a friend on their computer. I found out what my blog actually looked like in IE6. As you probably know, web browsers tend to behave slightly differently to each other, handling formatting in different ways. So how do you know what your site looks like on a different browser?

The problem that IE6 was having with Pingable was that some screenshots I had used filled the entire width of the content column, and the margins of objects surrounding had coursed IE6 to push the right sidebar down to below the left sidebar…ugly.

Unless you own three different computers, a MAC, a Windows PC, and a Linux PC, it’s impossible to see what your site will look like on every possible web browser.  Any number of your users could be browsing on a different browser that may be having all sorts of issues with the formatting of your site. So what’s the solution?

Browser Shots

This site takes screenshots of your Web site in different web browsers then posts them for you to view. The process is rather slow, however, it is very reassuring to know what your site looks like on other browsers. It is well worth a visit if this sort of thing worries you.

Update: Another useful site on this topic: Any Browser

www.pingable.org

Is Your Web Design CRAP?

I want to discuss some of the key principles of design. When I teach design to school kids I use the acronym CRAP for them to remember, which stand for: Contrast, Repetition, Alignment and Proximity. These terms come from the book The Non Designers Design Book. If you evaluate a design using these terms, you can see how they are almost always present in well designed sites and print.

Contrast – the difference in visual properties that makes an object distinguishable from other objects and the background. – Source: Wiki

Skelliewag Screenshot

Original theme used at Skelliewag Grid Focus

Skelliewag makes very good use of contrast. The dark text and page elements make them easily distinguishable from the background, and there is also a contrast in size used in the logo where the .org font is much smaller than that rest of the letters.

Repetition – repeat styles down the page for a cohesive feel. Source: Vitamin Features

Mosaiko Screenshot

Among other good design features Mosaiko makes good use of repetition. There is a button section in the side panel where the color of all the logos have been altered to keep the color scheme repetitive. The color scheme is consistent throughout. The article image header shape and size is repeated throughout. Font sizes and design are repeated also. Overall, a very effective site design.

Alignment – Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Source: Vitamin Features

Brian Gardner Screenshot

A strength in Brian Gardner WordPress themes is that they all seem to have very good alignment. Have a look at his homepage and any of his themes to see good use of alignment.

Proximity – Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different. Source: Vitamin Features

John Chow Screenshot

One of the main strengths of John Chow’s new theme is the effective placement of page elements, which gives the site good proximity. The four blocks visible in the screenshot show related objects grouped together effectively.

Final Thoughts

Evaluating your design work using the CRAP design principles is good way to double-check your work. If you constantly question the details of your design work, good habits will develop.

www.pingable.org

Pro Blogger and John Chow Theme Upgrades

The last few weeks have seen some very high profile bloggers do some major redesigns on their blog themes. First we saw Darren from Pro Blogger completely revamping his blog. And today John Chow has finally ditched the “Misty Look” theme for a classy new professional theme.

What can beginning bloggers take from some of the design decisions that these pros have made?

Problogger.net logo

Overall Impression – I am a fan of the new Pro Blogger theme. I think it’s crisp and modern and makes use of some innovative features.

Landing Page – The new look Pro Blogger makes use of a landing page. What this means is that when you go to the home page of Pro Blogger you are taken to a page with all sort of links and information about his site instead of to the actual blog itself. The reason why this is great for Pro Blogger is that Darren has a huge archive with lots of great articles. It is a real resource for anyone interested in blogging, and using the homepage to promote all that archival content is a great way to get extra hits on not only new content, but all the content he has created over the last few years. So if you have a well established blog, using a landing page like Pro Blogger may be a great idea, however for a beginning blogger it’s probably not going to be the best idea.

Problogger.net Screenshot

Massive Footer – Pro blogger has a huge page footer, which has been a trend in blogging of late. The footer on pro blogger is so large that it fills the entire screen of my wide screen laptop. A footer is a great place to have content that is useful for your established readers. So I wouldn’t recommend advertisements. It is on the bottom of every page in your blog, so you want it to contain navigational content, categories, maybe some plugin content with various lists of recent comments or top commenter’s.

Featured Post – The landing page of Pro Blogger has in a key spot a section called featured post. I think this is a great way of promoting an article you are particularly proud of or think is very good or important. This article from Max Limpag will show you how to use categories, to manipulate your WordPress blogs layout so you can have a feature article, however it requires some expertise.

Color Scheme – The new color scheme on Pro Blogger is crisp and modern. It is consistent throughout the site, and I think it works very well.

Logo – The new Pro Blogger logo is a point of discussion. I think it is okay, but not great. It uses the color scheme of the blog and makes good use of fonts. Where I feel it is weak, is that it would look average without the color, or if it was very small. A classic logo should look good in black and white, and should also look good small or large. I don’t think the new logo quite pulls this off. It’s just a minor criticism, of what is overall a great new theme.  

John Chow Logo

Overall Impression – I think the designer of John Chow dot Com has done a great job. It is quite a different approach to Pro Blogger, however, it is still very good design.

Above the fold – The key space above the fold of the page when you load the site has no actual article content, instead it promotes subscriptions, his free Ebook, Popular articles and various money making programs. This is like an equivalent to Pro Blogger’s landing page, as it directs visitors of the site to key content.

John Chow Screenshot

Still with the Super Car – It wouldn’t be John Chow dot com if it didn’t have a ridiculous super car image filling key space in the header of the site. The Famous Pagani Zonda is still there, however this time the new photo is smaller. Why I think this is important is that it’s a trade mark of John’s Blog. You want users to remember your blog, and I think the super car is John’s way of reminding return users that they have been to his blog before.

Crisp Color Scheme – I think the site makes good use of color and is consistent throughout. It is very modern and I am a big fan of the overall look of the site.

Final Thoughts

I think it is a good idea to keep an eye on what these very successful bloggers are doing. Often they set trends which others follow. However, it is important to remember that what works for them isn’t always going to work for you. Both John Chow and Pro Blogger have huge readerships, and are well established, which not only gives them the budget for such great design work, it also gives them the authority to influence what is considered good and what isn’t.

www.pingable.org

Important Points to Remember While Choosing a Theme

When selecting or designing a theme for your blog there are some key design considerations. How wide should it be? How many columns should you use? What colors work best? What fonts are easiest to read? What color schemes are easiest to read? This article will look at some of these decisions.

How Wide Should Your Theme Be?

As someone who blogs on a wide screen laptop it is all to easy to forgot that not every screen resolution is the same as mine. So what looks great on a wide screen may look average on a smaller screen, or be unusable on an old dinosaur CRT. Most of the theory on web site screen resolution suggests that you shouldn’t go wider that 800 pixels. Most of this theory is old, and almost every Internet user has a screen that at least has a horizontal resolution of 1024. So is it safe to go with a a theme that is 1024 wide? Probably. The situations I can think of where it may be better to have a 800 width theme is 1) if your niche is likely to have a lot of readers who may be viewing your blog on their portable device i.e. phones, or PDA’s etc. 2) You blog with-in a niche where the characteristics of that niche lead you to believe that most people have really old computers i.e. Windows 95 & 98 user tips. The other option is to have a fluid width theme where the objects on your page move depending on the screen size the page is being viewed on. Although this may sound like a good solution it tends to open another whole can of worms relating to page element placement, so it most situations this probably isn’t a good option.

How Many Columns Should Your Blog Have?

Pingable is three columns and has a fixed width of 1024 and is centered. Three columns gives you more opportunity to have side bar content above the fold. The fold of a web site is a term used to label the upper region of your site as viewable when the page first loads without scrolling. You can have features such as recent articles, badges, ads, etc displaying more content in a cleaner fashion than the same theme in two columns. To view some amazing three columned themes view Arpit Jacob from Clazh’s article with a gallery showing some of the Best 3 Column Themes for WordPress. 

Blog Color Scheme

When it comes to selecting a color scheme for your blog there are two main considerations. Attractiveness and readability. Of course you want your site to look good, so picking a color scheme that looks attractive is important. Readability is also important because if people find the colors you have selected difficult to read they won’t bother reading. It is also important to mention that a small proportion on the world’s population are color blind, so certain color schemes may actually be completely unreadable to them. I think black text on a white background is the best option almost always, as it is both easy to read, and if used well looks great. CSS Juice has an article on Popular Color Scheme Generators. You could use some of the tools listed in this article to work out what may work best for your site.

Fonts

There are two main types of font. Serif and San Serif. Serif fonts have flecks on the end of letters to help your eyes flow between words like traditional hand writing. An example is Times New Roman, the default font in MS word. An example of a San Serif font is the font used on Pingable. For digital media like a blog, San Serif font’s look cleaner for larger bodies of text. Serif fonts tend to be a bit fancier so using a serif font for your heading may be a good choice.

Final Thoughts

If you have got this far through the article then I hope you you have learnt something that will help you with design decisions for your blog. Hopefully I have provided you knowledge as to why a certain theme may be a better option for you than others, or why that theme with yellow text on an orange background isn’t a good choice. Anyway, thanks for reading and good luck with your web design or blogging project.

www.pingable.org