Trick – Change existing website into Mobile Friendly in an hour or two!

I wanted to write this post in detail along with my own written examples but unfortunately I’m like other thousands of UI/UX developers (around the globe) who are busy converting their (client’s) websites to make it work for mobile devices.

For everyone who wants to change their website to make it mobile friendly for Google.

The trick is don’t get into the details of mobile friendliness of your website, if you really want to save SEO of your existing website. I mean don’t get into the details for example adjusting logo, arranging columns, making it look perfect on mobile and iPad screens etc. Just add some media queries and resize your webpage to fit in the mobile screen most probably by changing containers width from fixed to “auto” and clearing floats for the columns if you want to stack them on mobile screens + give some padding on main container. Also please don’t forget to add “meta viewport” tag in head of your html document:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

These are the core things which Google crawler is considering to determine whether website is mobile friendly or not. Google crawler doesn’t care that how your website looks in terms of design.

Don’t focus on design if you want to save your website’s SEO!! This trick should be done in an hour or two at max.

Once you save your website’s (SEO) rank after that you can spend days and nights to upgrade its design as well.

P.S. This post is for experienced developers, I hope this trick will help many people!

CSS Even & Odd Rules

CSS has lots of options to make our life easy, today I noticed there is one more awesome selector which we can use to target “even” or “odd” rows of our tables or listing being created using “li” tags. I just tested it in latest versions of IE, Chrome & FF and it seems working perfect in all of them.

Here is code reference:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Source: http://www.w3.org/Style/Examples/007/evenodd.en.html

Enjoy! Let me know if you need further help.

Box Shadow Using CSS3

Box Outer Shadow

As we all know that CSS3 is rolling out in the web and mobile industry, using of CSS3 is increasing day by day which can save lot of our extra time in slicing and embedding pictures into our web pages. Because of CSS3 web pages are becoming faster in loading, mobile friendly (responsive) and more user friendly.

Today I am going to give you intro about Box Shadow one of the coolest feature of CSS3. Box Shadow property can implement multiple drop shadows including “outer shadow” & “inner shadow”. Look at following syntax:

box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5);

Continue reading

Simple CSS Drop Down Menu

For start up, I’ve decided to provide simple css based drop down menu which is very common and very difficult on the same time because lot of people uses too many unnecessary styles.

Here is CSS code:

/* styles for main level (1st level) */
.cssMenu { background-color:#fbde8e; padding:0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; *height:25px; /* for ie7 declaring height of the ul to show background */ }
.cssMenu > li { margin-right:20px; padding:5px; display:inline-block; } /* inline-block will bring all li tags in single line */
.cssMenu li { *float:left; } /*for ie7 because it doesn’t support inline-block*/
.cssMenu li a { text-decoration:none; display:inline-block; }

/* styles for 2nd level */
.cssMenu li:hover { position:relative; background-color:#dabe6f; }
.cssMenu ul.level2 { display:none; }
.cssMenu li:hover ul.level2 { display:block; position:absolute; top:24px; left:0; background-color:#dabe6f; width:200px; }
.cssMenu li:hover ul.level2 li { *float:none; } /* ie7 reseting float to none for 2nd level li tag */
.cssMenu li:hover ul.level2 li a { display:block; padding:3px; color:#fff; }
.cssMenu li:hover ul.level2 li a:hover { background-color:#b80f18; }

Here is XHTML code:

<ul class=”cssMenu”>
<li><a href=”#”>menu item 1</a>
<ul class=”level2″>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
</ul>
</li>
<li><a href=”#”>menu item 1</a></li>
<li><a href=”#”>menu item 1</a></li>
</ul>

Code snippet is self explanatory however if someone will have any question or confusion you can post it here, as soon as possible I will try my best to get back along with solution.