Web Design

Google Scribe evolves from Google doodles

The mystery around Google Doodle deepens. Today we are faced with a blank grey silhouette of its famous colourful logo.

Google Live Stream

However once a user starts typing in to the search box, the logo letters return to their full colour one by one……….

Today’s doodle follows yesterdays interactive doodle, which used a collection of coloured balls bounce around the screen in a Particle Motion Simulation. The changes has sparked debate across the internet as to what the homepage takeovers signify, with some suggesting it is in anticipation of Google rolling out a streaming live search feature. Yesterday was Google’s 12th birthday and it appears to coincide with the timing of the release. This also follows Googles Tweet on Twitter ‘Our doodle is dressing up in its brightest colors for something exciting coming very soon…’”

Whatever the answer to the mystery, all looks likely to be revealed an announcement Google is planning at the San Francisco Museum of Modern Art later today relating to its search products - suggesting that they might well be unveiling a new ’search as you type’ feature, in which the results page you see change as you type your search term.

Hopefully we will soon see Google’s new live search features in action and it will be interesting to see what impact it has on how we search the internet. No doubt Google have got this “spot on” and searching will be more interactive and intuitive delivering the latest and best results it can find.

Google have just launched their new search called Google Scribe and we may see an end to the search button!

My first thoughts are it is very intuative and predicative, however using AJAX to constantly update the page based on key presses causes a slight delay and whilst in the search box Google sponsored ads do not appear straight away and this could be an issue for advertisers and in turn Google.

This is now on Google UK and will be rolled out globally within the next 24 hours. You need to be logged in to see this effect. Users that are not logged in will see the standard Google with the search button.

Choosing a website designer

Choosing a website designer
Making the right choice
If you are looking for a website designer the first question is “Where do I find one?

Most people will either use a Google search to find a web design company, Yellow Pages, Word of mouth or follow a link direct from a website to a web design company. Any of these are a good way of finding one. The next thing most business owners are thinking is “Can they do the job?” and “How much will it cost?

Can they do the job?

Finding out if the website designer can do the job you are looking for is usually straight forward. Do they have a porfolio? If so they may already have created a website similar to the website or industry sector you are in.  Are they easy to contact and do you get along with them?

Most website design companies should be easy to  talk with and explain your business needs. To cut out all the technical jargon we created a fact finder that is basically a simple series of questions that answer, email back, and we can give you a website design quote from it.

How much does it cost?
We always produce an accurate quotation that outlines the cost of your project. We stick to that price and there are no hidden charges.

Why I choose Dreamweaver

Dreamwaver logos through the ages!OK as a web designer, you might expect me to use Dreamweaver, and as a web developer, you might expect me to hand code. However, I think Dreamweaver is a by far the best tool for combining the two. This article is not an advert for Dreamweaver, Adobe are not paying me (I wish) it is merely an explanation as to why I use it.

Absolute Beginners

In 1998 I began using Dreamweaver (back then it was Macromedia Dreamweaver version 1.2. This was the latest version). It was easy for a beginner to pick up basic web design principles using the WISIWIG interface. It really was a case of What You See Is What You Get.

I suppose this was the initial joy in building websites. You designed on screen your images and text and when uploaded - things looked the same. I used a design based on tables and nested tables that allowed me to place my content and images practically anywhere on the web page.  My first attempts were basic, but functional. As the web evolved and my knowledge and expertise grew Dreamweaver grew with me. I learned how to use many more features as they became available, and found myself much more of the time in CODE view.

The design progress over the years.

The following image shows the website fitnessfiesta.com from 2001, 2004 and 2006. The website changed to reflect current website design trends.

Image of website showing web development

By 2004, I was using more Javascript and CSS in my web sites.

By 2006 the site had a major redesign. I used a more modern navigation.

Coding Geek

Screen shot of website showing how web developmentThis brings us to the site today. It had another major redesign in 2008. I moved the site into PHP instead of HTML.

This allowed the content of the website to be driven from a MySQL database instead of static HTML web pages.

The benefits of using a dtabase is the ease to make quick changes to the website as new events are added or passed.

The benefits of keeping a website current and updated is of great advantage to your customers and also Google, who can see the website is regularly updated.

Dreamweaver is not the only software in web development, but it is my favourite. In my view, the beauty of Dreamweaver, now under the ownership of Adobe not Macromedia. The on page view renders CSS so that it is simple to switch from code to design view and vise versa. In the beginning it was not only the temptation to stay in design view, but neccessary.

These two screen shots show the same thing, just one in Design View and one in Code View:

Image showing code and design view in DreamweaverAs you can see, there are many features to this web devlelopment software.

It is easy to talk about the features of Dreamweaver for almost an eternity. What I would rather discuss is how it has helped me with the transition from web designer to developer. As the internet has progressed, the skill set of the designer and developer has had to grow with it. Whilst you could knock up a half decent website with a basic knowledge of HTML and a working knowledge of Dreamweaver, now there is so much more. Ecommerce design needs to run from a database, CSS helps ensure accessibility, and keeping code clean and simple.

Conclusion

Now any website designer that uses Dreamweaver can make the switch to web developer and the software is still the same and enables a smooth transition from designing static ‘brochure style’ website’s to dynamic database driven websites. Dreamweaver allows the web developer grow their skill set to cover PHP, ASP and Coldfusion programming languages.

A few points for a website designer

Dreamweaver and Photoshop from Adobe

Which tools work best for website designers?

Adobe, after taking over Macromedia have all the software packages required for web designers. Photoshop is probably the very first Adobe product I ever used and probably one of the most used in the industry. Photoshop can easily and effectively create a beautiful graphic design for use within a website I am about to build.

I then move over to Dreamweaver to build the website layout. Some website designers use photoshop for the full design and layout. This method produces a graphic mock up however I prefer to build a web browser based mock up as that is what the client is going to view the site with.

For example, anything is possible graphicaly with Photoshop, however the same can not be said for web browsers and how they render.  Yes, you can use any font, but it won’t neccessarily look exactly the same in Photoshop as in your finished website, so I prefer to use Photoshop for all graphic elements of the site, then move to Dreamweaver for all text. This makes more sense for speech readers and Google too.

Useful techniques for the design/development process

There are a few techniques available to the professional web designer. My favourite is Firebug. It’s a FireFox add-on that will shave hours off your workflow when you are creating CSS/Javascript intense development or trying to debug pretty much anything.

Web design covers a wide area of topics and another favourite place of mine is the W3C Validator service. You can supply a URL, direct input or even upload a file for the W3C to validate. This is a great service and will help you understand how a web document needs to be laid out schematically. Once your web page is valid you get a congratulations message along with buttons to add to your site to show that it is valid. A validated website works not just for you but also for the browser and will ensure the site is easy to keep updated.

Why choose web standards and what are they?

The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web.  For example, using XHTML & CSS to control not just the look of your website but also the layout. Some people use tables to build websites, however using CSS to control the layout allows the website designer to place graphics and content anywhere on the page that can be read easily by web browsers, mobile phones and speech readers.

You know you have covered everything if you have built your site using web standards.

Were to start and continue learning.

Here are a few websites that have helped me over the years.
http://www.w3schools.com/

At W3Schools, you can study everything you need to learn, in an accessible and handy format. The website covers pretty much all areas of web development HTML, XHTML, CSS, TCP/IP, ASP, PHP, Ruby on rails, etc. You name it - this site covers it along with working examples.

http://www.webdesignerwall.com/

This site is visually fantastic and regularly publishes articles that are of interest to designers.

http://www.smashingmagazine.com/

The Smashing Magazine website has a magazine format, and showcases leading areas in design. It offers great tools, articles and inspiration.

Inspiration for Website Designers

Where do website designers gather their inspiratoin?

How can a website designer gain inspiration if they are stuck infront of a computer screen?

The slide show above from Nick La demonstrates how he gains inspiration from his environment. I have spoken to many designers who gain inspiration from going out for a walk, it may be a simple trip down the high street or a quiet walk in the countryside, what ever method they use it does not matter, as long as the end result is pleasing to the client and the user of the website.

The key is not to stare at a blank screen.

Personally I use a ‘persona’, that is based on the end user of the website. For example if I am working on a fitness related website I would listen to dance music or watch videos of the classes that generate a feeling to inspire the design. So just listening to differnt genres of music can inspire the website designer to create different designs that are beyond what they would usually create.

Creativity should go beyond the realms of the restraints we have and the software we use, imagine what could be possible. The internet has come a long way in the last 10 years. When websites were first designed they were based on a very formal table layout and the closest thing to animation a web designer could hope for was an animated gif, usually of a revolving globe!

Thankfully the boundaries are being pushed with broadband, improved browsers, and user interactivity.  Streaming TV is becoming common place, web standards using a CSS based layout allows the web designer create websites that were unimaginable five years ago.