Test the Performance of your Website Online

 

It is important that you speed up your website as much as possible because, all other factors remaining the same, a faster performing site may rank higher in Google search results. That’s because Google now considers page speed as one of the factors while ranking pages.

How to Measure your Site Performance

Google offers a free tool called Page Speed that you may use to improve the performance of your web pages. The tool performs several tests against your website and then suggests simple ways to make your site even faster.
YSlow from Yahoo! is another such tool that measures the performance of your pages and offers suggestions for improvement. Yahoo! says that the response time of web pages can be improved by 25% to 50% by following the recommendations made by the tool.

Run Page Speed and YSlow Online

Both Page Speed and YSlow are available as add-ons for Firebug and will therefore only work if you have Google Chrome or Firefox on your computer.
If you are however running a different browser (like IE) or would like to evaluate the performance of your sites without installing add-ons, you should give GTMetrix a try.

GTMetrix will analyze your pages using both Page Speed and YSlow rules in one go and other advantage is that it runs online without requiring any add-ons.
You can setup a free account and the service will automatically run performance tests against your site at pre-defined intervals. It also preserves the reports of previous tests and you can therefore easily measure the outcome of your optimization efforts over time.
If you are willing to experiment with more techniques to further optimize your site's performance, do check out High Performance Web Sites and Even Faster Web Sites by Steve Souders.

Read more »

Turn Your Sketches into CSS Based Websites

Most online WYSIWYG editors work like this — you get a Microsoft Word style interface where you can add text, tables, images, etc. and the editor will then generate the corresponding HTML code without you having to learn any of the programming languages.

Create CSS Based Web Templates Online

 

WYSIWYG editors will generally write the code using HTML tables but if you are looking to create a pure CSS based layout, where the presentation styles are separate from the actual content, you should check out Drawter.
Think of Drawter as a white canvas where you can actually "draw a web page" using your mouse. For instance, if you want your website to have a fixed-size header, a left sidebar and maybe a footer, you can simply drag-n-draw these areas on the canvas using the <div> tag and generate the code.

Each tag in Drawter is presented as a separate layer and you can draw one layer over the another. For instance, you can put the <p> layer over <div> which can also contain the <img> layer to hold images or <h1> for headlines. Obviously, you need to have some understanding of HTML and CSS in order to use these tools.
Grids Builder is another nice tool that you may use to quickly create CSS based layouts though it supports only basic designs — - your template can have a header, multiple columns for content, sidebar and a footer. Here're some sample templates created using the Grids tool.

Read more »

What is the Ideal Width of a Search Box

If you are planning to include a search box in your website or blog, read this:

The Ideal Search Box Is 27-Characters Wide
Jakob Nielsen performed a usability study on the length of search queries in website search boxes. It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.
The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

From: Smashing Magazine

Read more »

Microsoft Offers Web Designers Free Tools to Build and Host New Websites

Natural Voice Text to WAV Demo For Alerts, Web Apps, ATMs & More!

Microsoft has been working hard to get their software tools in the hands of people who are starting out new ventures, and these efforts have been widely well-received.
For instance, the DreamSpark program has provided design and development tools to students worldwide free of charge, while the BizSpark program has provided licenses for the same set of tools to software startups for a mere token fee of $100.
Now there's a new Website Spark program from Microsoft that is aimed at web professionals and small web development companies who are involved in designing websites and other web-based applications.

Eligibility Criteria for Website Spark

If you build websites for your clients and have no more than 10 people working for you (including owners and employees), you are eligible to sign up for the Website Spark program.
The only restriction is that you must launch a new website or service within 6 months of getting accepted into the program that is built using the tools that you received through WebsiteSpark.

Software Tools included in the Program

If you agree, you will be offered licenses for Visual Studio, Expression Studio, Expression Web, Windows Web Server, and SQL Server Web Edition for three years. You can purchase the licenses at the end of three years or simply exit the program.
There are no up-front costs but you'll have to pay a $100 program fee once you decide to exit the program. In addition to software licenses, participating web development companies will also get discounts on hosting services for their websites, as well as coverage on the upcoming WebsiteSpark portal.
The WebsiteSpark program is available to web design companies around the world, so if you are planning on launching a company or currently run a small company that meets the requirements, WebsiteSpark might just help company save a ton of money in software licenses and you may also get some extra visibility through the various Microsoft portals.

Read more »

Google e-book Offers Tips on How to Improve Your Website

Google has released a PDF booklet with some very useful tips on how to improve your website. The guide is written primarily for online businesses and marketers but the tips and findings mentioned in the book are pretty relevant for smaller websites as well.

Excerpts from the book:

• Visitors to your site should be able to see, at a glance, where to search. Consider enlarging your search box or making it more prominent.
• Show visitors a clean and easy to understand homepage which isn’t cluttered and has all relevant information available on the top of the page.
• You want visitors to proceed beyond your homepage. With so many potential routes a visitor could take, make sure they don’t get lost. Options on where to navigate next should be clear and simple e.g. using site search, top/side navigation, and/or product links.
• Assure the visitor that they have landed at the right site - clearly display your brand and any unique selling points. Avoid long introductions as customers will seek this information in the ‘about us’ section.

You may download the PDF from google.co.uk [3.8 MB] or read it online here.

Read more »

Simple Ways to Speed Up your Website

The Rackspace blog has some tips on how you can improve the loading time of your web page by reducing clutter from the site:

• Host close to your market. Because Web pages load quicker over shorter distances, choose a hosting location close to your target market. Companies such as Rackspace make this simpler with data centers in the United States, Europe and Asia.
• Limit external content. Each YouTube video, advertisement and image your Web page displays from another site takes exponentially longer for browsers to download – since they have to open a new connection to the external site, and now you’re dependent on their performance.
• Don’t use flash or Silverlight on the home page. Yes they look cool, but those nifty flash controls take a long time to download from around the world. People spend more time watching them download than using them.
• From Building43.com

Read more »

How to Ignore Internal Links on Web Pages Very Quickly

Internal linking, or creating links that point to some of your own web pages, is generally practiced on sites for three reasons:
1. Internal links can quickly add context. Instead of writing a summary of some topic that you covered in detail the other day, you can just create an hyperlink to that old story and readers can follow the link in case they are curious to learn more about that topic.
2. Internal linking with good anchor text can affect your site rankings in search engines. And this is a big reason why so may sites link back to themselves so frequently.
Highlight external links, hide internal links
When I am reading a new story on some blog that I have been following for a long time, I generally tend to ignore all internal links and hunt for links that point to external website. It's a constant battle - place your cursor over a link, look at the target location in the browser's status bar - if points outside, click the link else move to the next one in the loop.
This is a case where too much self-linking becomes confusing as well time-wasting for the reader. To illustrate, here's a screenshot of a story that was recently published in a popular tech blog. All hyperlinks are in green and therefore finding the external ones might require some effort.
Before: Both internal and external hyperlinks are of the same color

After: The external hyperlinks get highlighted

The second screenshot is of the same story but now anyone can figure out the external links because they are highlighted in blue while the internal links were changed to black or grey.

» Highlight External Links - Drag to the bookmarks toolbar

This is possible through a simple bookmarklet - you drag the above link to your bookmarks (or favorites) toolbar and click the link while you are on any web page.
The bookmarklet will change the colors of links on the page (without reloading) making it easy for you to distinguish between external and internal links. In case you want to revert to the previous scheme, just hit the refresh button.
The bookmarklet turns internal links to black but you can modify the source to use any custom colors.

Read more »

Test Your Website in Different Screen Resolutions

If you ever wondered how your website appears to a visitor who might be using a different screen resolution than you, check out viewlike.us.

Just key in the address of any web page and the tool will show you how that page will look like in different screen resolutions. You can test the layout using most common resolutions like 800x600, 1024x768 or even the iPhone and Wii browser.
Related: How to Completely Test Your Website
Which screen resolution should you use?
Experts suggest that website publishers should optimize their web pages for 1024x768 resolution as it is still the most common size. You design a page keeping the lowest resolution in mind and the layout will probably look good (and readable) in all the higher resolutions.

Google Analytics data suggests that a majority of visitors coming to Digital Inspiration have a screen resolution of 1024x768 or more but around 3% use a 800x600 resolution - that means they will have to use the horizontal scroll bar to read the content even if their browser is in maximized state.
Hat tip Chris Lyons.

Read more »

Google Adsense Now Allows You to Change Fonts

You can now choose to customize the appearance of your Google Adsense ad unit by choosing between "Arial", "Verdana" or "Times" font-faces on all English (Latin-based) web pages.
To quickly change the font settings for every ad unit generated from your account, visit the Ad Display Preference section of your Account Settings page to select a new account-wide font face.
To select custom fonts for individual ad units, go to Manage Ads and select the individual ad unit to make the changes.
This could be a boon for all publishers who have been struggling with Ad blindness, as the new fonts will make the Adsense ad unit look different.

Read more »

Listen to the HTML Source Code of your Website

Know Graphics but not HTML? Turn PSD to HTML & CSS Automatically

You've probably heard of WYSIWYG (What you see is what you get), used to describe software in which content displayed during editing appears very similar to the final output. Now get ready for WYHIAYG (What you hear is all you get), a wacky site which narrates to you the HTML source code of your web site.
Unfortunately, since the text to speech engine is not very well trained in the technical HTML jargon, the narration is not very pleasant to hear.

Read more »

Learn HTML with FireScope

FireScope is a useful new Firefox add-on that adds an HTML/CSS reference tab to the Firebug window. Though Firebug is normally used by expert users, FireScope should appeal more to beginners.
To start, you first need to install Firebug. Then install FireScope and restart your browser.

While there are many ways to use Firebug, for the beginner, the simplest way is via the "Inspect Element" menu. Right click on any HTML element or attribute, and select the "Inspect Element" option.
This opens the Firebug console with the focus on the HTML element you clicked on. With FireScope, you can now right click on the HTML tag or attribute and look it up.

For example, if you look up the "i" tag, FireScope displays what the tag does, browser compatibility and standards compatibility. You can also look up HTML attributes - "href", "src", "class" etc, CSS properties - "font", "color", "margin" etc.

FireScope also provides practical code samples for the HTML tags and attributes.

Read more »

What if Google was designed for Google ?

Now Get Quickest Access To Google By Setting It As Your Homepage!
Google Webmaster Guidelines is an important read for anyone who wishes to rank well in the Google algorithm. Interestingly, Google itself does not follow these guidelines. The question is, how would it look if it did ?

Read more »

Check the Color Contrast of your Web Site

While designing a for the web, it is always important to keep in mind how background/foreground colors interact with each other. Color Contrast Checker helps you by letting you view your text in a particular color combination.

The tool uses hexadecimal color codes for the colors; to change them you can either type in a new code or "lighten" or "darken" the color. This is especially useful when you have a color in mind, but the contrasts are a little off.
The tool also offers you the contrast ratio for each combination, and informs you if the combination passes the W3C color contrast standards.

Read more »

Optimize Image Sizes Online With Yahoo’s Smushit

Yahoo recently introduced a web based tool called Smushit to help you optimize the size of web images without affecting visual quality.
Smushit reduces the file size of images by reducing the number of colors, strips off excess metadata, and also discards other non visual data.
There are three ways you can use Smushit:

• Upload a bunch of pictures in your browser
• Provide a list of image URLs
• Firefox Extension to optimize the images found on any web page.

Interestingly, the Smushit site seems to hosted on Dreamhost, not on Yahoo servers as one would expect. Thanks Webware.

Read more »

Create Mockup Designs Quickly with Yahoo! Stencils

Yahoo! Stencil Kit is a set of graphics to help you create mockup designs real quickly – you can use these stencils for designing web pages for the desktop or mobile phones.

And even if you are no web designer, you may use Yahoo! Stencils to create illustrations. For example, you may place screenshots inside the BlackBerry mockup that comes in kit or try different placements of the keyboard on the iPhone screen.
The graphics are available as PDF, Visio, SVG (Illustrator) and PNG (for Photoshop).
Yahoo! Design Stencil Kit - Thanks Lucas Pettinati.

Read more »

How to Completely Test Your Website

You may have developed your website using an expensive "what you see is what you get" editor but there's no guarantee that site visitors "will get the website as you see it".
You will need to extensively test the website to ensure that visitors have a comfortable stay and don't leave your site in a jiffy.  And here are some useful tools to help you completely check your website:

Browsershots is an online service that automatically captures full page screenshot images of your website in various browsers across all different OS platforms. You also have the option to preview the website design in browsers with or without Flash, Java and JavaScript.
Browsershots is extremely popular and you may therefore have to wait a few minutes for this service to render screenshots of your website.
IE NetRenderer is another service that's much faster than Browsershots but it can check the rendering only for different versions of Internet Explorer. Mac oriented websites can try BrowsrCamp which is like Browsershots but for the Mac OS browsers only.
To see how your website appears on the small screens of mobile phones like the BlackBerry or Windows Mobile, check out BrowserCam. Another good option is the Opera Simulator that lets you experience a mobile version of Opera from the desktop.

Related: Use Opera Simulator to Unblock Restricted Websites
Some people are still using slow dial-up connections and their population in not insignificant especially in the developing world. You therefore need to make sure that the average loading time of your HTML web pages, along with all the Javascript Ads, Images, CSS, Flash animations, etc., is within reasonable limits.

Pingdom is a free online service that mimics the way a page is loaded in the web browser. It shows statistics (size, loading time) for every object on the web page so you know about the culprits who may slow down the website.

Alternatively, you could use Firebug in Firefox to detect elements on your web page that are increasing the load time of your web pages (press F12, Goto All -> Net).
For website and blogs that syndicate content via RSS feeds, load the website in IE or Firefox and look for that orange XML icon near the browser address bar. This ensures that other online services can successfully auto-discover RSS feeds give your site address.

If you have added email forms to your website (like Contact Us, or Suggest a friend) - try some combinations in the form address field. For instance, is the email message delivered successfully if visitors add a semicolon instead of a comma to separate two or more email addresses.
You may also want to print some of your web pages to the local printer or save them as PDF to ensure that the Print CSS of your site is stripping the non-essential stuff like the sidebars and the ads.

For accessibility, load the website inside html2txt to ensure that screen readers can interpret your website. This is an online Lynx simulator (text-only browser) and will also help you understand how your website appears to Google spiders and other search engine bots.
And finally, validate your web pages against online HTML validation and clean-up service like the W3C HTML Validator and HTML Tidy. The former service help you check the website for conformance to W3C HTML standards while the latter is for cleaning up HTML source files that contain lot of nested tags.

Read more »