Tag Archives: Responsive Design

chompdigital

Jetpacks MiniLeven – Use It, Customize It & Be Transparent



Reaching your customers and visitors on mobile is a must these days and I’m going to show you how you can easily take advantage on your WordPress site using the Jetpack Mobile Theme called “MiniLeven”. In this overview, I will be going over some simple how-to’s, how to customize the MiniLeven theme and go over why it’s important to be transparent between desktop and mobile devices. Now let’s get mobile.

How-To Activate & Install Jetpack MiniLeven Mobile Theme

Activating the MiniLeven theme is quite easy, all you have to do is install Jetpack, enable it, and then click activate on the mobile theme option as seen below. Don’t worry too much if your visitors happen to see the default design when active because I’m going to show you how to fix that in a matter of minutes. After you have activated the mobile theme pack you’ll want to check things over from your mobile device and make sure that everything is being displayed properly. When I say properly, I mean check to see that the correct menu items are showing, posts, pages etc. If you have a custom theme installed Jetpack mobile might not work to your advantage, a simple click on deactivate will fix that and put your site right back to normal.

MiniLeven Jetpack Theme

After you have done all of the above and everything looks kosher, let’s start digging into improving the current setup and go over the basic items that are integrated out of the box.

How To Improve The Jetpack MiniLeven Theme

Improving this theme is quite simple and there’s only few items that you may want to consider adding to it. Out of the box, MiniLeven offers a clean crisp look and has all the standard features that we’re all accustomed to using that WordPress has to offer. Remember if you’re using a custom theme MiniLeven will not support items like custom sidebars, custom post template etc. Knowing that this theme might not give you everything you want, it does make your site more user friendly and will help improve the transparency and quality of your site.

One of the first things you will notice that needs improvement is the use of custom menus. This theme currently does not support custom menus but there are ways to fix this and one of them is by using the “Exclude Pages” plugin. The Exclude Pages plugin will allow you to remove any pages from the default page list that WordPress uses to create menu items based on the order of your pages. If you’re currently using custom menus for your desktop version this plugin will not effect it and will not remove any menu items that you have already created. Now I know I just mentioned installing a plugin and if you read my last post about Speeding Up WordPress For Better SEO then you already know that I do not recommend installing a lot of plugins. After you have tackled this small improvement you should look things over once again from your mobile device(iPhone, iPad, Android etc.) just to make sure that your menu items are exactly the way you want them and that you’ve got a good handle on how to setup your menu for mobile.

As you can tell, I only went over one thing on how to improve this theme and do you know why? The answer is “Simplicity”. You do not need to get carried away and stuff every addon or feature known to man on the mobile version of a website. Think about your readers. Do you think your mobile readers/visitors want to see a lot of unnecessary content or ads, most likely not. With a smaller screen, it’s wise to take in consideration of what’s really needed on mobile and what’s not. Save your custom goodies for the desktop and serve your pop up ads and social widgets there. To me, mobile sites are even more for the reader than desktop and they should be easy to read and easy to follow. Another thing to consider is speed and factoring in mobile SEO.

Customizing The MiniLeven Theme & Mobile SEO

Customizing the MiniLeven is just as easy as modifying a basic WordPress template. You do not need to be pro in order to make changes, you just need to know the basics in CSS and HTML for most of it. If you want to add custom features like a different comment tool or social integration, this will require some knowledge of the WP codex and minor php.  Now let’s start diving in and customizing your MiniLeven theme to match your desktop site.

Changing The Colors To Match Your Branded Site

  1.  Download and open the following file located here: /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css

The first thing you’ll want to do is change the navigation, highlights, border colors etc. to match your current desktop theme. All color changes will be done using CSS only in the style.css file.

minileven-screenshot

Below are some of the basic and common styles that you’ll want to change first to help get you started with styling your mobile theme. All you have to do here is change the color hex to match your desktop theme.

.page-title{color: #666}
.menu-search{background: #222}
.search-form #s{background: #222; border: 1px solid #00587f }
#access ul.nav-menu{background: #fff}
.main-small-navigation .menu{background: #f9f9f9; border: 1px solid #e9e9e9}
#access ul li{border-bottom: 1px solid rgba( 0, 0, 0, 0.1 )}



Pretty simple right? If you’re happy with the way things look after making these changes you’re ready to move on to the custom stuff. Before I dive in and teach you how to implement custom features and addons, backup the entire MiniLeven theme that you have just made changes too and save a copy to your desktop. Always play it safe and keep a copy of your work just in-case you need to revert back to your most recent major changes.