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!

Advertisements

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