Web Designers Tips and Tricks to have a Professional Edge

Another busy week passed and today is already Sunday. Time runs too fast, Isn't it? As usual, Sunday is my family day so we went to church this morning and eat out afterwards. And now, I am again in front of my computer, back to the real world.. Actually, I do not have tasks for today but I just love surfing for new information. Sometimes my family is already jealous with my computer because we have more bonding moments that with them but I just cant help it... I am enjoying my work... I am enjoying it and it is really financially rewarding. Anyway, I would like to share to you the top tips and tricks you should be using to give your work that all-important professional edge... for the sake of those who want to pursue a career in web designing.

1. Planning

When you’re itching to get started, it’s easy to overlook the most obvious step: planning. Whether it’s drawing wireframes and site diagrams in OmniGraffle or Visio, or even on a scrap of paper, you’ll save time by having an overview of your design at the site and page level before you start building. Obvious errors can be detected and solved before it’s too late to go back and it makes explaining your ideas to clients and colleagues a lot simpler than waving your hands in the air.

2. Do it by hand

Although there are some excellent tools around for building web sites, such as Adobe GoLive and Adobe (formerly Macromedia) Dreamweaver, professional code monkeys prefer to code by hand. Are they crazy masochists? Quite possibly.

There’s only one way to learn HTML, and that’s to roll up your sleeves and get your hands dirty with some actual code. But fear not: HTML has one of the easiest learning curves you’ll ever come across and you can create a basic web page with only a couple of lines. Writing code by hand also ensures that you write the leanest code possible, which is the ultimate aim of all HTML geeks.

Don’t throw out that copy of GoLive or Dreamweaver just yet. Both applications have excellent code writing environments, and have useful features, such as collapsable blocks of code and split views so you can code and see the results at the same time. If you want to try the code-only route, then any text editor that can save in the basic .txt format should do, but Mac users might want to check out Bare Bones Software’s BBEdit, and Windows users should give the freeware AceHTML editor from Visicome Media a whirl.

3. Stylesheets: importing vs linking

There are two ways to attach an external stylesheet to your HTML page, and not all browsers understand both methods. This can be used to your advantage to feed one stylesheet to modern browsers and another to Netscape 4.x, which would otherwise choke on more complex CSS.

Cascading stylesheets are designed to flow over each other. The secret is to create a simple stylesheet that works in Netscape 4, with more complex CSS relegated to an additional stylesheet that’s attached using @import, which Netscape 4.x will ignore:




4. Smarter gradient backgrounds

CSS gives you a lot of control and flexibility over the tiling of background images. And the great thing is that tiled images are not limited to the Body background but can also be applied to any DIV, block level or inline element.

Images that tile conventionally or just along the x or y axis can be set to scroll with the page or remain fixed while the rest of the page scrolls over it. Backgrounds can also be offset. This means that it’s easy to create a vertically graduated background that never repeats no matter how long the page is, using graphics that are only a few kilobytes in size.

Using the following code, the background.png file need only be as tall as the gradient and one pixel wide. This example assumes that the gradient fades into white, but the backgroundcolor attribute could be any value.

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

5. Commenting

When you come back to a site that you designed months ago, there’s nothing worse than trying to figure out what you did and attempting to untangle a spaghetti of code. Do yourself (and anyone else who wants to check out your code) a favour by putting comments in your HTML. Comments might add anything from a few bytes to a kilobyte or two to your page, but the time savings are invaluable.

Commenting also encourages you to keep your code tidy by breaking it into logical chunks. Some coders even use comments to create a table of contents for the page, which is only visible in code view.

Be aware that HTML and CSS use two different kinds of commenting, so you may want to learn the difference.

/* CSS comments are enclosed by a forward slash and an asterisk. */

6. Use simple PHP to build sites

There’s no need to become a PHP expert to start using it in your site. If your server supports PHP, you can quickly and easily use server side includes to build a library of commonly used elements, inserting them into your web page with a simple link. This is great for elements like menus, which can exist as a single instance, and means that if you add a new menu item or change the design, you just need to change the include file, which will then update the whole site.

Includes are simply snippets of HTML code such as a table or unordered list. The page calling the includes should end .php and the includes are inserted using the following simple code:



7. Set fonts using ems

Designers love specifying type sizes in pixels because it corresponds easily and naturally with what they do in Photoshop. But as a type size specification for the web, pixels have one major disadvantage: they can’t be resized in Internet Explorer. As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what’s the solution?

The answer is to specify type in ems. If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:

body { font-size: 62.5% }

This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.

8. IE Box Model Hack

Sooner or later you’ll come across an important bug in Internet Explorer that incorrectly calculates the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. This can wreck layouts. The solution is known as the Box Model Hack, which uses another bug in IE to force it to use tags that other browsers ignore. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

You’ll end up with a box that’s 120 pixels wide in most browsers, but only 100 pixels wide in IE. The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:

Your content goes here

9. Space saver

Nobody likes building forms in HTML, especially as browsers insist on adding padding around them for no reason. Simply add the following CSS to your stylesheet:

10. Test, test and test again

While Internet Explorer still dominates the browser market by a huge percentage, its lead is being gradually eroded by other browsers such as Firefox and Opera. There are also plenty of people out there still using archaic browsers like pre-Mozilla versions of Netscape.

It’s virtually impossible to design great-looking web sites that work in all browser versions, so it’s best to decide which browsers you’ll support. Mozilla-based browsers, WebKit-based browsers (such as Apple’s Safari), KHTML-based browsers (such as Konqueror), Opera and Internet Explorer versions four and higher are generally considered a safe benchmark. However, you should still be a good net citizen by ensuring that your code degrades gracefully, so that even unsupported browsers can experience your site – even in a limited form (see tip 14).

11. Format fundamentals

In the old days it used to be simple. If the image contained flat colours like a logo, use a GIF. If it was photographic, use a JPEG. There’s also an overlooked third format, PNG (pronounced ‘ping’) that comes in two flavours: an 8-bit version containing 256 colours, like GIFs, and a 24-bit version with alpha channel support allowing for variable transparency.

The bad news is that Internet Explorer doesn’t support PNG’s alpha channels without resorting to a complex hack. However, 8-bit PNGs generally compress much smaller than the equivalent GIF version. Unless you need animation, which PNGs can’t do, PNGs can replace GIFs in most situations, resulting in an overall file size saving.

JPEGs usually create smaller files than 24-bit PNGs, so unless you’re taking advantage of PNG’s alpha channel transparency using the hack (www.alistapart.com/stories/pngopacity/), then JPEGs are still the best format for continuous tone images.

12. The ‘title’ and ‘alt’ attributes

Ensure that all your images make use of the alt and title tags so that screen readers for the visually impaired can correctly parse your page:



13. The correct format for pseudo classes

For text rollover effects, it’s important that the pseudo classes are in the right order, or they won’t work correctly in all browsers. The correct order is:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

14. Use semantic mark-up

The idea behind semantic mark-up is to separate the content of your web site from its appearance so that it degrades gracefully. Ideally, if you were to remove the stylesheets, your web site should still work. It might not look pretty, but it means that users with older browsers, will still be able to get meaningful content from your site.

The positioning, styling and a certain amount of interactivity can then be added with stylesheets and CSS-P.

15. Favicons

Favicons are the little 16x16 pixel icons that appear in your favourites lists and the title bars of web sites. They’re quick and easy to add: save a graphic in .ico format (Mac users may want to consider using Graphic Converter as Photoshop doesn’t support this format) and put it in your site’s root folder. It’s as simple as that.

16. Change capitalisation using CSS

If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format.

h1 { text-transform: uppercase; }

17. Wrapping text around images

For a quick and dirty way of wrapping text around images, use the image’s align attribute to push it to the left or right. Rather than jump below the image, text should now flow along the edge.



18. Universal character sets

Character sets are an important part of a web page’s definition, but they’re probably the least understood component. Character sets, which are defined in a web page’s invisible head section, tell the browser what method is being used to encode the characters. A charset ISO Latin 1 (also known as ISO 8859-1) will render the code it finds using a basic Western alphabet, but a charset of Shift JIS will attempt to render any characters it finds as Japanese.

With so many competing character sets, problems can occur, especially when using the MS Windows character set (which contains certain characters that may be replaced by a blank space on other operating systems) or when several languages need to appear on a single page.

The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s head like this:



19. Print styles

When people print web pages, often they’re not interested in your flashy graphics: they just want a simplified version of the page. Using CSS it’s possible to create a separate stylesheet that only affects printed versions of your site, rather than having to create a new HTML page or adapt an existing one. You add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:



or



This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability.

20. Learn from others

Finally, a quick and simple tip: learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work.

Internet Rules

Just like anything else that requires direction & structure, the internet also requires rules & regulations. These rules and regulations are to ensure that all users have a positive, stress free experience.

Sometimes you will come across a website that has not complied with the rules of web design. You will spot these sites straight away with there bad designs, confusing navigations, conflictive nature and all the other inconsistencies like font sizes, colours etc. To ensure that you don't unknowingly create a bad site follow my steps below and prevent any problems from arising.

Audience

Make sure you know who your target audience is before you start anything. Once you know your target audience you can then make the hard decisions of your designs.

i.e. "Should I use flash, if so how much?" well if we are talking of a audience of OAPs then no you wouldn't or if it is absolutely necessary you would keep it to the very minimum.

Design

Design also ties into the knowing your audience point, as you will design your website around your target audience. If your website is a social site for teens to young adults you will be in most cases quite graphical, strong emphasis on design and creative flair.

Another part of design that is sometimes over looked by beginners is the styling of paragraphs, fonts etc. These are quite small aspects of your website, but they can have a huge impact on the look of your site.

Simplicity

When it comes to design you will soon come to realise that the less on the screen the cleaner it looks. One thing you should remember is if your visitors are having trouble using your site there is a problem somewhere. Just because you feel it is easy to navigate and operate doesn't mean it actually is, listen to your audience and make the changes they need. A good way to get around this before it actually becomes a problem is to offer a questionnaire for people to complete, this will effectively pick out any issues for you asap.

Colours

This should be common sense but you would be surprised how often you'll see a site with a background colour that over powers the font colour, effectively making your visitors eyes hurt and sucking their will to live. Well its not that bad but it does get extremely annoying. A great way to overcome this problem is to not take chances, if your chosen colours are too close reassess and choose a different colour that will defiantly not cause you any problems. You need to remember that colours won't always display exactly the same on every computer, so if it borderline readable on your computer someone else could be having extreme problems seeing difference.

Tables

With ever site you make you should be aiming to get it up to standards. Something you should be doing with every website if lose the tables. Tables are not a good tool for layout, they have been considered bad practice for the past 5+ years. Replace your tables with div tags and ensure your site is up to standards. The only situation where a table is OK is for its actual purpose which is for holding data. I.e. a science experiment findings tables to display the results.

So by following those 5 points you can give your website a fighting chance at succeeding.

Things to Consider When Starting an Online Business

Online business is related to web design... Web design is existing because online businesses need them. Before investing your hard earned money to your online business, you need to consider several things to survive.

So you have decided to start your own online business. Knowing where to begin can be a big challenge in a venture that can seem rather scary. Like any business start up you should have a plan to follow that will help guide you through the progression. As you begin the process there are five things to consider when starting an online business.

Choosing a Niche

This is the center of beginning an online business. A niche is simply a special area suited to interests, the nature of, and abilities of a demand of a product or service. So with this take something you love and create it into an online business.

As you are finding your niche, remember to be focused and stay away from being to broad, and choose one facet to focus. Instead of choosing the broad topic of food, choose desserts, or dinner party menus. The more specific the niche, the less likely you will be to lose focus.

Choosing a Domain

There are a few things to remember when choosing a domain name. Before you are ready to sign up for your domain you should be prepared.

Brainstorm

Many people have come up the same ideas you have, be well stocked with options. It is not unusual to go through multiple tries before you find the right one, or an available name. Make sure to use a .com or .net, or both and redirect traffic.

Keep it Short

Try and avoid making the domain too long. The name should be easy to remember, and if it is too long, easy becomes more difficult. The general rule is to try and keep it around 7 to 10 characters not including the prefix or suffix.

Building a Website

Building a website takes time and a great deal of effort. It make actually take more than what you initially estimated, but do not cut corners to compensate for the under-estimation.

Make sure you have a plan of action. Know what you want from the site, but make sure to balance traditional with the avant-garde. Keep it professional.

Remember marketing is a key part of web design. The site should always be maintained. People can spot a dying website.

Search Engine Optimization

SEO services can do amazing things for a website, but like any consultant the wrong advice can do more harm than good. Many individuals claim to be SEO experts. Do your research to make sure the SEO is well qualified. Ask their methods and past success stories, because the right SEO can generate more traffic, offer technical advice including keyword usage, and more importantly offer research and development to target markets and key geographical points.

Advertising your Business

Marketing and advertising can be the world to a successful business. Just because it has a domain name, does not mean it will receive thousands of hits each day. You really need to work to get your name out there. In the beginning you can use traffic exchanges, forums, groups, chat rooms and blogging to get the ball rolling. If you sell goods or services, use commissioned based affiliate programs.

What you see is what you get

When it comes to computer, there are so many softwares that makes our task easier and that includes a web designers task. Have you heard about WSIWYG?

WSIWYG (What you see is what you get) software, such as Dreamweaver or Frontpage, makes the process of designing a website a lot easier for the average person. These are essentially programs that require little knowledge of web programming to operate, instead relying on design ideas and "drag and drop” tools to operate. This software normally works with html code as its base, although it can also be used to design more complex code like PHP or ASP.

WSIWYG software is essentially a design editor that takes the pain out of website building. You don’t have to know how to program in code to get the benefit from such software packages. A keen eye for design and an understanding of tables and how to use them is a good enough basis to begin developing nice, clean, attractive html websites. This type of software is affordable and regularly updated, so in the long run, the money and time spent getting to know how to use it could pay for itself many times over when taken in context with the costs of hiring a web designer and webmaster.

WSIWYG software is a good introduction to web design, and will give you everything you need to know to develop and run basic websites for your business. With a basic template designed on your software, all that would be required to keep the website fresh would be regular editing of the content on the site, updating and adding to it as much or as little as you need to.

WSIWYG software also has the added feature of being able to be used for JavaScript programming, although this might require a little more knowledge of code. However, there are plenty of plug-ins that can help you to get the most basic JavaScript operations to be performed.

What is a Web Designer?

Recently, more and more people are oriented with the internet. More people depends so much in the internet for almost all of their needs which is why more business shifted their operation online and they needed to create a website for that. Web designers are greatly benefited with this transition. What is really a web designer is? What are his tasks? Why do we need to hire one rather than creating our own.

A Web designer is a professional who designs, creates, tests and maintains Web pages and Web sites. Web designers are sometimes just graphic artists, though most use the coding language html extensively. Web designers must be effective communicators with the ability to understand concepts and ideas and translate them into their Web site design. They are expected to create high performance Web sites using a variety of elements such as e-commerce, visual design, search engine optimized content, strategic layout and advertising. Web designers often work on many projects simultaneously while ensuring that each one is completed on a timeline.

There are a variety of tasks that a Web designer must accomplish while working on a project. It involves working closely with customers to answer their questions and to gain an understanding of project expectations. A Web designer also acts as an advisor, guiding clients through each step of the site construction process. A designer uses HTML, Java script, cold fusion and many other tools to write Web pages. They also usually know how to use programs including PhotoShop, DreamWeaver, Corel Draw and Quark.


Most companies hire professional web designers for them to be competitive in the market. There is a huge demand for this profession because not all people has the skill to design a website and all types of people need to market their services and products online.

Web Designer's Rant

Crazy it may seems because blogging has been popular for years already but I just decided to have my own today. To think that I am into designing websites, blogs and all that is related with the world wide web. I am just too occupied with all the projects that I have and I hope I am not yet too late to be "in".

I decided to create this journal so as I could monitor what I have been doing because time runs too fast and I don't really notice it because I am just too busy. Of course I am making good money at it so I also want to share here what I have learned so that those who dream of becoming lie me will also get an idea.

I just hope I could find time to update this blog everyday.... I will really try to do so.

I will give more of myself tomorrow. I just have to rush some projects... Whew...