Friday, October 31, 2008

Basics of Web Layout

When you create a Web design, one of the more overlooked aspects of the design is the layout. Now, many people think about how to do a layout (CSS, tables, frames, etc.), but the basics of Web layout are often completely ignored.

Space and WhitespaceUse the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window.

Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution ( width 1000 px Recommended) , keep that in mind when you're designing. Having customers leave because all they can see is a logo on their monitor is not good customer service.

Use color to define spaces. If you want to have a page that's a specific width, why not center it on the browser screen and make the background color of the page a different color? This will help the page appear to resize for different browsers; larger browsers will just have more background color showing, while smaller browsers will have less or none showing.

Images and GraphicsAlign your images. One of the most common newbie layout mistakes is to slap images into a page willy-nilly without thought to layout. If you just use an img tag and then write text to follow it, you'll have the image and then one line of text to the right of it. Using the align attribute will help make your images part of the layout.

Balance the graphics and text on a page. It's easy to get carried away with lots of images and animations, but they can make a page very hard to read. When you're considering your layout, remember that images are a major part of the design, not just afterthoughts.

Text WidthThink about text width. This is often called the "scan length", and refers to how many words are displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. When designing your layouts make sure that the major text area displays the text in a readable width.

Monday, October 27, 2008

Essential Web Design Skills

XHTML / HTML
XHTML is the basic language of the web. Using this technology alone will enable you to write simple, text based web sites. If you put your mind to it you can learn enough of this in an afternoon to make a simple, no frills, static web site.

Now I don't advocate this if you are trying to sell your web design skills, but if you are a newbie, just starting out, you can write a very simple site just using XHTML and you can do it without too steep a learning curve.


An example of what XHTML looks like is shown on the right. Click the image to see it full size.
XHTML is the computer language used to build the ordinary text on a web site and display images. Almost every website you'll see is made up of XHTML or HTML. This is a relatively easy language to learn and if you put your mind to it, you'll be writing XHTML pretty well within a few hours.

You can type this stuff in using notepad or an ordinary text editor. Or you can obtain an XHTML editor which will colour code what you type and help you correct syntax (the grammar of programming languages) errors.


The Power of CSS
CSS stands for cascading style sheets, which is a bit of a funny name.
It basically means that if you write a nice plain XHTML web page, you can make it look completely different by applying a separate CSS style sheet file to it.
This is powerful and simple - imagine - you can write a web page that looks one way, and by only changing the style-sheet you can make it look completely different.

Click the image thumbnails on the right. Each one is exactly the same web page, using exactly the same XHTML. The only difference is each one has a different style sheet and images applied to it.

Now do understand, to get these types of results with CSS you'll need to be very good at it, and have great graphic design skills.

BUT the point I want to make is that even just using pure CSS and XHTML, (and practically no graphics), you can still achieve a simple, good looking site that people will love. Actually people tend to prefer simpler sites in the long run - the ones they visit every day.


Javascript
JavaScript is used in conjunction with HTML to access the Document Object Model (DOM) of the web page.

JavaScript runs locally on the user's computer and can respond quickly to the user (as opposed to scripts that run on the web server which would take longer to react). Examples of why you might use Javascript are :
change something when the user rolls his cursor over an image or a link - for example you might change the image or re-colour the linkvalidate some user input on a formopen a new window - a pop-up window.Look. I'll admit it. Javascript is a little more difficult to master if you haven't come from a programming background. It is by no means impossible, but will take a little more effort.

The good news is you can actually use a lot of pre-written Javascript modules when you first start coding, so don't be alarmed by Javascript's apparent complexity. Try looking through this web site which provides a fantastic and easy introduction to using Javascript for certain functions to get your self on the right track.


The Document Object Model
The Document Object Model, or DOM, allows a web designer to programmatically manipulate the contents of a web page.

What do you mean I hear you say? Well, if you are new to web design I don't blame you for wondering what on earth I am talking about. All the individual parts of a web page are accessible via well defined routines (in say Javascript) so that you can make a web page dynamic.
Events - i.e user actions are also accessible which means you can respond in real time to user actions.

So - if someone clicks a link on your page, you could (if you wanted to) decide to make a new paragraph of text appear, as if by magic next to the link.

Knowing about this sort of stuff, even if you don't strictly know how to do it, means you will be more aware of the possibilities available to you on your web pages.



DHTML
Next you'll need to learn about DHTML - known as Dynamic HTML. It's not another type of XHTML - it's the same XHTML we talked about earlier, but rather DHTML is concept of using all the following technologies together :

A scripting language - in our case Javascript CSSThe document obect model (DOM)XHTMLThese components of DHTML have already been described so I'll just talk about what DHTML does for you.

Ok - are you ready?

DHTML allows you to programmatically access every part of your web page at run-time via the DOM and Javascript so that you can alter how the web page behaves as it is running. DHTML gives you the ability to create a more dynamic web page over just a static web page (i.e. one that you wrote using only XHTML.) Now when I say dynamic, I don't mean images jumping about all over the place. Rather more that at some point, you might need to send an item of data from one place on the page to another at run-time.

However, just to show you the sort of thing DHTML can do and also to let you see something you should no longer think about doing to a web page -the link shows a subtle snow effect over a photo


AJAX
AJAX is not yet another programmng language - it's a bit like DHTML (which uses the DOM, Javascript, XHTML and CSS together), in that it is the practice of using Javascript together with XML, but asynchronously. AJAX means Asynchronous Javascript and XML. Asynchonous means things can happen potentially, all at once.

Nowadays AJAX is used widely in Web 2.0 style web sites as it can, in most cases, significantly increase the user experience. A simple example is shown in the link on the right : A random image is substituted by going to the web server, generating a random number which corresponds to an image, and then sending the image to the page. The page does not refresh. Cool uh? Look - don't despair - if you don't understand why this is cool. If you sign up to my newsletter, you'll have the opportunity to learn how to do all this stuff, with me to help you.

Server Side Scripting - e.g. PHP
You'll need to understand and use at least one server side scripting language. Examples of these are:

PHPJSP ASP or ASP.NETto mention just a few. I use PHP as do many freelance web developers.Server side scripts allow your web pages to do a lot more than straightforward XHTML pages. Basically, a server side scripting language is something that the webserver runs before building the XHTML web page, and may even generate XHTML on the fly. It is also used to access databases, so you can retrieve information about customers, products or users and once say a user is logged onto your web page, you can make the page personal and relevant to the them.


PHP Framework
Although you don't need to use a PHP framework, (assuming you are using PHP as your scripting language), it can help to do so. I resisted for some time, but found that I was coding the same boring bits of web applications time and time again, so now use my PHP framework of choice which is CodeIgnitor.

CodeIgniter suits me because it is EASY. The advantages of CodeIgniter are many. The number one advantage being that it is utterly simple to install, both on your Windows development box AND on your Linux webserver. To install on both, I guarantee will take you a maximum of 1 minute per installation. Try that with symfony, Zend Framework CakePHP or any of the others.
CodeIgniter is small and fast and easy to use. Even if you have never heard of the MVC architectural pattern.

That said, if your web developer does not use a framework, no worries. It is just better usually for productivity if he/she does.


Database Skills - e.g. MySQL
MySQL is a freely available relational database management system and is the best choice for the freelance web designer.

A database enables you to store information that you can retrieve at a later date and enables you to store :

specific items of data about customersallows for customer login and password retrievalpersonalisation of web pagescustomer accounts and history of transationsproduct descriptions and pricingThe list is in fact, endless and is entirely dependent on how you want the database to enhance the functionality of your website. You will need database design and maintenance skills in order to create well organised and extensible design. But, I want to say - it is another thing to learn, true - BUT - it really isn't that hard. I did a Computing Science University degree in the UK, and studied database design so I know it from the academic viewpoint and from having been a database consultant for years in the City of London banking environment. That was a challenging time - I mean I had to tune (like tuning an engine) databases with many millions of records.

You probably won't be dealing with more than a few thousand records in any database you create for your first or second web design project. So don't worry about it. It is a lot to learn, but if you want to, you can do it.


Search Engine Optimization

- Internet MarketingThere are four elements to internet marketing
- the process by which you bring targetted traffic to your web site. Namely :
on page search engine optimization
- this is where you construct each page on your web site to be as appealing to search engines as it is to humanspaid advertising - this might be pay per click advertisingexcellent website content
- this means you can't just have a 5 or 10 page website (well you can initially, but you have to add a new page or three every week, or so until you have hundreds of pages on your web site). Excellent and copious content will attract incoming linksoff page optimization
- this is where you use directories, social media sites, forums and others to bring in relevant traffic and add to your search engine density. Build It And They Will Come . . . No They Won't!Many people think that all you have to do is build a pretty, web site with a cool design with about 5 pages and people will flock to it. They just don't get it. The site shown up above is one such site. Since creating this hub, the site has been taken down because the owner found it wasn't bringing in lots of traffic. He needs to re-think his online strategy.

His site was designed by a cool graphic designer, but the point I would make is : how cool is a site that looks good, (I mean get a load of that urban feel, lop-sided main menu - I would never think of that!), when it gets no visitors.

web design is not all about graphic designweb design is not secretarial (typing)web design is not something a graphic designer can just turn his hand toweb design is a comprehension of, and ability to use a large number of internet technologies


Photoshop
- Making It Look GoodAll right -
you don't need to learn how to use Adobe Photoshop in particular. There are lots of other image manipulation programs out there that cost a lot less. However, there are zillions of Photoshop tutorials for practically anything you'll ever want to do, so I tend to favour the use of this program.

Now don't get me wrong. I am not suggesting that by learning this program you will become a talented graphic designer - you may already be one, in which case good for you. But if you are like me, you don't have any graphic design skills. Just make your mind up to learn a few simple tasks using this tool, and you'll be able to make professional, graphically enhanced websites without being artistic. How? I'm putting together a course on that later. But for now you're going to have to trust me.


Flash
You Can Avoid It If You Want To Unless 100% Flash web sites are something in which you want to specialise, there is no need to dash out and buy a copy of Macromedia Flash right now.

Flash Doesn't Work Well In Search Engines, True . . . The reason is, that whilst a full-on Flash site can look wonderful and display safely in any size of screen, using any flash enabled browser, it generally has very little textual content. And what little content it has, (unless you take extra steps to duplicate the content in XHTML and employ a measure of cloaking), can't been seen by search engines. . . .But Text Isn't What Flash Is All About Anyway Flash is after all primarily a graphical tool, and text features low on the agenda of most fully Flashed web sites because if the designers wanted a lot of text, they would probably have used XHTML instead.

A Compromise The answer to using Flash for most of us is not to build 100% full Flash sites, but rather to use Flash in key situations on a standard XHTML site, deploying it only where you need to make a visual presentation of the type that Flash does so well.

Used in this way, Flash is not the container, but rather one of many possible items in an XHTML container. Used this way, Flash has no impact on search engine visibility and you can use the rest of your site to communicate using text and images.

There are many low cost, Flash generation tools that you can use to create small Flash presentations. I really like 3DFA and use it for most of my Flash output.


On Page Search Engine Opimization
As you build your website, you'll need to keep in mind what your goal for building it is. Presumably you'll want visitors - a website with no interested visitors isn't really up to much is it?

It's Not Hard There are a number of simple steps to take to optimize each page for search engines like Google. Other types of optimization nowadays take place off page (i.e. with the other things you do to create interest in your site that don't take place on your site), but you should not neglect the foundational importance of on-page optimization. It is part of what makes your site eligible for appearing on a first page position in Google for example.

Briefly, you'll need to create good quality title tags, description tags headings and content, that are on target for each page's topic. You'll need to make sure each image is properly tagged, (I saw a 'guru' on a YouTube video the other day actually say that alt tags on images are no longer important - like DUH!). Alt tags on images ARE important. But maybe you need to learn how best to write them for both your visitors and for Google.

Conclusion
There is a lot to learn if you decide to become a web designer, and more importantly as I hope I have emphasized, a lot your web designer needs to know before you hire him/her. I will add to this skills list over the next couple of days as I can think of quite a few more items to include.

Just Starting Out With A Business Web Site? If you are just starting out with a new business and need a website, you can of course hire a web designer to do everything for you, but do consider
finding the right web designer with the types of skills I have talked aboutmaintaining the site yourself without resorting to tools that turn the process into some sort of WYSIWYG-fest. If you hide behind point-and-click tools you will never understand what is going on and never know how to apply subtle but important code changes to site. You only have to spend some time in Site Build It forums to see that much.

BUT! Site Build It is a successful one stop shop product for people who want to earn money online and who do not want to learn about HTML or web design.

If you can find someone competent to start you off (and I don't mean someone who can only do beautiful drawings, I mean a technical web designer who knows how to use a template to make up for their graphics shortcomings) who can do everything functionally you could ever dream of with a web site, and ask that person to answer your questions when you get stuck, you could think about handling the update and maintenance of the site yourself.

Saturday, October 25, 2008

Secrets of Website Design

10 Most Sought-after Skills in Web Development

In a time of economic crisis, web developers and freelancers everywhere have started chewing their fingernails. However, no matter how bad the economy worsens, there will always be work in certain booming fields of web development.

As the moderator of the Freelance Switch job board, there are certain types of jobs that are constantly in demand. Here are the 10 skills that are or will be in highest demand for developers. If you are proficient in these skills, you'll be in a great position to find work and weather any economic downturn.


1. Framework knowledge

It seems that frameworks are one of the next big things. With the meteoric rise to fame of RailsDjango, and other MVC frameworks, developers have learned that they can build websites much faster with the help of these tools. Frameworks help you cut out much of the repetitive tasks that normal custom programming would require. Having knowledge of the top frameworks (RailsDjangoCakePHPSymfony, and a few others), can give you a whole other dimension to your skill set.

2. Widget development

Widgets have changed how web development has been done in the past couple of years. With the advent of widgets, data has become more portable, interactive and most importantly, viral. It's in almost every web startup's business plan to include a widget or two at some point, mainly because it helps increase their audience and puts more eyeballs on their content.

Widget development requires knowing Javascript and/or flash, not to mention knowledge of the regular language that the parent site is built in.

3. Custom CMS themes

Designers and developers can always find work creating or customizing a CMS theme. As the popularity of CMS like Wordpress and Drupal have risen over the past years, so has the demand for creating themes for the software.

Many people use CMS to power their personal or business websites, so this work is always going to be around. A decent website needs a unique and usable design that reflects well on the brand behind it.

4. CMS Customizations and plugin development

CMS are great because it gives site owners with little technical know-how the ability to change aspects of their site on the fly with the help of modules. While most CMS platforms have a long list of modules to offer, many businesses and personal sites need more, and custom modules or plugins are the perfect solution.

Developers can have thriving businesses in CMS development and customization alone. Here are a few (and by no means all) of the top CMS platforms that could use plugin development and other customizations:

5. PSD to XHTML services.

Another one of the more popular skills needed is converting Photoshop files (PSD) to XHTML files for template use. Because designers don't always know how to convert Photoshop layouts into template files, a CSS and XHTML ninja can always find work. Because of the array of browsers now in common use and the niggling differences in how they render sites, you want to be a web developer who can build-out sites that display the same in any browser. This kind of design to code service is the most sought after of them all.

6. Javascript Plugin creation

Much like the rise of CMS and MVC frameworks, Javascript frameworks are just as popular. These Javascript frameworks are built with the ability to add custom functionality in the form of modules. If you're a developer who knows how to build custom Javascript modules for frameworks like jQuery or Dojo, you'll have plenty of work available. Here are some of the most popular Javascript frameworks you might need to get a handle on.

7. Facebook/MySpace applications

Facebook and MySpace have both opened up their platform to allow developers API access, and the demand for social network apps has been huge since then. A whole new industry for web development sprang up overnight, and hundreds of applications are now added on a daily basis. The social media application platform has been found to be very viral and potentially very lucrative.

Some of these applications are built to make money or drive brand awareness, but ultimately the applications can be very successful and viral if they're done properly. A solid developer can make a decent living creating Facebook and MySpace applications.

Social networks like Facebook require that you learn their own language of syntax, like the FBML (Facebook Markup Language), so there is a small learning curve to this skill.

8. iPhone applications

Yet another platform-specific skill set, building iPhone applications can be very profitable, and much like the social media applications, a great skill for any developer to know. Making an iPhone app that is accepted into Apple's platform has an excellent chance at making great money or receiving tons of downloads.

This is a great thing for web developers because companies are starting to see the value in developing iPhone and other mobile technologies, and consequently will be wanting more and more applications developed in the future.

9. Ecommerce integration

Business web sites are always going to need ecommerce integration. Essentially, if you can take a language or framework (PHP or Rails) and fuse it with a payment gateway (like Paypal or Authorize.net), you'll do well for yourself. I'm predicting that we're going to see more paid services than free, ad-supported services being developed in the near future, as less money is being doled out to startups.

As the economy turns sour and the ad industry starts to get a little tighter, websites that use a subscription-based revenue model will start to become more common. Having the knowledge to piece together integration with online banking services like Paypal and Google Checkout will be great skills to have.


Photo by Andre Charland

10. Flash and Actionscript Knowledge

Flash animation can do a lot for a website. Flash can be used to create videos, interesting navigation, fun animated sequences, widgets, and many other useful things on the Internet. The flash technology can add a very professional dimension to any website, and large websites and corporations always pay to have their sites look professional, and often commission Flash animated interfaces to showcase their products. With search engines working on ways to have Flash communicated better with them, this is a skill that's sure to boom as the search technology advances.

Conclusions

Learning frameworks is one of the best way to increase your skill set and potential work as a freelancer. Whether it's a Javascript framework, CMS, or MVC framework, taking the time to learn a new skill can be a huge advantage to finding work. Also, website owners pay big bucks for development that allows them to make money, because they see it not as a regrettable expense, but as an investment in future profit. Services like ecommerce integration, creating iPhone apps and flash knowledge will also be much-needed skills, and people will always pay for those skills.

Friday, October 24, 2008

Hint for Web Design

Web Designing is as easy as 1-2-3, claim some of the software tools on the market that "generate" your pages for you. Unfortunately, many web designers today have fallen prey to this marketing gimmick - and the results are obvious. Every now and then, one comes across a website that looks good with a particular browser and a particular screen-resolution; but view it with a different browser, and you can't even read the plain text on the page. Worse still, given the number of operating systems that are used by netizens worldwide, these pages will never be seen properly by more than a half of the intended surfers.

Now let's assume that this web page belongs to a site that sells stuff online. The very fact that half the users cannot even see the page, translates into losses worth half the amount straightaway (perhaps, even more!) I guess that makes a good case for the raison d'�tre of this article! Web Designing is, in my opinion, a cocktail of creative skills & technical prowess - and one is no less important than the other.
In the following lines, I have jotted down a few points that I noticed during my online journeys, important from the point of view of web designers. Some of them may be taken with a pinch of salt; for it is not possible to please everyone everytime. But most of them are simple enough to be used as a rule of thumb.

1. A picture, they say, is worth a thousand words. A picture file, alas, is also almost as big. Images, no doubt, enhance the look of a page, but it is not advisable to go overboard in stuffing your page with a truckload of images. Most net-surfers use a dial-up connection, and the average time to load a page should be no longer than 5 seconds. If it's longer, the surfer will most probably click away elsewhere. So, within this time, all the images on a page must be loaded as well. So, as a rough yardstick, keep the aggregate page size less than 30k.

Another important point to note is that each file on the page requires a separate HTTP request to the server. So a lot of small images - even if they do not add up to a lot in terms of bytes - will slow down the loading a lot.

Even when you must use images for navigation, please give a second thought to the users who will not be seeing those jazzy, fantastic & truly amazing buttons that you spent hours to design. Yes, I'm talking of the ALT text attribute of the IMG tag. Do not forget to provide an Alternate Text for each image that you use for navigation. (It may be left blank for certain images that are purely for aesthetic reasons, but let that be an exception, rather than the rule.) Though not obviously apparent, ALT text can help such users immensely.

Modern browsers offer users a choice to turn off images. This gives an idea of how troublesome the unwanted images could be.

A couple of more attributes that make your pages load faster are the HEIGHT and WIDTH attributes. Without these, the browser must wait for the image to download since it cannot know how much space to leave for them!

2. Navigability & functionality come before artistic excellence. It is no use making your site a masterpiece of art if users cannot navigate around it - even after they reach the main page, they have no clue as to how to go where they want to go.

3. Especially common, is a kind of navigation that some people call Mystery Meat Navigation. That means, that unless your mouse moves over an image, you have no idea where that link might take you. Only when the mouse hovers do you see the actual link. This is cumbersome because users need to move their mouse all over the place to find out which part is a link and which is not.

4. Follow the K.I.S.S. principle: Keep it simple, stupid!

5. Next is a very important practical suggestion: whenever your whole page is within a TABLE, the page cannot render (i.e., the page does not show on the screen) unless the entire table is downloaded. You might have noticed this on several websites, when there is no activity for a long time, and suddenly the entire page is visible. Hence, to avoid such a situation, what you should do is this: Split the table up into two tables one below the other, and let the top one be a short table that displays just the page header and a few navigation links. So now, immediately upon downloading this part of the page, users can see the page header - and this prepares them for the long wait ahead, as well as keeps them from leaving your site to go to other sites, in case of a slow connection.

6. The ongoing browser wars have left only one casualty - the user. As a word of caution, stay away from all browser-specific functions. Because if a certain feature is supported by one browser, it will most definitely not be supported by another. Where you must use such features, it should not hamper the display of the page in the other browser which does not support such functionality. In other words, your page should degrade gracefully.

7. Creating a new browser window should be the authority of the user only. Do not try to popup new windows to clutter the user's screen. All links must open in the same window by default. An exception, however, may be made for pages containing a links list. It is convenient in such cases to open links in another window, so that the user can come back to the links page easily. Even in such cases, it is advisable to give the user a prior note that links would open in a new window.

8. Keep in mind the fonts-challenged users too. The ultra-jazzy "Cloister Black MT Light" font that looks so amazing on your machine may well be degraded into plain old Times New Roman on your user's machine. The reason? He/she does not have the font installed on his/her machine - and one thing's obvious - there's nothing you can do about the situation, sitting halfway across the globe from them.

9. Stay clear of out-of-the-way hard-to-find fonts. Use plain vanilla fonts like Arial, Verdana, Tahoma, and Courier. If need be, make your jazzy fonts into an image and put that on the page. (and while you're there, do not forget Tip #1.)

10. A new design trick that is increasingly being used on the web has caught my fancy: It is a very functional navigation bar that guides you across all possible paths within the site. It looks something like this:
Home > Section > Subsection > Page
What better than to give your users a handy way of visiting just about any other page on your own site, and informing them where they are!

11. Another new trend on the web is not all that inviting - various vendors come up with "revolutionary plug-ins" and undoubtedly, most amateur web designers jump up to spruce up their pages using them. The reality is that most people won't have them installed, and wouldn't care about it anyway. Come to think of it, have you seen plug-ins on any of the most popular sites, including Yahoo.com, Amazon.com or Google.com? It's simply not the best thing to do. Mention must be made here of Macromedia's Shockwave Flash plug-in, which has now made its way onto most computers today, and thus presents no harm in using vector animation on your site.

12. Java is yet another often-misused technology on webpages. Use Java as a utilitarian programming language, not as a graphics front-end for your photos/images. There are various things you can do with Java; that does not mean you should do all of them. Java applets are known to run slower, so users experience a certain sluggishness in performance. And worse still, Java has been known to crash certain browsers. This is not something everyone likes, especially if it is done for the sole purpose of showing a set of images in a slideshow!
The moral: Use it, but with discretion.

13. Never underestimate the importance of those META tags. They can make all the difference between your users coming to your site and going to your competitor's - just because they couldn't find yours. Search Engines heavily rely upon the Keywords & Description Meta tags to populate their search database. And once again, use discretion in writing these. Including a huge number of keywords for the same page can spell trouble. The description should be a small, meaningful summary of the whole page that makes sense even when seen out-of-context of the webpage itself, say, in a listing of search engine results.

14. And the final point that summarizes all the points so forth: Write for all browsers, all resolutions, and all color-depths. If you show people pages that look best with their own browser and their own resolution, that makes them feel "at home", and you get a better response. Compare this with a website that proclaims "Viewed best with Browser X at a resolution of 1024x768." I'll give you a choice between two options when you see such a page: download the suggested browser (which might well be over 50 Megs), then go get a new monitor that supports the high-resolution, and then adjust your screen setting so you get the perfect picture. Or simply click away to another site. Which do you prefer?