Responsive Website Design – Making WP-PageNavi A Little More Responsive

Depending on how your website is built, chances are good that you have some sort of pagination; a way to scroll through your content page by page.  If you are using a plugin, like I am (WP-PageNavi), it might take a little help to be more responsive.

Recently, I was adding a widget in the sidebar of the site (if you are looking for more information on QR codes, check it out).  Since my theme (the Standard Theme by 8Bit) is responsive, I wanted to check to see what the widget looked like on my smart phone.  The widget looked fine but my pagination need a bit of help.  Here’s what it looked like on my laptop:

And here is what it looked like on my iPhone:

As you can see, the pagination on the iPhone is wrapping to the next line and my widget is all over the top.  So, first things first; let’s reduce the size of the pagination controls.

Adjusting the WP-PageNavi settings

Looking at the settings of WP-PageNavi, you can select how many pages to display and how many larger page numbers to display.  Initially, the plugin was set to display 5 pages and 3 larger page numbers.  With those settings, the navigation takes up pretty much the whole width of the content area.  Changing the settings to display 3 pages and 2 larger page numbers yields this on my laptop:

and this on an iPhone:

Good on a desktop, laptop, or tablet but no so good on an iPhone.  Luckily, having simplified navigation is a good thing for mobile devices.  WP-PageNavi does a great job adding CSS classes to each element so it’s pretty easy to change the look of things.  First off, I wanted to get rid of the dots (…).  That can easily be accomplished in the settings by clearing the field Text For Previous …

Slimming down the navigation for small screens

Step 2 was slimming down the navigation only for small screens (in my case, it is screens less than 600px wide).  Taking a look at the code, easy when you are using Chrome and choose Inspect element, you can see the elements that can be hidden.

Adding a bit of CSS to the theme file in the right spot results in a few elements being hidden when viewed on small screens:

.wp-pagenavi a.page, span.extend, a.last {
 display: none;
 }

And here is the result (this is only a screen shot of the iPhone since the changes only affected small screens):

For small devices, the only options available are to go forward or back one page.  The only additional items that is displayed are the current page and the total pages.  Much simpler navigation and layout, especially since it now looks and fits better.  All that from a few lines of code.

Apply this technique in other situations

Hiding items on pages can be helpful in a variety of situations.  In a past project, AutoMinder, I was able to display different fields when printing and when being viewed on a laptop.  That way, I could have the same page look completely different when printed with very little additional coding (and no new pages).

Well, that’s it.  Just a few lines of code and a little bit of experimentation resulted in a better site for visitors.  When was the last time you checked your site on a smart phone?  Is there something you can do to make your mobile visitors have a better experience?  Let me know in the comments below.