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!

New Feature in Gmail Compose – an idea!

Trace Compose

I’ve been thinking since few days that if google will implement this feature in their gmail compose that would be great and helpful to thousands of people or maybe millions of people. The feature I’m offering is Trace Email or they can choose another name, anyway.

Feature description:

The idea behind this feature is if multiple people are added in one threaded email and they are adding their comments under few basic comments or requirements for an example they are discussing software requirements and host (who created that conversation) listed few points and now rest of the people has to share their ideas, comments under those features…. What we do right now if we face that situation? Of course we give different colors but if Google will add this feature which I’m calling it Trace Compose Email that will be recording every single user’s comments along with date and time. By the way MS Word has that kinda feature already implemented. đŸ˜‰

I hope someone from google will reach on this post someday and if they like it and implement this feature that would be wonderful.

Cheers!

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