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.

Browser Statistics for 2008

The Coach — Sun, 11 Jan 2009 05:15:24 +0000

The browser statistic numbers from W3 Schools are in for 2008, and there are probably not a lot of surprises for developers.

As of the end of 2008, Internet Explorer still holds the lead with approximately 46% usage recorded. But this is not a comfortable lead as Firefox is closing the gap with a usage rate of 44%. In December of 2007, IE held a comfortable 56% of the market share compared to 36% for Firefox.

The past year has seen a significant loss of share for Mozilla and IE5 has completely disappeared off of the radar. Based upon the track record of the Netscape browser, which disappeared off of the reports in 2006, this could also mean that Mozilla usage could disappear below the radar as well.

The Safari and Opera browsers have seen a slight increase, and are still strong contenders. A new contender in this years results is Google with their Chrome browser. They entered the results with a healthy 3.1% share, outdoing both Opera and Safari in their first 3 months of distribution.

The statistics for display and screen resolutions have not yet been updated.

Complete statistics for browser usage are here.

A word for Designers

As a Web Designer, you should not rely only on statistics. Statistics can often be misleading and their source MUST BE QUALIFIED.

The stats that are referred to here come from the log files at W3Schools as well as other sources that they monitor to ensure the quality of their numbers. The statistics provided are from a wide, global audience. Global averages may not always be relevant to your web site. Especially if your content is directed only to your local area, city or country. Some web sites attract professional developers using professional hardware, while other sites attract hobbyists that use older computers with lower specifications.

You should also be aware that many statistics applications may not provide accurate browser detection. It is quite common for many web-stats report programs to not be able to detect the newest browsers and therefore incorrectly report them.

If you have been running a website for some time, have a look at your web-stats application in the control panel provided by your hosting company. These will allow you to view the browsers and screen resolutions of your website visitors. In turn, this will help you understand the best screen size, and browser combination, for designing your web site.

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

Presenting your Blog on an iPhone

The Coach — Thu, 08 Jan 2009 04:51:02 +0000

The computer screen no longer holds the exclusive position for viewing web content. In recent years, more and more people are viewing your content on mobile devices. The iPhone has gained much attention in the press and is a popular mobile device used across the globe. So shouldn’t we begin to think about these visitors when designing our sites?

One group that has already put much thought into this topic are the folks at Brave New Code. They have developed a WordPress plug-in called WPTouch that makes formatting your content for the iPhone extremely easy. We use this plug-in on our site and have been very pleased with the results.

WPtouch automatically transforms your WordPress blog into an iPhone application-like experience when viewed from an iPhone or iPod touch. It comes complete with ajax & effects, and all the standard WordPress blog features: search, login, categories, tags, archives, photos & more. WPtouch also allows for near-complete customization through your WordPress admin.

As the Admin, you get to define which content and pages from your blog are visible to iPhone or iTouch users. You can even assign individual bookmarking icons to each of these pages. The theme operates completely separate from your theme as viewed on a computer.

But if your users would rather see your computer based theme instead of the iPhone enhanced theme, there is an option in the footer on WPtouch for your users to easily switch between the WPtouch view and your site’s regular appearance. It’s that easy. The plug-in adds a little snippet of code which will be shown only to iPhone/iPod touch users and give them the ability to switch between the two views easily.

If you have an iPhone or an iPod Touch, have a look at our site and tell us what you think. We would very much like to hear your comments on this plug-in.

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.

Most Popular Browser, Screen Size

The Coach — Tue, 30 Sep 2008 07:26:27 +0000

Two of the biggest issues that are a concern to every web developer is how the web site will look in various web browsers and what screen size should be used for the basis of the page designs. So we’re highlighting 2 online web developer tools that make a great addition to every developers arsenal of tools.

Browser Display Statistics

W3 Schools offers a very comprehensive set of statistics on browser usage and screen resolutions used most often by Internet users. They also break down the Browser Information into a full set of Browser Statistics that give a snapshot view of which browsers are currently the most popular along with a history that shows how things are rapidly changing in the browser world.

There is also an up to date, and historical view of Browser Screen resolutions used. This is very interesting view as it plainly shows how the 640×480 display resolution has disappeared over the last few years and the 1024×768 is rapidly becoming the lowest resolution, with 800×600 making up only 8% of visitors using this screen resolution as of January 2008.

This is a very useful tool to use when planning your web pages based upon the screen resolution of your visitors.

Testing in Different Browsers

One of the most powerful, free tools we have found is Browser Shots. The tool allows you to test how your web pages will be rendered in up to 76 different browser versions across 4 different Operating System platforms. You can also select options to test various screen sizes, color depth, JavaScript options and versions, Java options, and Flash options and versions.

How this works is, when you submit your web address, it is added to the systems job queue. Approximately 112 distributed computers (screenshot factories) then open the website in the various browsers. These computers then generate screen shots of each rendering and upload them to a central server for your review.

Feedback

Did you find this post useful? Please leave us a comment and tell us if you thought this was useful, terrible, or anything else you would like to tell us.

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

WordPress Developer’s Toolbox | Smashing Magazine

The Coach — Mon, 22 Sep 2008 08:52:35 +0000

Recently, one of my friends took on the task of customizing a WordPress theme. He started with one of the themes from DIY Themes and began the formidable task of tailoring it to his tastes. It has been challenging to say the least, but he is making progress.

So it is with my dear friend in mind that I post this next tool, which I feel is of tremendous value to anyone considering developing their own Word Press theme.

WordPress Developer’s Toolbox | Developer’s Toolbox | Smashing Magazine.

The folks at Smashing Magazine always have informative posts, but this entry far exceeds my expectations as far a providing value. This post contains basic guidelines all the way up to snippets of code that can be included, so it caters to all levels of expertise.

We hope this post is as much value to you as it has been to us, and our dear friend Martin.

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

Smart Image Resizer (PHP)

The Coach — Fri, 19 Sep 2008 04:17:53 +0000

In one of our larger projects, the CMS (Content Management System) has been designed to manage thousands of images and graphics and relate them to textual content. However, the design company has come up with a grid layout approach that requires all images to conform to several sizes to fit into the grid.

So far, we have employed someone to take every image and resize it to all possible image sizes that could be used. This process is lengthy and never ending as we continue to add more and more content.

So we were extremely happy when we found this PHP tool from the folks at Shifting Pixel:

Smart Image Resizer (PHP): a simple way to create thumbnails and more on the fly — Shifting Pixel

This tool is a powerful way to resize and crop any image on a website without actually modifying the actual image or tweaking code. Images are uploaded once at a high resolution and then they can be reused in any format just by adjusting a query string. When you have hundreds or thousands of images, this is a big time saver.

The Smart Image Resizer works with images in several formats such as JPEGs, GIFs, and PNG files. It can sharpen each image and crop them based on height/width ratios, color fill transparent GIFs and PNGs and features built-in caching to keep image variations for the sake of performance.

The web site has installation instructions, minimum requirements and a license to use the script. They have also posted some examples of how the script renders and resizes images in a couple of different scenarios. We hope you find it as useful as we did.

No related posts.

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