What size my website?
One of the challenges you will face as a designer is deciding on the size of your website design. It can be a difficult balance between the size that suits your design, making sure as many visitors as possible can view the final website and, if your client has an opinion on the subject, making sure your client is happy.
If you are designing a website thats primary purpose is to capture a visitors immediate attention, for example, a website that sells a product you will also need to consider the ‘above -the-fold’ area of the website.
Google Browser Size is a really useful tool that provides a visualization of browser window sizes for people who visit Google. For example, the “90%” contour means that 90% of people visiting Google have their browser window open to at least this size or larger.
This is useful for ensuring that important parts of a page’s user interface are visible by a wide audience. On the example page that you see when you first visit this site, there is a “donate now” button which falls within the 80% contour, meaning that 20% of users cannot see this button when they first visit the page. 20% is a significant number; knowing this fact would encourage you to move the button much higher in the page so it can be seen without scrolling.
To view your own Web site with this same visualization overlaid on it, simply type its URL into the “Enter URL here” text box at the top of the window and click Go.
Notes:
- You can change the opacity of the overlay by clicking the gray boxes next to the word “Opacity” at the top of the window.
- As you move the mouse around the window, you will see a transparent rectangle following the mouse pointer. This feature allows you to interact normally with the page you’re examining even though it has a graphical overlay atop it.
- The sizes represented in this contour are client area sizes, not browser window sizes. This means they represent the size of the browser without the title bar, toolbars, status bars, etc., and thus give a true representation of how much content can be seen by a particular segment of the Web-using population.
- Browser Size works best on web pages with a fixed layout aligned to the left. If the content reflows as the width is adjusted or it is centered, then the results can be misleading. In this case, you can obtain more accurate results by reducing the browser width to a percentage column, e.g. 90% and seeing what content falls below the 90% horizontal line.
Gravatars
OK so lets go one better than a stand alone graphical avatar. Welcome to http://en.gravatar.com/.
If you like to post on blogs and forums or if you are trying to create an online identity this seems like a really cool tool and a great time saver too.
Have fun!
Simon
Face your Manga
Have you ever wondered how people create Avatars? You know those cool little pictures that they use on blogs, forums or anywhere else where they want to have a graphical representation of themselves.
http://www.faceyourmanga.com is one such site where you can create a Manga style avatar of yourself. Its really easy to use and you’ll have your avatar created in minutes.
Have fun!
Simon
Colour Colour Kuler
If you’ve ever put any kind of design together whether it be for print or web you’ll know that creating beautiful colour themes can at times be very difficult and as a consequence can slow the design process down sometimes, on a rare occasion, bring it to a complete stand still. Fortunately there are a number of tools on hand to help with the creation and selection of great colour themes. In this particular post I am referring to Abobe Kuler which can be found here: http://kuler.adobe.com/
As soon as you open Kuler you are presented with colour theme upon colour theme; the Newest, the most popular, the highest rated and of course Random.
You can create your own colour themes from a base colour or even an image which are provided courtesy of Flickr
 |
Click on the slider image on the first page and you will be presented with infinite possibilities in colour theme manipulation.
 |
There is a thriving community which adds themes to the Kuler library. This really is a great tool! Join and have fun.
Simon
More than Fully Illustrated
Every now and then when I’m surfing the internet I come across a site that has such great creative content that it simply blows me away. Michael Heald’s Fully Illustrated is my latest find. I was fortunate enough to make contact with Michael who is also the owner of Joystick Generals and Illustration Toolbox and for a pretty important guy in his field he made himself very available to me and answered several questions I had. I really like Michael’s unique style and I will definitely be using his sites as a source of inspiration in some of my future works.
Thank you Michael.
 |
Enjoy!
Simon
What on earth is a Browser?
Have you ever wondered what a web browser is? Did you know that there’s more than one?
A web browser is a software application that interprets the code served by a web server into text and images so we are able to view them on our computers. Without a web browser you simply would’nt be able to view the Internet – imagine that!
Did you know that there is more than one web browser? All computers come with a web browser installed so if you purchased a computer with a Microsoft operation system then your browser will be Internet Explorer and if you purchased a Mac with a Mac operating system your web browser will be safari but…
 |
 |
there are others. These include but are not limited to Opera, Netscape and Google Chrome
 |
 |
 |
but the best of them all is Mozilla Firefox. The choice of web designers and developers because of its accurate interpretation of the Web Design Standards.
 |
 |
As a web designer it is important to appreciate that there are a number of web browsers out there and not all of them show text and images the same. You also need to consider that there are different releases of each and there are variations in how each release displays text and images. Internet Explorer is the biggest culprit of this with IE6 causing numerous rendering issues (when a web page displays – it is rendered to the browser) that require special fixes.
If you want to get an appreciation of Browser usage you can view some useful statistics here: http://www.w3schools.com/browsers/browsers_stats.asp
I hope you found this useful,
Simon
PS. For more information on the history of the Web Browser follow this link: http://en.wikipedia.org/wiki/Web_browser