Blogging for SEO

Name your pages and graphics in a way in which it will be easy to find them later. When you have groups of pages or graphics that are similar, give them similar names. For instance, if you have a group of pages with stories about your son, start the name of each file with “son”. The file names could be: sonpark, sonschool.

Use of a thumbnail is an option in place of a text link to your graphic page. A thumbnail is a smaller version of your graphic. You can create one with most graphic programs by just making the graphic smaller or using the “thumbnail” option, if the program has one.

Keep text narrow. It is easier to read text that is kept in narrow columns. Did you ever wonder why newspapers keep their columns so narrow? It’s to make it easier to read. It’s even more important on the Internet because your readers are reading on their computer screen. If they can’t read everything, without scrolling sideways, then they probably won’t read it at all.
—————-
Listening to: Breaking Benjamin - Forget It
via FoxyTunes

The way to make the complex feel painless is to design with flow in mind. By designing a site that is fluid and intuitive and inspires flow, you help new users get up-to-speed more quickly, reduce the chance that existing users leave your site to switch to another and create users that evangelize your site to other people. That results in more users, increased activity, and greater awareness of your site.

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; }
—————-
Listening to: Fort Minor Feat. Sixx John - There They Go (Green Mix)
via FoxyTunes

When writing the code often it’s useful to apply some special formatting to order CSS properties — to make the code more readable, more structured and therefore more intuitive. There is a variety of grouping schemes developers use in their projects. Some developers tend to put colors and fonts first; other developers prefer to put “more important” assignments such as those related to positioning and floats first. Similarly, elements are also often sorted according to the topology of the site and the structure of the layout.

Optimize your HTML code: Make sure that your site doesn’t have any unwanted tags and that it is optimized.

Maximize content area: This not only reduces load time, it enhances the readability of your site.

Stick to simple designs: Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages.

Spread out your content: In case you find yourself having very long pages of content, break them down into separate sections and thus bring down the sizes of the individual pages.

Using Layers instead of tables is a new concept for better load time. We will be bringing out an article on it soon.

Read More

—————-
Listening to: 10 Years - Prey
via FoxyTunes

Don’t rush into production. The ink is barely dry on the contract and already they are opening Photoshop and editing code. Not enough time is given to laying the ground work. A good web designer needs to understand the context of the project. Why is the site being built? Who is the target audience? What call to action do you want them to complete? Who are the competition? How is the sites success going to be judged? Having all of this information at your fingertips makes the design and development stages much easier.

When making changes to your existing styles, leave some indication of what you changed. Like indenting the new lines that you put in a tab further than the rest. This will allow you to easily find recent changes in case something goes wrong, like on another page for example.  To take this another step better, add a comment with the date you last made the update, after the indented line.

1. Define a table of contents

One possibility of integrating a table of contents is to display a tree overview of your layout with IDs and classes used in each branch of the tree. You may want to use some keywords such as header-section or content-group to be able to jump to specific code immediately. You may also select some important elements you are likely to change frequently — after the project is released. These classes and IDs may also appear in your table of contents, so once you’ll need to find them you’ll find them immediately — without scanning your whole code or remembering what class or ID you once used.

2. Define your colors and typography

As Rachel Andrew states, “one way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define constants. A common use for this is to create a color glossary. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.”

3. Indentation is your friend!

For better overview of your code you might consider using one-liners for brief fragments of code. This style might produce messy results if you define more than 3 attributes for a given selector. However, used moderately, you can highlight dependencies between all elements of the same class. This technique will dramatically increase code readability when you have to find some specific element in your stylesheet.
—————-
Listening to: Chevelle - Antisaint
via FoxyTunes

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

http://www.cssdrive.com/index.php/main/csscompressor/

Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.