How To Cheat At Web Page Design (and almost get away with it)

For The Artistically Challenged

Not being a graphic designer but trying to be a one man band web developer used to be limiting.  Today there are lots of tools to help plug any lack of artistic ability. Of course you’ll never be as convincing as a good graphic designer,  but you’ll get by.

Look Around the Web For a Site That Fits

I am in the middle of a new web development project for a long standing client. We are re-branding his website to fit in with the new company colours he’s chosen. And, taking the opportunity while we are at it, to add in all the functionality he has ever wanted on the site.

I have a lot of database backend stuff to write, work-flow to develop and so on. The graphic design element of my task is not my favourite.  Here is what I do.  I look around the web for someone else’s site that has vaguely the right layout for my needs.  Then I attempt to do my own version of it. Because I am so bad at copying someone else’s site, there is no chance that the new site will be much like the one I used for inspiration.

Here is the home page of the site I have designed for my client, as it currently stands.

And here is the site design that I used for inspiration. As you can see, they are quite different, but I used the ideas in one to help me create the other. I have not finished this task yet so the home page will change, but you get the idea.

Graphics Tools and Sites Used

Getting A Good Website Can Be Tricky

I teach small business people how to write and maintain their own websites. The reason I do this is because I believe if you are an entrepreneur without a big budget and you expect the web to form an important part of your business strategy, you

  • can’t really trust a third party with your site long term
  • it’ll cost lots of money to get it developed properly anyway

What I Don’t Mean

What I am about to say does not apply if you are building a simple site with 5 or 6 pages. Such a web site might be made up of the following pages :

  1. Home
  2. About Us
  3. Products
  4. Services
  5. Examples of Our Work
  6. Contact

A site like that won’t bring you new visitors. It’ll be almost useless in that regard. If it is all you have in mind, or all you need, DON’T spend a lot of money on it. I am talking about a site that may start like a 6 page site, but is one which you have ambitions to grow into a hot, throbbing hub of information and services for your chosen target market. The rest of this article only applies to you if you have something bigger than a simple web site in mind.

Trusting a Third Party

Getting back to what I was saying earlier – about trusting a third party with your site: When I talk about trust, I do not mean the third party web developer is inherently untrustworthy. Far from it. Trust was maybe the wrong word to use.

I mean that if you outsource the whole thing to someone else, you are off-loading something that is YOUR responsibility to someone else and you probably don’t even realise you are doing it. The problem is, if the third party web developer is not experienced he won’t know you are doing it either. That’s when things fall apart.

I am a web developer for small businesses, and I’ve found that to really understand what the business owner wants and to make sure his ideas work, I have to continually

  1. Educate the site owner on what he needs to do to keep the web visitors coming
  2. Educate myself on what is best for him
  3. Find the most cost effective and industry effective ways to implement any new additions to the web site

If I don’t do the three things listed above, the non-technical site owner will never grasp that a web site that brings in new clients is a non-trivial affair and he won’t take ownership. He will be deluded.

Site Owners – Listen Up

The problem with being the web developer to a site owner who has completely outsourced the development of his site to you, is that you end up with a bigger job than you bargained for.

You end up having a duty of education and care for the site owner so that he can understand the decisions you make to promote his site. Without this continuing education program, he won’t feel like providing the information you demand, in the format you specify, so you can promote the site. If the site owner does not understand what is going on he won’t comply and if he doesn’t perform his duties (as you have specified to him), the site will die on its feet. Then he’ll blame you.

Now, in this position you begin to behave as if you are a Director of the company rather than just someone who has some outsourced work to do. And guess what – that makes you expensive as this role is onerous and time-consuming.

Outsourcing to India

I met someone the other day whose web site was supposed to form the central core of his business. His business was going well as he had a number of customers that recommended him to other customers. He had a successful word of mouth thing going on. But his web site had essentially stopped being effective at bringing in new clients. He explained to me that the site had been going for years and years ago it had been hugely successful because years ago there was no competition online. Now the site had fallen behind.

To get the site built he had outsourced the whole development of the web site to a team in India. This was cost effective, and he got to work with the same team so got to know them (on the telephone and via email). But he described two problems, and this guy was technical – he understood the code that was being written for him.

Coding Practice Issues

The cultural differences between India and the UK (his words not mine) overspilled into the underlying design. He said that his Indian team didn’t have the same approach to coding as he might have, and he found the solutions provided to him, in-elegant. I knew what he meant by inelegant. He meant that when a change or an addition was required, the software provided due to poor design, didn’t have pre-existing hooks in it to make those changes appear just like natural extensions to the existing code. The result was now, after years of development in this mode, the whole thing was now unmaintainable by anyone other than the Indian team, and he had lost his will to further develop the project. He had essentially lost sight of his own site.

Arguing the Case – Didn’t Happen

His team also agreed to everything he suggested. There was no discussion, just a willingness to do the work and get it done. This may sound great, but if your web developer keeps saying yes to everything you want, just be aware they are not in the process educating you about what is sensible and effective. You are not in a feedback loop. If this goes on for long enough, you’ll lose control of the project.

Low Cost – But At What Cost?

Keeping costs relevant relies upon the software people understanding what it is that you the customer really wants. The normal way to achieve this is to either have extensive two way discussions supported by heaps of documentation and signatures on dotted lines, or for the web people to continually produce prototypes of the web site to demonstrate functionality.

Both those methods are employed in large expensive software development projects and are normally outside the scope (be it in India or anywhere else) of the budget of most small business startups.

A Step By Step Strategy to Getting Your Web Site Developed

Now this solution is not for everyone, I am aware of that. But varying aspects of it will suit most people.

  1. Learn XHTML – this is very easy and you can do it in a couple of days. I don’t mean you can learn enough of it in a couple of days to be an expert, but you can learn enough to produce some simple web pages.
  2. Learn CSS – this is slightly harder, but certainly not beyond the scope of most people. Again, I don’t mean learn CSS so well you become a guru. Guru status is just NOT required to become effective at CSS. Just learn enough that you can apply simple CSS coding to your XHTML.
  3. If you must outsource something, outsource the graphics. If you are not a graphic designer design the layout of your page and then tell the graphic designer to make images that fit into the spaces you have allocated on your page. Don’t do it the other way around. Don’t get a graphic designer to tell you where things go.
  4. Use a number of small, low cost, third party tools, websites and services (there are hundreds of them) to add other required functions to the site that you can’t develop yourself. These typically cost between $20 and $100 and do the following types of things
  1. create menus and navigation systems
  2. contact forms
  3. small flash animations
  4. newsletter services
  5. image manipulation
  6. affiliation
  7. php scripts
  8. blogs

the list is endless . . . Outsource any portion of the above, but always write the XHTML and the CSS in-house. That way you’ll self-educate, stay in control, be able to make timely changes, and take responsibility for your own business.

Bottom Up Vs Top Down

What you will have done is to create a web site using bottom up techniques – i.e you’ll have used a building block approach which helps you to learn, understand what is going on and decide on small chunks of the project to outsource.

The advantage with outsourcing small chunks of the project rather than the whole project is that it forces you to define exactly what you want, the thing you described will be precise as it has to fit in with what you already have, you can choose different people to provide the parts that they are really good at . . the list of advantages again, is endless.

Web Design Skills – What You Need to be a Freelance Web Designer

I wanted the list the skills/technologies and general know-how required to be an effective freelance web designer. In truth it’s not easy as you need more skills in one body than is reasonable.

I’ve written an article about this – please visit “So You Wanna Be/Employ A Freelance Web Designer” for a cut-down list with examples.

But here I’ll list each skill as a bullet point without explanation – visit the above page for more details on the most critical items.

If You Want To Be A Freelance Web Designer

So how can you use this list? Well, if you want to be a freelance web designer you could use it as a starting point for the skills and technologies you’ll need to know.

If You’re Hiring a Freelance Web Designer

If you are about to hire a web designer, you might want to read this web design skills article and then see if you still think they’ll do a good job for you.

The List

Mark Up Languages

  1. XHTML
  2. CSS
  3. XML
  4. XSLT
  5. RSS

Browser Issues and Techniques

  1. Browser Detection
  2. Browser Differences
  3. Screen Resolutions
  4. Page Size
  5. Cookies
  6. Maintaining Context
  7. Forms Validation
  8. Forms Hijacking

Web Authoring Skills

  1. Accessibility
  2. Web Page Templates
  3. Content Management

The Server

  1. FTP
  2. Choosing a Host
  3. Hosting
  4. Site Certificates
  5. Apache Web Server
  6. Server Security
  7. Data Encryption
  8. Server Side Scripting
  9. Dedicated Servers
  10. Virtual Servers
  11. DNS Servers
  12. URL Rewriting
  13. Database Backup

Content

  1. Copywriting
  2. Sales Copy
  3. Article Writing
  4. Call to Action

Page Navigation

  1. Menus
  2. Internal Linking
  3. Site Maps
  4. Web 2.0 Style Navigation

Visual Skills

  1. Art Work and animation
  2. Graphics Sources
  3. Flash Technology
  4. Image Size/Weight
  5. Video Streaming
  6. Web 2.0 Styling

Software Skills

  1. 3rd Party software integration
  2. Testing

Internet Marketing Skills and Terms

  1. On Page Search Engine Optimisation
  2. Pay Per Click Advertising
  3. Page Rank
  4. Alexa Ratings
  5. Affiliate Marketing
  6. Directories
  7. DMOZ
  8. Social Media Sites

Programming Skills/Technologies

  1. PHP
  2. ASP
  3. Java
  4. Regular Expressions
  5. Javascript
  6. AJAX
  7. DHTML
  8. Session Variables
  9. Server Variables
  10. Templating
  11. PHP (or other) Frameworks

Domain Names

  1. Domain Name Purchase
  2. Domain Name Registration
  3. Domain Name Renewal

Social Media

  1. Forums
  2. Blogs
  3. Podcasts
  4. WIKIs
  5. Mash Ups
  6. Web Services
  7. Payment Gateways
  8. Tag Clouds
  9. Content Sites
  10. Bookmarking Sites

Database Skills

  1. MySQL
  2. Database Design
  3. Database Maintenance

Email Skills

  1. Email Marketing
  2. Auto Responders
  3. Auto Forwarding
  4. Distribution Lists
  5. Email Aliases

Tracking

  1. Site Statistics
  2. Google Analytics

How To Write a Web Application – Part 4

Technorati Profile

A Web Site Publishing Plan for Busy People

So what is the best way to get a site up and running when you are in my position – that of having no time, but an urge to get started?

As we all know, a frequently updated blog can help a business web site, so I am planning a new blog to launch prior to my new web site.

In order that the blog will not be displaced by the site when it goes live I will create the directory structure to look like this.

mynewsite.com

This will have one page, styled exactly as the new site will be, and will contain a short description of the new business. Underneath there will be a clear and obvious link to the new business blog. Underneath that there will be a list of the latest blog posts including short extracts from each.

mynewsite.com/blog

This will contain the new business blog. I will be using WordPress and as usual stick to the superb Web 2.0 style created by Neil Merton. The reason I always come back to using this WordPress theme is that I can easily create a colour coordinated blog that loosely reflects the main business web site, in a few minutes. I don’t think I need to make the blog merge seamlessly into the main web site; why hide the fact that it is a blog? But because the colours on this theme are easily settable via options, it is a fast way to obtain a loosely coupled co-ordinated look.

Advantages of this Publishing Plan

The advantage of structuring a new web site like this is that

  • you can start driving traffic to the blog (which you can set up in a matter of minutes) from day 1,
  • keep a place-holder page open for the home page of the new site.
  • Buy yourself time to build the site slowly, but not lose time as you are still gaining traffic.
  • Keep the home page keyword optimised and so get draw traffic. Encourage those that visit the home page to bookmark the page and so start to build yourself some page rank before your site really launches
  • Because the growing blog contains good content, You also have the option then to build the new site slowly with the built-in opportunity to change your focus along the way as new ideas hit you.

Client Examples

26 Degrees In The Shade

http://www.26intheshade.com and http://www.26intheshade.com/blog

In this case, a friend of mine who wants to sell his restaurant business, designed the graphics for his web site, but asked me to make them into a functioning site. I did this, and linked his ever growing blog into the directory structure. The blog for this site was set up few weeks ago, despite posts from the more distant past. Here the site/blog technique enables a necessarily small main site, to grow organically with content supplied and updated by friend who is non-technical.

The Chain Gang – Gourmet Cycling Holidays in France and Italy

http://www.thechaingang.co.uk and http://www.thechaingang.co.uk/blog

Here is a client site that I developed, that needed more of a community spirit. We have set up a newsletter and a blog in recent weeks. Although there are big plans for further site development, the blog is a way of slowly building more relevant content pages into the domain and also provides a meeting place for previous cycling holiday customers. The blog was set up a couple of months ago and is the pre-cursor to the specialist wine and food loving cycling community that we are building.

How To Write a Web Application – Part 3

Creating Backgrounds in Photoshop

Original layout background examples

It is time to open up Photoshop and attempt to draw the backgrounds to bring the site design to life. Looking closely at the original free layout from Template World, I see that each background section, including the menu has a little shadowing to give the impression of contour.

Straight away I decide to replicate this idea of shadowed backgrounds myself, but I also decide that apart from the background images, all other items on the page will be flat and without shadow. There are limits, and I can’t see myself drawing thngs like you can see on the right where they have the Jobs send CV here graphic placed in a rounded box with a shadowed background.

Having designed the layout in my last post in the series, I set about making backgrounds in Photoshop. It turned out to be quite easy.

Fill a rectangle with the colour of your choice, then use either a black to white gradient set at about 60% opacity, or a darker version of your chosen colour to white gradient at say about 60% opacity to apply a shadow to the top section of the rectangle.

If you do this you start with the first image below, and end up with the second:
Without shadowing With shadowing

If none of that made any sense, I found this web 2.0 styling tutorial that describes the same thing, only much better than I have!

Next I designed a logo. Probably not the best logo in the world I hear you say, but it will do for now. I made it from text, applied a gradient, a shadow plus outlines and stuck a few pin icons into it, then placed it on a shadowed background that would seamlessly fit in with the web site shadowed background image.

My LogoThat brings me to the name I have chosen for the web site and application. In homage to that fabulous Essex boy Russell Brand, (whose turn of phrase I rather like, without wanting to further glamourise his rather debauched lifestyle) and his autobiography entitled My Booky Wook, I chose My Money Woney.

The idea behind such a ridiculous name is that book-keeping is probably the most mind-numbingly tedious of pursuits, and I want to make the process as pain-free and irreverent as possible.

In terms of jazzing up the general internal layout, I created a home page, and some subsidiary pages. On the home page I placed rounded rectangles as created by the rather brilliant Stu Nichols of CSS Play. Now while these lack shadows and other artistic accoutrements, they are made without the use of images and only with CSS. This means you can forget the headaches associated with having to artificially reduce the amount of text you want to write just to make it fit into a drawing of a pre-determined size. The curved rectangles are resizeable at run time.

Here are the prototyped results.

I tested all the layouts for various platforms and browser versions in Browsercam, and all seemed well. I think.