How to Select a Good CSS Template For Your Site

Posted on April 12, 2016 By

How to Select a Good CSS Template For Your SiteIt is no secret that many Webmasters have switched over from traditional HTML table design to Cascading Style Sheets (CSS) design due to the many advantages that CSS provides. In fact, World Wide Web Consortium has also recommended the use of CSS in website design whenever possible.

With many benefits CSS can bring to you as a Webmaster, this article illustrates how you can choose a good CSS template for your new website. This is very important because no CSS designers are alike and not everyone can design a perfect conforming template using CSS. Hence, I intend to shed some light to help you select a suitable CSS template or layout for your website.

The main reason for most Webmasters to choose CSS is the minimum maintenance effort. However, there are Designers who terribly misuse this powerful CSS technique. Hence, in selecting a CSS template, you should look into the codes to see if there are well-commented. It is important for every block to be commented as this makes future modification easier. Another important point to look out is

Web     ,

Tips to Accelerate Your WordPress Website

Posted on March 3, 2016 By

Tips to Accelerate Your WordPress WebsiteEven Google considers website speed into their algorithm when positioning websites. So if your website loads too sluggishly you can anticipate your Google rankings to drop, and consequently draw less traffic to your website. Having a fast website is very vital for staying active in the modern era of web design.

Hence what can you do to make your site quicker? Here are a simple ways to reduce your page load times and keep you visitors contented.

1. Optimise images

When considering images, you need to concentrate on 3 things: format, size and the src attribute.

Image size

Oversized images take much time to load, so it’s vital that you keep your images as small as possible. Make use of image editing tools to:

    • Cut your images to the appropriate size. For example, if your page is 570px wide, resize the image to that particular width. Do not simply upload a 2000px-wide image and fix the width parameter (width =”570″). This reduces your page load time and generates a bad user experience.
    • Decrease color depth to the lowest

Web     , , ,

Web Design Tips to Help You Go From Beginner to Expert

Posted on January 4, 2016 By

Web Design Tips to Help You Go From Beginner to ExpertRecently I’ve been putting a lot of thought into what I should blog about, I’d like it to be a regular thing, so I thought it would be good to start with talking about the basic skills I have developed whilst working as a web designer. Below are 3 main points that I feel have been instrumental in improving my own web design, and I thought some beginners might appreciate these tips. Feel free to add your own thoughts in the comments section below.

1. Ditch the design view and learn to code.

Learning to code HTML is probably the most important aspect of becoming a web designer. Whilst some people may not find this easy at first, there are a wealth of resources to help you get started. Myself, I learned to understand HTML from a ‘getting started’ book. This was years ago, I was about 14, and I dipped out of it for a long time. When I came back to it I still had that basic understanding of what should go where, but so much

Web     , , ,

Useful CSS Tips and Tricks For Web Designers

Posted on May 20, 2016 By

The traditional ruler of the Website development and website coding, HTML received an add-on in form of CSS or Cascading Style Sheets. This is a new technique for website xhtml and css coding that enables alteration of visual presentation of web pages without actually using HTML or xHTML. Add to it the advantage of JavaScript to in and Bingo! You get a perfect tool to play with the search engine crawlers and make them get you great search engine rankings. However, it may not be perfectly safe but still you can use them cautiously.

In the stone age of search engines (around 1998) a number of web promoters tricked the crawlers by adding hidden text to the web pages. This hidden text carried nothing but an incorrigible list of key words and phrases in varying combinations, repeated over an over again. Search engines soon started banning the web pages carrying such a dirty gimmick to get search engine ranking. However, CSS added a twist to this old tale. It enables you to add hidden text to the web page without getting you in the bad books of the crawlers.

Another CSS trick is making links vanish.

Web     , ,

CSS Layout Tips

Posted on May 13, 2016 By

The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that. Some of these tips are not exactly new, or rocket science, but hopefully they will save someone a bit of bother somewhere!

Tip 1 : Clear out the default padding and margin settings before you start working.

Different browsers have different default margin and padding sizes so you want to start with a clean slate, so to speak. Use this command:



margin: 0;

padding: 0;

border: 0;


to clear all default margin and padding settings. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round click-able images, although some people argue that the purple border is necessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop without having to set img border=0 for each image (which is against the strict markup

Web     , , ,

How to Create Cross Browser Pixel Perfect Layouts With CSS and a Reset

Posted on May 9, 2016 By

When people hear the words CSS, they often freak out especially if they come from a Table based background. But please, don’t be scared. It’s a nice world to be in once you get the hang of it. With the tips below, I hope to give you some baby steps in creating cross-browser friendly CSS tips so your websites look the same in any web browser.

Star-Selector Reset

To start off, we want to begin our CSS document with what is known as the star selector (*). Your code will be this simple:

* {margin: 0px; padding: 0px;}

What that does is tell the web browser to interpret ALL HTML elements (h1, p, UL, LI, etc…) to have NO padding and NO margins. It’s literally a global reset.

Now, in your css when you give an element a particular MARGIN or PADDING, every browser that reads it will adhere to those rules. By default, every browser has its own DEFAULT method of handling the margins and paddings, which throw your layouts off from browser to browser.

Using a second set of divs for padding

Another method I use to deal with margin/padding

Web     , , ,

My HTML and CSS Mistakes

Posted on May 1, 2016 By

Here are some problems I had when writing a board game:

  • I have three ‘div’ HTML elements (say ‘a’, ‘b’, ‘c’) one after the other and all three are styled as ‘float: left’. If ‘b’ is also styled ‘clear: left’, then on my old Konqueror 4.3 browser they appear as:
  • a b c
  • whilst on Internet Explorer (IE), they appear as:
  • a c b
  • I can get IE to look like my browser by putting ‘b’ and ‘c’ in a new ‘div’ which is styled ‘float: left’ and by moving the ‘clear: left’ onto it.
  • When showing the boards of players ‘floated’ together in a message box, any ‘padding’ at the bottom of the message box is ignored. To fix this I need to style the message box itself ‘float: left’. This makes it visually contain the boards.
  • The board of the player on the far right of the line of boards is sometimes shown squashed up horizontally on Internet Explorer. This is because the boards are put next to each with the style setting ‘float: left’, and ‘floated’ HTML elements can be squashed up. I added a ‘min-width’ setting to stop this.
  • I want to colour each letter of a word separately, so

Web     , , ,

CSS Form Styling

Posted on April 15, 2016 By

In many ways, forms are the real workhorses of the Web, but that doesn’t mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web. Standardizing text field sizes between PC and Macintosh was a problem because the different operating systems interpreted character width differently; moreover, the field sizes may vary from browser to browser.

CSS form design gives the designer much more flexibility, both to integrate and isolate the form and form elements. Text fields, for example, can take on a shade of a site’s background color or adopt the same typeface used on the page. Similarly, you can draw attention to the form itself by giving it a contrasting background; this enables you to format lengthy drop-down lists for easy reading.

Encompassing the Form

The form tag is a containing element that, like the div tag, is not rendered by default. Both tags, in fact, can be styled with CSS – you can even position a form on the page via CSS declarations. Browser support varies for some of the more esoteric CSS properties applied to the

Web     , , ,

Helpful Web Design Tips

Posted on April 5, 2016 By

As a sometime web designer (I prefer the term “web monkey” myself), I’d like to pass these helpful tips on to other sometime (and just getting into the game) web designers everywhere.

We get it – you built a website that looks nice on the front-end and that’s all the client should really care about. However – this doesn’t necessarily translate to “Easy to maintain”, especially if you get hit by a bus or your client calls you 6 months later and wants you to add more stuff to their website. This is one case where “vendor lock-in” (as they say in economics) is not likely to work out very well for you – the client probably knows “Some guy who does websites” who can help them out if you’re not available or don’t feel like maintaining the stuff you threw together 6 months ago without charging the client an arm and a leg.

– Please don’t design websites in a WYSIWYG editor. Yes, I’ve actually encountered “web designers” who do this. That may work for Joe User who just wants to build a simple website for Grandma, but every program insists on dumping an insane

Web     , , ,

Laying It All Out

Posted on April 1, 2016 By

First off, never rely on the interface that software like Dreamweaver offers. You need to learn to code HTML yourself. And the good news is, it’s not that difficult. HTML is one of the easiest coding languages to learn by a long shot. In fact, you could probably learn the rudimentary aspects of HTML in an afternoon. But don’t get too high on your horse after you learn to code tables and div tags, because now you’ll need to learn a little CSS.

CSS – also known as Cascading Style Sheets – is what makes the HTML look like something other than a Word document. This is actually a lot more complicated than HTML, but the basics of it are easy to understand and can transform your website into something that people will not only notice, but also be impressed by. The basics of CSS will change the size, type and color of your text, and it will set a background image or color for your page. While the more advanced CSS will actually layout your entire page and keep it looking the way it’s supposed to on everyone’s screen. This is the most important aspect of

Web     ,

Tips For Beginner Web Designers

Posted on March 11, 2016 By

So maybe you have a copy of Photoshop and can find your way around Dreamweaver, but you’re not too concerned with things like server-side scripting, or hand-coding just yet. You just want to design. Here are some essential things to consider before you get started.

1. CSS is VERY important. Not only is it compliant (which yes, probably will be a factor if you decide to design commercially) it’s efficient. If you can learn it first thing, do it. If you’re too intimidated, learn to layout with tables, THEN learn CSS. On second thought, just go with CSS. I find it to be easier then trying to manipulate tables. If you use it, you won’t run into some of the other problems I address later in this article.
2. Internet Explorer is not web compliant. This means you will be faced will a barrage of technical difficulties unique to Internet Explorer. Something that renders beautifully in the Firefox or Safari (two web compliant browsers) will often be glitchy or non-functional in Explorer, and vice versa for websites that were designed solely for Explorer, which now only accounts for a little over half the browsers. Unfortunately, since it

Web     , , ,

Great Navigation Development Tips for Your Website

Posted on March 7, 2016 By

One of the most critical things to get right when you design and develop your website is your navigation. When I say navigation I’m referring to anything that allows the user to move through your website and on occasion navigate away from the site to another useful resource.


Your menus are the first thing you need to concentrate on and can literally make the difference between a user exploring your website or leaving in frustration before they get a chance to see what you offer.

There is a massive range of different ways you can make and implement menus on your site.

The most common varieties include;

1. CSS Menus

2. Javascript Menus

3. Flash Menus

I recommend you use a CSS menu as they are friendly to search engines and allow lots of customizations.

A CSS menu is quite simple really. At the core of these menus is a simple UL list.

Have a look at the example I link to near the bottom of this article to show what a simple UL list is (I can’t include code examples within this article for some reason)

Web     , , ,

A Grip On CSS Color Codes

Posted on March 5, 2016 By

CSS Color Codes are often a mystery to novice HTML/CSS developers. #FF0000 … What might that mean?

CSS Color Codes are actually hexadecimal values of a specific color. If you’ve worked in Photoshop’s color picker, you must have seen these codes.

The alternative to hexadecimal color codes are RGB color codes. RGB stands for Red Green Blue. So if you want to specify a specific color, you’ll set each color value separately, for example R:255 G:0 B:0. Bear in mind that the minimum value is 0, and maximum value is 255, so in this example we have specified red color.

Hexadecimal color values also function this way, so if you want to specify a color, you will combine RGB values converted into hexadecimal numbers like this:

Red: 255 = FF

Green: 0 = 00

Blue: 0 = 00

Result: #FF0000

To make all these Color Codes work for you, you must embedd them into your CSS statement like this:


The alternative way is to specify a RGB value lake this:


and the easiest way to specify color using CSS is this:


Web     , , ,

Use Beginner Web Design Tips to Get Online

Posted on February 20, 2016 By

Beginner web design tips seem to be available at every corner of the Internet. All you have to do is search in Google for a term like beginner web design, software or tutorials, and the search box will render millions of results. Why? Web development is the key to getting a new website online, whether its purpose is to sell a product, service or idea…or to set up a personal presence without trying to sell anything.

If you are a beginner and want to start a small business online or, you just want to put up a personal website, then you might consider learning a little about website designing techniques so you will know how your site works. A little knowledge can go a long way with a website, especially when your income depends on it!

What to Learn

Try to focus only on those web design techniques you plan to use often, and leave the rest to the experts. There is a ton of information available os you will need to narrow your search to find beginner web design tips needed to help you reach your individual goals.

Web Design Language


Web     , , ,

Website Usability and Accessibility Tips

Posted on February 15, 2016 By

Usability and accessibility are two of the most important points that designers need to think about when constructing a new or developing and existing website.

It’s not even a difficult area to get up to date with and implement. By reading about usability and accessibility in articles and design resources you can soon start implementing some simple principles which make your websites easier to use and open to more people.

Creating active efficient navigation (+ breadcrumbs)

Letting the user know where they are within your site and how to get around can have a massive effect on how users navigate and how comfortable they are using your site. By making it easy for users to navigate around your site can have a massive effect upon how long users stay and how many pages they are comfortable viewing.

Creating active navigation, hover states and current states should be done server side using html, css or javascript if needed to reduce load times and the amount of code involved. It is an effective technique as it allows users to not only determine where they are but also shows them where to go, what are links and

Web     , , ,

Make It Faster With Few Effective Web Development Tips

Posted on February 11, 2016 By

Internet users are highly impatient. If a recent study is to be believed, it says that internet users do not stay on a webpage more than 5 seconds if it fails to respond. This is a major concern for you if your website is slow and takes time to open and navigate in-between the pages. You might be losing potential customers just because your website is poor and cannot act fast. Obviously, slow performance of a website is the biggest drawback for business. However, you can fight off this problem with some of the effective web development tips given below:

Avoid over loaded server The speed of a website significantly depends on the server speed and server performs faster if it is less loaded. Hence, try to avoid over loaded server for hosting your website while web development. Also make sure that the server used to host your website has low ping values.

Prefer XHTML over Tables It might seem difficult to implement, but practically it is more feasible. Tables take more time to render in the browser than DIVs. Therefore, use tables only where it is needed. For example, tables are more useful and appear

Web     , , ,

SEO Website Tips

Posted on February 4, 2016 By

Some people will choose to hire an SEO service to optimize their websites, but there are two problems with this method. The first is that usually the SEO website services are very pricey and second, not all of the SEO website services that you can find online actually do a good job  Here are 10 SEO Website tips that you can do yourself even if you are on a limited budget

1.  Plan Your SEO Website from the Beginning.

Most people will create their websites without even thinking about whether or not their site will be found by the search engines. Only after the site has been created does the light bulb go and then maybe a few tweaks will be done in an attempt to make the site SEO friendly. Most people don’t realize that this should be done first, in the planning stage, not last as an after thought.

Selecting your domain name to include your keywords before the site even goes up should be your first thought. It is important for those keywords to be in your URL  Images and file names should also have your keywords added to them. If they

Web     , , ,

Tips for Learning PSD to HTML5 or CSS Conversion

Posted on January 12, 2016 By

Designing and developing a website involves a distinct set of activities. Both, however, are dependent on each other to deliver the finished product. Your design activities involve your aesthetic and creative genius to help you deliver a clean and beautiful website using Photoshop, the popular image editing tool from Adobe. However, your design in order to be developed into a website needs to be converted into an HTML file. Let us take a look into the basics of understanding how to convert a PSD into HTML 5 or CSS for developing a website.

Getting the Prerequisites in place

As a first pre-requisite to start on the conversion process is to have a PSD file in place. A PSD is the default file extension given to all files created in Photoshop. This will be the base for you to start off on the conversion.

In addition to this you will need a basic understanding of HTML5 in order to plan the layout. Get a grasp of basic HTML concepts like tags, attributes and syntax.

Setting up the Repository Structure

Before you begin, make sure you have the repository structure in place. Configure the structure

Web     , , ,

Styling Forms With CSS

Posted on January 6, 2016 By

If you’ve ever created a form such as a contact form, more than likely you’ve tried to customize it or stylize it using CSS in some way, and maybe even tried creating your own cool submit and reset buttons. And why not? We want to stylize everything else, so why not include some cool-looking, custom buttons for our contact form as well?

Well, I don’t know about you, but when I first started customizing my forms I ran into several problems. Initially I was able to create my buttons and background image in PhotoShop, but I had no idea how to get them displayed on the actual form. At least correctly so they looked professional. Well, if you’re having problems of your own, read on, because that’s precisely what we’re going to cover in this article.

I’m going to assume you know how to create labels, input boxes, text areas, and so on, so I’ll focus on initializing the form and then creating & customizing the background image and buttons.

First we need to create the basic structure of the form in our HTML document, which will look something like this:

<form action=”send_email.php” method=”post”

Web     , , ,

Tips to Make Your Website Load Faster

Posted on January 2, 2016 By

It is pretty annoying when you try to open a website that takes ages to load. Not everyone is blessed with good internet speed and in the world where everything runs in the fast lane, slow loading websites are the worst mistake anyone can make. The worst thing that could happen with slow loading sites is losing the potential clients. There are thousands of competitors on the World Wide Web and the visitor will be easily driven to the competitor’s site. To avoid this you can follow few things to make your website load faster.

  1. Images: Large sized images could be blamed for slow loading sites. Images are an essential part of your website. In order to let the images load faster you need to follow these steps:
    • The first thing you need to do is size your image correctly. You cannot decrease the size of an image by just decreasing the height and width. If you have an image of size 40k, decreasing its width and height will still make it the same 40k size. I was making the same mistake on my blog till someone pointed it out to me. When I did this the image’s

Web     , , ,