Google has been doing many severe efforts to make internet mobile friendly. First they awarded a small tag to mobile friendly websites in mobile search engine to let mobile users know that which website is mobile friendly and which is not. But now Google has come up with something new which can be a game changer for Mobile SERPs and that is MobileGeddon.
MobileGeddon is a new algorithm update by Google which will actually penalize those website in mobile SERPs which are not mobile friendly and websites which rank lower in normal SERPs but are mobile friendly will have better ranking in mobile SERPs which is a very big development indeed.
So today we will talk about making a website or a blog mobile friendly. First, I will like to recommend WordPress to all bloggers because nearly every single WordPress theme is responsive which means it will shrink according to the size of the browser, especially in small displaying operators such as SmartPhones.
But for those Webmasters who actually do not own a blog but a Web 2.0 website such as Facebook or Reddit, I have some super simple tips to share which can help them to make their websites responsive and mobile friendly.
This resource will also be useful for Blogspot users.
CSS Instructions
Now here comes the CSS rules which a Webmaster should use in order to make his website responsive. For Example: If you will give a <div> tag width of 1024px then it will have fixed width no matter how big or small the browser is in terms of size.
The div will have fixed size which is 1024 px for all browser whether it’s a Mobile browser or a PC or MAC browser which means that this particular div tag isn’t responsive which is not a good sign for your website’s search engine ranking in mobile SERPs.
So what should we do to make our div tag mobile friendly? The simple answer is to convert 1024px into 100% which actually indicates the browser to give div tag 100% width which means that if there is a 1024 px width browser then div tag’s original size will be 1024 px and if there will be a mobile browser which has less width and height, For example 500×500 px then the width of this div tag will be 500 px.
Now our div tag is responsive, This is just an small example of making your website mobile friendly. If you will implement this small CSS trick to every single HTML element then surely your website will get better ranking in Mobile SERPs which will be surely the next generation of the internet world.
After doing all the adjustments you should check your website compatibility with mobile browsers by using Google Mobile-Friendly Test tool.
Note: WordPress users should not play with CSS rules because nearly all WordPress themes are mobile friendly.
Keep reading if you want more about making a website mobile friendly.
Content Management
Now here comes the content management part which has big importance especially in mobile SERPs. This particular section “Content Management” is divided into 3 sections, including:
- Size of Headings
- Image Size
- Paragraph sizes and useful CSS rules
Size of Headings
This is very important not just for mobile browsers but also for the quality of your content. Long headings does not make sense. You should keep your headings less than 4 words short to help search engine spiders to specify your content niche and criteria.
Having long tailed headings will actually put bad impact on your blog or website’s ranking in mobile SERPs because mobile browsers will not be able to show all the part of your heading in a single screenshot if you are not using
1
| word-break: break-all; |
tag for your headings. You can also specify your website headings’ size by using width: example%; rule.
Image Size
Size of your images should be less than 700×450 px because it will give good experience to both of your users, mobile users and PC/Mac users.
An image with extra large size will actually do enough to irritate your users which will lead them away from your website or blog. Having extra large images on your blog or website is also not a good practice for mobile browsers because a mobile browser will not be able to display 1024×768 px image in a single shot.
Now again you can use width:example%; tag to adjust the size of the images in your blog or website. For example: If you want your image to appear on full screen then using % values will be a good idea for both width and height instead of using 1024px and 768px values to configure your image size.
For Instance, Use width:100%; and height:100%; for your image to be appear on full screen. Now when a PC or Mac user will visit your website or blog then your image will cover all of his screen. Let’s say 1024×768 px for PC and MAC users and 250×250 px for mobile user.
Paragraph sizes and useful CSS rules
Now comes the most important part of a website or a blog and that is “Content”, Look the most part of a website or a blog is covered by the content present in it and the most important part of content is the amount of paragraphs present in it. My blog is a good example of what I am saying. So you should make sure that your content ‘s paragraphs are responsive and will change it’s size effectively whenever the browser size will be changed.
To do it we will use several CSS rules. One of them is familiar to everyone of you and that is the width property. We will give the width to our content in % rather than giving a particular size to the content’s paragraph. For example if you want your content area to cover at-least 500×500 px from 1024×768 px than you can use width:500px; and height:500px; but when a mobile user will visit your blog then your content will float outside of the browser which will decrease your mobile search engine ranking.
So what we will do is that we will give our content width in percentage rather than giving it the size in px. For instance, width:49%; and height:65%;.
Now when a 1024×768 px browser user will visit your blog then your content will cover 500×500 px of the screen and when a mobile user will visit your website then the content area will shrink into 275×275 px if he has 500×500 px screen.
You can make further adjustments according to your need but my objective is to actually promote these CSS commands which can help a webmaster to make his website or blog mobile responsive.
Use Bootstrap – The secret tool
One another way to make your web design responsive is to use Bootstrap. Bootstrap is actually a CSS structure which will make your Blog or website design responsive automatically. All you need to do is to connect Bootstrap styles to your CSS function.
Conclusion
Making your website mobile friendly is very necessary for every single webmaster since the next generation of internet marketing will totally depend on these small but powerful mobile devices.
As far as WordPress users are concerned, they do not need to do any type of optimizations since all the WordPress blogs are already mobile responsive.
Blogger users can use these tips and tricks to turn their blogs structure into mobile responsive one.
No comments:
Post a Comment