20 css frameworks

20 css frameworks

20 css frameworks to choose from

Grid base layout approach

I found this article really useful

Cross Browser css hacks that every designer and developer should know

In this post I am going to write about a big problem that every developer or designer face. Cross browser compatibility problem. The css hacks I am going to show are not always validated by w3c but in certain situations they are lifesavers. The browsers I am going to cover are IE, firefox, chrome, safari and opera.

First I am starting with notorious IE . Most of the time designer or a developer finds that all the browsers are showing the design perfectly, except IE. Even Different versions of IE are showing different types of design bugs. The easiest way is to make different css for different IE and call them seperately in page. The example are

<!–[if IE 8]> <link rel="stylesheet" type="text/css” href=”css/ie8.css”><![endif]–> <!–[endif]–><!–[if IE 8]> <link rel=”stylesheet” type=”text/css”  href=”css/ie8.css”><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” type=”text/css”  href=”ie7.css”><![endif]–>
<!–[if IE 6]><link rel=”stylesheet” type=”text/css”  href=”ie6.css”><![endif]–>

Firstly our normal css will load then these conditional css will load and will overwrite the default css classe, which are common in those conditional css files.

Now if we have a single css and we want to apply css hacks in that file only.


.myhack{width:100px; _width:110px;}





Chrome and Safary

@media screen and (-webkit-min-device-pixel-ratio:0) {

.myhack { background-color: #FF0000; }
#myId {color: #0000FF;}
@-moz-document url-prefix() {
.myhack{width:100px; }

I am preparing my next post

Sorry for the long delay. I was busy with my exam. I have started working my next post. Will be published very soon.

Example of 5 beautiful websites whose design inspiration is taken from 5 elements of nature

In this article I am going to show 5 beautifully designed websites. Each one will remind you a different element of nature.




4. Space

5. Grass

Plan your SEO strategy even before designing the website

Most of the time after finishing developing a client’s website our marketing experts approach our client about the SEO strategies.  They convince the client that for getting good business from the site SEO strategy is must, which is true. So the SEO expert comes in the stage and most of the time found that the site is not at all SEO friendly and the blame game starts. The SEO expert blames the developer, developer blames the designer, the designer blames the project spec. It goes on and on on.

But this situation can be easily avoided. We can plan the simple seo strategies even before writing code or designing a single button.

1. Clear Navigation

Keep your site navigation hierarchy as flat and clear as possible. The more sub categories/folders you have (or the deeper your hierarchy is), the harder it will be for search engines to index all your pages. A flat hierarchy also helps search engines view more of your pages as “important”, thus giving them more weight in the search rankings. The navigation design is important as well; Using images for your text can often ruin the ability for a search engine to properly crawl your site.

2. Design Your Titles & Subtitles

One of the most important elements of on-page optimization is having titles and subtitles with target keywords phrases. The most commonly used tags by SEO strategists are H1′s, H2′s and the tags. When creating and SEO friendly website layout, make sure you have spots for these tags on each and every page… and style them properly.

3.Create Custom Landing Pages

When you design your landing page layout, make sure every page has room for at least a few paragraphs of description text. Otherwise, text might be added later and it may end up looking forced and out of place. If you design the layout with content in mind, the content will blend nicely and will actually be useful for the readers as well as the search engines.

4.Working with Images

Images can be a great source of search traffic and they also provide search strategists with better on-site optimization. Every page should have a spot for an image, which should be worked into the content mentioned above. These images should have optimized file names, alt tags and titles that include the target keyword phrase.

5.Deep Linking

Internal linking, also known as “deep linking”, is another common practice by search strategists. This isn’t a very dramatic visual element, but the site could end up having more links on pages than you expected. For instance, if the site is going to have several category levels, SEO strategists suggest that you include links to all of the sub-categories on each main category page. The sidebar is usually a good place to drop this kind of “link list”, but it’s also common to add links in the footer on important SEO landing pages.

6. Site Map

Every website should have an HTML and XML sitemap (also known as an “archive” page). These sitemaps help search engines crawl/index your site and help users to find content. In addition to a basic XML document, it is especially important to have a well designed HTML sitemap for large websites.

7. Incorporate Social Media

Social media is another very popular marketing method that actually has an impact on SEO. Search engines are starting to use social media popularity as a signal for how relevant and important content is on the web. By integrating social media “share” buttons into your design, you can help increase the relevance of content to search engines. It’s also common to have icons somewhere linking to the main profiles of Twitter, Facebook and other social profiles on a website. The more “social” traffic that a site can generate, the higher that site will show up in search rankings.

I hope these are some simple tips to follow for making a great site design-wise,  functionality-wise yet SEO friendly.