Siam Communications Web Services & Tools » Website Design

Web Services and Tools for Website Designers

Editor — Thu, 05 Mar 2009 17:17:24 +0000

A good designer is only as good as his/her web tools.

Between website design projects, I get a chance to wander the web and I have found some very helpful web services and tools that go into a quick access bookmark toolbar. Over the years we have collected quite a library of useful tools.

Here is my list of web services and tools that have helped make my life easier as a website designer.

Making Sure Things are Working

Are My Sites Up
Are My Sites Up will track you sites to make sure they are still online. The free service allows you to track up to 20 sites and can notify members via email or SMS. Site checks are done up to 25 times per day.
The premium service will check up to 60 sites as often as every 15 minutes and comes with all features of the free service plus Twitter integration and RSS feeds.
Down for Everyone or Just Me
This service will help you determine if any problems with a specified site are happening for all visitors, or only for you. This is a nice web tool for determining if you have firewall problems.

Productivity and Planning

Creative Pro Office
This is a great little suite for managing multiple projects and multiple resources across those projects. Better yet, this web tool is free. It offers Client management, Project management, Resource management at multiple levels, and Financial management modules. We use this web tool to manage our projects and it has proven to be a great help at keeping our web services well delivered and organized.

ScrnShots
This web tool provides an easy way to take, find, and share screen shots of websites or anything else displayed on your screen. You can upload screen shots to your own account, retrieve screen shots, or search others screen shots by keywords.

You can even embed screen shots in your website at full size or thumbnail size. This is also a great web tool to share your conceptual ideas with your website design customers.

HTML Ipsum
Lorem Ipsum
When putting together a website design, it just doesn’t look right unless there is some textual content to show exactly how the design is going to flow. These two web services easily generate any combination of dummy text for you.

HTML Ipsum is good for quick content for paragraphs, lists, tables or any other combination where you need to quickly populate it with some text. Lipsum allows you to customize your output a little bit. They even offer some Lipsum banners for testing out those advertising banner areas of the website.

Graphics, Drawing, Images and Design Tools

Color Scheme Designer
This is a very nice web tool that allows you to select a primary design color and create a color scheme to match. The results are very nice and provides some good ideas for color schemes that I ordinarily wouldn’t have thought of without the tool.

Golden Ratio Calculator
If you don’t know about the Golden Rule of design, you still have a way to go in website design. This tool is a necessity to making your web pages have that indescribable feature that makes people really like the look of your website.

The have a downloadable tool for Mac users, but the online version works well for the rest of us. Simply enter in the width of an area and let the web tool calculate all of the combinations that fit around your number to make it part of the “Golden Rule”.

HTM2PDF
This was a tough one to categorize. It is not really a website design tool, but it is useful in dealing with your customers.

This web tool allows you to convert a web page by entering its URL or you can simply cut and paste the RAW HTML code. They also offer a bookmarklet to convert websites you visit on the fly. They are developing some other tools that you may want to keep an eye on as well. We noticed a screen shots tools and a tools to resize images on the fly. Should be interesting.

Snipplr
A whole slew of useful code snippets for those redundant, but necessary tasks. Example – Country Drop Down List for Web Forms

Web 2.0 Logo Creatr
We love this tool. If your on the road, or just in need of a quick, but impressive web 2.0 style logo design, this web tool provides the goods. Creatr takes all of the hassles of learning an application out of the equation and concentrates on what the designer is after.

The best part is that this is not the only web tool provided, making this a web service. You can also create your own web 2.0 background. They also have a blog button web service as well to easily create those small but effective buttons for your blog.

Finance and Money

Project Estimator
Even though this tool is not intended to provide estimates directly to prospective web clients nor is it intended to generate finished proposals, its output is certainly client worthy. The tools works well for determining (roughly) an estimate for developing a website … or any project you might have for that matter. Each line item is customizable as well as the title and standard rate.

This is one of those web tools that is good to keep around because you will use it at some point.

Social Networking

TweetDeck
Now this is an odd addition to our set of tools and it is very recent. We have started to use Twitter to interact with our clients, and potential clients. TweetDeck has proven to be the most effective way for us to use Twitter to accomplish this.

This web tool allows you to setup several windows to monitor the various types of Twitter communication between you and your followers, or followees. The combination of this tool and Twitter has seen a significant increase in traffic to our web sites. Any tool that can help drive visitors to our site and make them customers is worth a look. This one comes highly recommended.

Related posts brought to you by Yet Another Related Posts Plugin.

CSS Frameworks: First Looks

Editor — Fri, 13 Feb 2009 03:42:12 +0000

CSS can be the most frustrating part of website development. This is solely due to the the inconsistencies and lack of implemented standards on the part of Microsoft for their Internet Explorer (IE). The only reason I still take the time to ensure my web pages look good in IE is because 30% of my visitors are still using the browser.

So I decided to embark on a journey using CSS Frameworks to see if they could reduce my CSS pain and allow me to design a website more rapidly. Here is a summary of my first experience.

I began to consider my options for choosing a CSS Framework in response to a post I saw on Noupe ( 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started ).

I began by going through the list of frameworks reviewed and downloading each one. I have an XAMPP distribution installed on my computer which I use for development. So I unpacked the files for each framework distribution into its own directory from the web root.

It is noteworthy that the version numbers of most distributions are pre-release or beta (i.e. – Blueprint is version 0.8).

I then set out to examine each one for how easy it was to use in my development environment. My first task was to review the documentation and see how easy it was to use. I was reminded of the painful reality that good developers are very impressive at getting your applications to do cool things. But they still lack the desire to document anything to the point that the rest of us can understand how the thing works. This doesn’t apply to all developers of course. But it certainly applies to most of the framework developers.

The most thorough documentation provided was for the YAML (Yet Another Multi-column Layout) CSS Framework. Full documentation was provided in English and German and the examples included were very impressive. But it was still difficult for me to determine the best way to use their CSS classes. In every distribution, I was looking for something that resembled a quick reference sheet of their classes. Looking through the CSS code didn’t offer too much more comfort either. It looked like I would need to spend a lot of time trying to understand what they did before I could begin to use it.

My preferred CSS Framework is Blueprint. The BluePrint CSS Framework had minimal documentation, but it was concise and easy to understand. Of all of the distributions, I was up and coding quicker with BluePrint than with any other distribution. The grid system used is a 24 column approach that allows you to easily specify the width of column and container with just a class.

The BluePrint CSS Framework was the easiest to use and understand from my viewpoint. However, they all need a bit of work to become the Rapid Application Development tools they are striving to be. They have all included fixes for the faults of Internet Explorer, but this is still no guarantee that you won’t have cross browser compatibility problems.

After quickly designing a new layout for my site, I was disappointed to see that IE still didn’t respect my layout options. I needed to tweak the CSS to make the page work in IE. The good news was that the amount of effort in tweaking was far less than if I had developed the CSS from scratch. Also, the website looks great, and as expected in all browsers non-IE. The bad news is that, even after the tweaking, there are still some minor formatting issues in IE.

CSS Frameworks In Summary

I really came to appreciate the challenge it must be to develop a CSS Framework when one of the most popular browsers doesn’t conform to the industry standard. Any respect I ever had for IE is now completely gone.

Many CSS Frameworks still require some work if they want to become what they are meant to be – a Rapid Application Development tool.

It is still early days for CSS Frameworks. I am looking forward to seeing these develop further. I am sure it will become much easier once all browsers comply with the standard.

Related posts brought to you by Yet Another Related Posts Plugin.

Why Validate Your Website – Updated

Eric — Wed, 04 Feb 2009 15:59:36 +0000

Have you ever visited a website and noticed the compliance or validation badge? The badge usually says something like “HTML Valid“, “CSS Valid” or has the HTML or CSS word in it with a big check mark. There are many variations but the idea is to portray the page as “VALID”.

I got to seeing this enough that I began to wonder what it meant. And why was it important that a page be “valid”.

First, let’s understand what it means to have a valid web page. Then, this will help us why we might want our website to be branded as “valid”.

According to the World Wide Web Consortium (W3C), “validation is a process of checking your documents against a formal Standard … for HTML and XML-derived Web document types”. The WC3 develops and maintains the specifications and guidelines for the web in the interest of keeping standards at the heart of what the Internet is built upon.

These same standards effect how browsers work and render web pages.

So as long as your web pages are written, or generated according to the specifications outlined by the W3C, your website site should be “valid”. This is true to a point, and much easier said than done.

If you have ever undertaken a website design project, you have probably played with your HTML files until everything looked absolutely perfect. Happy with your accomplishment, you pop off an email to all of your friends to proudly show off your new creation. Moments later, one of your friends tells you about a part of your page that just doesn’t look right. Horrified, you bring up the page in your browser and feel relieved for a very brief moment to see it render properly. Then you realize that your friend is using a different browser, and that the trick you read about on the web that caused that cool effect was causing the page to render improperly in certain browsers.

Non-valid pages are relying on the built-in error-correction of the users browser. This error correction acts very different across the various browsers and versions. Not so long ago, many website authors used a trick that worked in Netscape 1.1 and suddenly found their pages were totally blank in Netscape 2.0. As browsers have moved more towards being standards compliant, we see less of this issue with the way browsers render HTML and more problems with the way they handle CSS.

This brings us to the reason why to validate your website.

The difference in the way browsers render a page is a primary reason to validate your code. Many of us start out designing websites with WYSIWYG web page editors that can improperly generate a web page, and not necessarily to a published standard. Running a web page through a validation service will point out where any problems might exist.

Many of use also enjoy the creativity we can engage in when designing a site. When rendered properly, these creative tricks are reason for website visitors to be impressed. But if you’re a designer looking to make an impression on a client, and they visit using a different browser, the effects could be disastrous to our website design careers. Validation helps us stick to the standards.

With the popularity of WordPress and other Content Management Systems (CMS), many web pages are generated dynamically. Validation will help point out any errors in our code where the HTML is not being generated properly.

Using non-standard HTML also introduces the risk of having to rewrite your web pages later. There are HTML tags that are introduced from time to time that don’t last very long in the standards. Using one of these may produce some cool effects. But once the browsers stop supporting it, your page will look like an amateur. Does anyone remember the “layer” or “ilayer” command?

Now that we have some compelling reasons to validate, how do you validate a web page?

The crew at W3C have been kind enough to provide a Free web page validation service that tests your pages against the world wide industry standard. There are other services, but as the W3C has taken lead in an effort to prevent web fragmentation, it makes sense to use a validation service that was designed to work to the W3C Recommendations.

They also provide services to validate specific content such as RSS/Atom feeds or CSS stylesheets, Mobile content, or to find broken links in your web pages. The W3C offers a range of Quality Assurance validation tools.

Now for the a dose of reality.

Once you run your web page through the validation service, you will notice some very unexpected results.

If you have used a DOCTYPE declaration (DTD), you will immediately notice that this value is used to determine how the rest of the page should be validated. This makes a significant difference. The DOCTYPE or DTD is required for HTML and XHTML pages and must be spelled out exactly according to the specifications. What I didn’t realize is that there is even a DTD for CSS Stylesheets as well. Here is a complete list of DTDs you can use in your web pages.

Getting past this first step is a major hurdle to getting your pages validated. Don’t get too frustrated. If you cannot seem to get rid of one or two errors, your pages will still render properly. The specifications and guidelines are still going through changes that are difficult to understand for most of us.

It demonstrates the fact that there is some significant ground to cover before we can say that there are a complete set of standards for designing web sites. It also makes you appreciate how far the industry has come and the work involved to get to where we are today.

Related posts brought to you by Yet Another Related Posts Plugin.

Using PDF files – Pros and Cons

The Coach — Wed, 07 Jan 2009 07:23:43 +0000

I have been working on a project recently where the customer has requested the use of PDF files in the content. This actually happens frequently, especially when the customer is not that web savvy. It usually also involves a lengthy discussion on the use of PDF files and the impact to the visitor.

But it has caused me to sit back and make an attempt to understand the perspective of the customer.

Using a PDF file or two is not necessarily a web design sin. In fact, there are points to defend the use of a PDF file. So I thought it might be beneficial to highlight the pros and cons of using PDF files in your website content.

The PDF Basics

If you are not familiar with a PDF file, this is a file format, similar to a Word Document, that saves an electronic version of a document in a format suitable for printing. This file format should NOT be used for online presentation. It should only be used if you want to offer your visitors content for them to print and read offline.

So, why is PDF not suitable for presentation.

PDF File Format Cons

Content formatted for Print – A PDF file is usually formatted to the size of a printed page like A4 or Letter, not to the size of a screen. This makes it difficult to read online as the user needs to spend more time scrolling through the content as they read. Most PDF files have been converted from a document format and as such, are long and boring to read in an online environment.
Browser Loading Times – Since the PDF file is usually a blob of content, it requires extra time to download the entire document before the user can begin to scroll through it. This interrupts the flow of navigation that the user is used to experiencing on the web site as a whole.
Destroys User Experience – Since the PDF file is an independent blob of content, it comes equipped with it’s own set of commands for viewing and printing. These are separate from the standard commands of the web browser or those built into the web page. Hence, it acts like content that is not really a part of the overall site.
Non-Standard Navigation – Working through a PDF file has gotten simpler over the years. But the navigation methods are still very different from the web site navigation or those of the web browser.
Non-editable content – This is listed as a negative, but this point could also be a positive, depending upon your needs. If someone is looking at your content and would like to reference or report on a portion of it, they cannot do so as easy with a PDF file.
Not the Best for SEO – While search engines like Google can index PDF files, it is more difficult to put importance on individual peices of the content with a PDF file. If you are looking to boost your search engine rankings, PDF format would not be the preferred method for presenting our content.

PDF File Format Pros

Protecting Intellectual Property – If you have a portion of content that you do not want copied by visitors, then PDF is the way to go. This format also enables the creator to insert information that stays with the content so readers always know exactly where it came from.
Maintain Printed Format – When sticking to a printed format is your goal, even for an online environment, use PDF. However, you must be made aware that writing content for print is far different than writing for the web. (Net Writing Masters Course)

There are other times when using a PDF format might work better than others. For instance, one project wanted a place where potential investors could download a Powerpoint Presentation for the investment pitch. They converted the file to PDF to reduce the size (believe it or not) and maintain a similar experience than that of the actual presentation. It isn’t quite the same, but it served their particular purpose.

Guidelines for Using PDF Files

If you are going to be offering some of your content in the form of PDF files, it is always a good idea to reference a location to download the latest copy of the Acrobat Reader. This allows the user to get the reader easily without having to perform another search for it.

If you have a link to a PDF file (Making Your Words Sell), note it in the link text or display an icon next to the text. You insert an icon automatically by inserting the following lines into your CSS file:

a[href$=".PDF"], a[href$=".pdf"] {

	padding: 2px 2px 2px 20px;

	background: url("images/pdficon_small.gif") left center no-repeat;

}

You will need to download the Adobe icons from here. This will automatically insert the appropriate icon for any links to a file with the PDF extension.

To summarize, don’t use PDF for content that your users will read online. If you do require a secure format, state to your visitors the advantage of saving the file and printing for offline reading.

Do you have any other uses for PDF files? Any suggestions we haven’t covered here? Leave us your experiences as a comment.

Related posts brought to you by Yet Another Related Posts Plugin.

What's in a Theme

The Coach — Thu, 04 Dec 2008 12:13:42 +0000

We have a new look!

The theme of this site is certainly not the first. And it may not be the last. But we feel that the current theme best reflects our message and provides it in a very nice layout.

And we think it’s cool.

This theme is called Arthemia and was developed by Michael Jubel. We have taken the free version of his theme and customized it slightly to meet our own needs. Michael has done a great job of using WordPress to the fullest to provide a better experience to our visitors.

We are always on the lookout for great themes. And we know that many of you are also looking to make your site look it’s best. So we are going to take this opportunity to provide a list of some of the best known sites for WordPress Themes. If you know of other sites, please share them with us.

100 Excellent Free WordPress Themes
The folks at Smashing Magazine are some of the hardest working when it comes to finding useful, high quality sites. So we thought we would start with their list of the 100 best free themes for WordPress that they have labeled as “high quality themes“.

Best WordPress Themes
This lists contains both free and premium themes for WordPress. It is quite extensive, so be prepared to spend some time on this site.

Top WordPress Themes
This site has a great variety of free WordPress themes. But they also offer Premium themes which we found to be very professional.

WPSnap – Best WordPress Themes
We like this site because it lets us browse themes when we already know some of the attributes we want in a theme. You can browse by color, layout, style, width and more. They have a very large selection of free themes to choose from.

I find it funny when I stumble across a very plain looking site using the default WordPress Theme with the topic of “Best WordPress Themes”. There are many of these sites. It is obvious that the owners of those sites aren’t taking there own advice on design.

We hope you enjoy our list. Please share your favorites.

Related posts brought to you by Yet Another Related Posts Plugin.