[cs_section style=”margin: 0px; padding: 0px; “][cs_row style=”margin: 0px auto; padding: 0px; “][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″][cs_text]You may have noticed that I am using Theme X for my website. Unfortunately, the creators decided to have a more universal design that looks the same on every device instead of a design that really works for every device. So, we have to do the work ourselves but how can we optimise Theme X for mobile devices? If you do not want to read my explanation, you can go to the full code.
[x_custom_headline type=”left” level=”h2″ looks_like=”h3″]How does Theme X look on a mobile device?[/x_custom_headline]
In this case I am using the stack “Renew”. I did not change the theme much, because I like the simplicity and it meets my requirements. I also prefer to have minimal maintenance on my website, so I also want to use as much of the original code as possible rather than overruling the original PHP code. I did create a child theme already, in case I want to make changes in the future without having to lose any settings. For Yourwebhoster.eu I use the stack Integrity.[/cs_text][/cs_column][/cs_row][cs_row style=”margin: 0px auto; padding: 0px; “][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″][x_custom_headline level=”h3″ looks_like=”h4″ accent=”false”]Before optimizing[/x_custom_headline][x_image type=”none” src=”http://danielkoop.me/wp-content/uploads/2016/01/Theme-X-with-background-image-on-mobile-device.png” alt=”Before I optimised Theme X for mobile devices” link=”false” href=”” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””][/cs_column][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/2″][x_custom_headline level=”h3″ looks_like=”h4″ accent=”false”]After optimizing[/x_custom_headline][x_image type=”none” src=”http://danielkoop.me/wp-content/uploads/2016/01/Theme-X-end-result.png” alt=”After I had optimised Theme X for mobile devices” link=”false” href=”” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””][/cs_column][/cs_row][/cs_section][cs_section style=”margin: 0px; padding: 0px; “][cs_row style=”margin: 0px auto; padding: 0px; “][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″][cs_text][x_custom_headline type=”left” level=”h2″ looks_like=”h3″]How to optimise Theme X for mobile devices[/x_custom_headline][x_custom_headline type=”left” level=”h3″ looks_like=”h4″]Correct body width[/x_custom_headline]
The first problem is that Theme X forces to show the background image / color on mobile devices. At a low resolution, the background image / color of the page is not required anymore as it consumes too much space on a tiny device. Instead, I prefer to show more content on the page.
To solve this problem, simply add the following code to Appearance -> Customize -> Custom -> CSS:
This tells every device with the width of 1024px to make the website full-width and will improve your website by a lot. You can also choose to set the max-width to 768px, but in my case it is pointless to show the background. Do note that if you have a background image, it still gets loaded by WordPress. I have chosen to not use a background image instead.
Now the width is correct, we need to adjust the width of the content. This may be a personal opinion, but I would like to use the full width of any device with a width less than 1024px to make sure that the visitor gets the best reading experience. To do so, we add the .x-container.max class to our custom code in the customizer:
I choose to set this to 96% to make sure that the text does not overflow the content. This has to do with the way how Theme X works. Things like breadcrumb and the post content can overflow if you set the width to 100%.
[x_custom_headline type=”left” level=”h3″ looks_like=”h4″]Only load the background image when needed[/x_custom_headline]
Do note that the background image is still loaded via the backstretch plugin. When you have a child page, you can modify the file wp-content/themes/x/framework/functions/global/admin/customizer/output.php. As Theme X is in active development and I prefer to have minimal maintenance on this website, I will not use this. Instead, I am using the boring default color.
[x_custom_headline type=”left” level=”h3″ looks_like=”h4″]Hide the title “The blog”[/x_custom_headline]
In Theme X Renew, you have the option to set the title for the blog page. I do not want this feature and unfortunately the the theme lacks the feature to disable the title. Of course, you can leave the field empty but this causes an unnecessary whitespace and requires extra space on our already small smart phones. Therefore, I have added the following code:
[x_custom_headline type=”left” level=”h3″ looks_like=”h4″]Small header[/x_custom_headline]
An other problem of Theme X, is the large header. When you enable the topbar, it is also shown on the mobile device. Normally I prefer to not remove functionality on mobile devices, however in this case the functionality is more a disadvantage to have than an advantage as the main content requires more scrolling. The topbar only presents the social media icons, which are also available at the bottom of the page. I know that this will get less exposure than the topbar but I may pick this up later. Do note that if you have important content in the topbar, you should not remove it on mobile devices. Even when you have the same content at the bottom of the page, it is less seen than content which is placed at the top.
[/cs_text][/cs_column][/cs_row][/cs_section][cs_section style=”margin: 0px; padding: 0px; “][cs_row style=”margin: 0px auto; padding: 0px; “][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″][cs_text]
[x_custom_headline type=”left” level=”h2″ looks_like=”h3″]Full code[/x_custom_headline]
To optimise Theme X for mobile devices, I ended up with adding the following code to Appearance -> Customize -> Custom -> CSS:
And the following code to the custom javascript code Appearance -> Customize -> Custom -> JS:
I hope that this blog helped you with how to optimise your website. There is still room to optimise Theme X for mobile devices but this also highly depends on your installed plugins and other customisations.[/cs_text][/cs_column][/cs_row][/cs_section][cs_section style=”margin: 0px; padding: 0px; “][cs_row style=”margin: 0px auto; padding: 0px; “][cs_column style=”padding: 0px; ” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″][x_custom_headline level=”h2″ looks_like=”h3″ accent=”false”]To do[/x_custom_headline][cs_text]There are plenty of other modifications to do when you want to optimise Theme X for mobile devices. For instance, I do not like the font-size of the headings and I try to use the h3 class instead. The normal settings for h2 shouts too much.
Also, when I find the time for it, I want to further optimize the website for mobile and tablet usage. Feel free to leave a suggestion about optimising Theme X for mobile devices in the comments :-)[/cs_text][/cs_column][/cs_row][/cs_section]