Blogs

The web has evolved a lot since its boom in the late 90s. Especially web typography. Web typography deals with the font usage among websites. The clearer the font, the better.

 

Web typography deals with the line-height, text-spacing and colour, which are all text properties. Font styles and usage will greatly affect the design of a website as a whole. It can be boring or exciting.

 

There are still advancements in web typography, including using the image replacement technique. Using css, some use images rather than web type fonts. It enhances someone's site significantly. Of course the negative of this option is that text within images are not readable by search engines.

 

Regardless, good old web type fonts are best for corporate websites after a clean look.

 

With fonts like Arial and Times New Roman considered "default" fonts for some, there are other alternative fonts that web designers should consider. Here are my Top 4 (in no particular order):

 

• Verdana - A good sans-serif font with good width and readability. It's pretty versatile, looking nice at small and big font sizes. It may have become too common though.
  
  
• Georgia - The 'New Age Times New Roman'. I think the mistake most web designers tend to make is they use this as their base content font. Georgia works well as headings, but it's too stylized in my opinion. Here's a tip: Use this font with high line-height properties in your CSS if you plan to make this your base font.
  
  
• Tahoma - Very similar to Verdana, but I think this is more effective in small sizes. The Windows feel to this font makes it good for footer text and comments.
  
  
• Lucida Sans Unicode - A relatively narrower sans serif font compared to Verdana and Tahoma. It relies too much on the smoothing of the system. This works well for modern-looking templates.

As web designers, I think we all have experienced the hard task of finding new ideas and inspiration. Read on to find out how my work habits and how the environment influence my design.

 

Working at home kills your creativity.

 

My work habits and environment have a big influence on my work. So I’m going to talk about my work environment first.

 

Being a full-time designer, I get to work at the office and surf the web for the next big thing. Personally, I find it very boring working at home. I can lose my focus and concentration on the design I'm doing. To think about it, how can you find new ideas if you are constantly facing your work and computer.

 

Yes, you can browse the web or CSS gallery sites such as Best Web Gallery to find inspiration. But since my work is web design, I also prefer to find inspiration offline (this way I can avoid being overly inspired by other websites).

 

Our Office.

 

To keep my creative juices flowing, I like to surf the net for web designs and print designs. That way I'm exposed to both the web and print design works of others and the trends that goes with it. I find it amazing that I manage to do design work for my boss while looking for inspiration for the next design I'll be doing.

 

For design feedback, I like to ask my non-designer friends because they often give me comments from a different perspective.

 

Book Stores

 

Book stores are like a massive inspirational depot filled with a wide range of books, magazines, gift products, posters, and print ads. Whenever I have a brain block, I like to walk around the book store and scan the magazines, book covers, and post cards.

 

I like to see fresh people and things around me, so I don’t go to the same location all the time. I hop around, trying to find the best food on the menu... metaphorically speaking.

 

Shopping Mall

 

Shopping centres are also inspirational depots. You can get inspired by so many things – from clothing to print ads, from window display to mall decoration, etc. By looking at the fashion design, you can tell what are the current trends. I look at the fashion trends and adapt it in my design.

 

Art Galleries

 

To find new art styles and trends, I visit contemporary art galleries. Sometimes I may even spot inspiring street art while walking on the street.

 

Inspired by Nature

 

Yes you can also get that from nature. The cloud formation, flowers, insects and birds. Even the flow of water can be an inspiration.

 

How to Avoid Copying

 

It happens sometimes: you get inspired by something, become too focused on it and end up creating something that is too similar to the original source. So, how can you avoid being a copycat? I have two techniques which work really well for me:

1. Zoom into the subject and pick up the details.
2. Mix and match different sources.

 

Conclusion

 

Next time you are outside, try to pay more attention to you environment, you may find a lot of interesting things that you can incorporate into your design. I don’t purposely go around to find inspiration. The places I mentioned in this article are part of my life and daily routine. Whenever I see something nice, I sketch to document it.

 

The best thing actually is enjoying life and designing beautiful things.

CSS or Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to be used in HTML and XHTML respectively. It can also be used in XML.

Uses

CSS can be used to define colors, fonts, layout, and other aspects of document presentation in a web page. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS also allows authors to move much of that information to a separatestylesheet resulting in considerably simpler HTML markup.

Sources

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

href="mystyle.css" />

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

This is a paragraph

 

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:

 

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

A full definition of CSS can be found here.

CSS bug fixing

 

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the
process. But before jumping on the bandwagon to fix things consider these criteria...

 

Make sure your markup is well structured

 

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for
what they're meant for, tabular data.

 

Fixing for IE

 

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...

 

Isolate the problem via XHTML

 

You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear.
If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.

 

Isolate the problem via CSS

 

Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc. Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine is Adobe Dreamweaver and even a notepad has done wonders for me. There are also a number of plugins for Mozilla Firefox that you can use to debug your css like CSS Viewer, FireBug and Web Developer Tool.

 

In general, CSS is a great way to present your web page. SEO will also benefit on your CSS use, it will no longer need to crawl unwanted codes like because you wont be using tables unless there is a tabular data to present. SEO will be so efficient on your web page. So i urge every web designer out there to use CSS every time they design web pages. After all it is the road to enlightenment.