Exciting Ways to Transform Your WordPress Website into a Responsive One Google has recently announced a new update for search engine algorithm Mobilegeddon. This implies that mobile-friendliness will be considered as one of the important factors while ranking a website. You might be thinking that you have already been ahead of this update as you think that your website is mobile friendly. Certain pages of your website might also have passed the mobile-friendly test. However, at the back of your mind you still have concerns regarding your website ranking being affected due to this update. The best way to remain ready for this update is to understand it. In the month of February 2015, Google announced the introduction of an algorithm to ensure mobile-friendliness of a website. The results would impact a website's search results ranking on a mobile device. This change has been introduced by Google to ensure best user experience on mobile devices.
All you need to do is to ensure that your site is mobile friendly. If you don't do that then gradually your mobile rankings will drop. It might take a couple of weeks for you to notice these changes in rankings. Here's what you need to do next. Making your WordPress website mobile-ready To help website owners, Google offers a guide for making their WordPress website mobile ready. With this guide, you can learn about updating your software and using a responsive theme. If you don't want to go for it, then you can choose to go for a different website for mobile platform.
If you wish tour make existing theme responsive then following is what the guide says. >>This requires advanced HTML and CSS knowledge. Following are some of the resources. WordPress Codex- Theme Development Google resources for mobile sites Web Fundamentals However, browsing all these three topics, related to custom wordpress development, would be time consuming for you. In this blog post, I have presented this information in simple steps. The only thing I would like to state before I proceed is you must have in depth knowledge about CSS to execute the changes.
1. Setting the Viewport Information At the outset you will have to set the viewport information. Viewport is nothing but the area where the page is displayed without the scrollbar and browser navigation bar. The viewport information gives an idea about the area where content can be displayed for visitors. Most of the browsers make use of desktop version for optimal display of webpage. They just scale the page so that it can be displayed appropriately on the mobile device. Whilst setting viewport information you can prevent the browser from scaling the content and content will be displayed after being adjusted as per the screen size.
2. Making the Media and Text responsive During WordPress development, in your style sheet all measurements must be set in relative units. This implies that you need to scan through style.css of your theme, and modify dimensions, including width or height, from px to %, especially for large images. You must also set fonts from 'px' to 'rem' 3. Create a Fluid Layout by Adding Media queries In the next stage, you need to create a fluid layout. A fluid layout can get adjusted as per the display of elements so that users can get the best viewing experience. For instance, in WordPress development your web page is divided into three columns, which can be displayed side-by-side on a desktop. However, when it comes to smart phone it will be displayed one below the other. Now, so that the columns display as per the display screen, you need to back them up with CSS. There are a number of ways in which you can create fluid layout. ďƒ˜ You can use media query which involves a media type (print or screen) and a conditional expression with media features such as width, height or color. If it is evaluated to true, CSS properties, within the query, get applied. ďƒ˜ You may also use a front-end framework, like Bootstrap, which can help you expedite the process. You can choose to use the classes offered by Bootstrap and later add them to style.css of your theme. Then, you can assign them to elements in your theme's templates. One of the most important benefits you can gain by using Bootstrap is it offers gradually changing layout, as opposed to other frameworks which offer less flexibility.
4. Navigation Menu Must be Responsive Making navigation menu responsive is a tough task. However, you can go for a plugin like Responsive Select Menu. Another alternative is to replace the walker class with Bootstrap walker class. 5. Hide Select Elements on Mobile Devices A number of times you may not need the entire information to be shown on a mobile device. For instance, if you view that this same webpage, which you are viewing on mobile phone, you can observe that the sidebar is missing. Instead of a sidebar, there's a button at the end of the page. Here again media queries come to your rescue. You can also make use of Bootstrap classes but you need to accept them with their breakpoints. All in all, to make your mobile website responsive you need to set viewport information, make media and text responsive, include media queries for a fluid layout, transform the navigation menu into a responsive one, and hide elements on a mobile device with the use of media queries. With all these things in place, your WordPress development process will be successful and your website will surely win the mobile friendly test.