047 – Mobile WordPress Sites
WP Touch
- WordPress plugin that makes your site automatically mobile
- Works best for blog sites
- Only shows posts
- Cannot view pages
Create a mobile landing page
- First download the template file
- Next create a directory to send mobile users to.
- Go to cPanel and choose sub domains
- Add a new one, common ones are ‘m’ or ‘mobile’
- Next download JS Mobile Redirection from GitHub
https://github.com/sebarmeli/JS-Redirection-Mobile-Site - and put file in ‘js’ folder. If you don’t have a js folder create one (if you downloaded the template file from here, I’ve already included it)
<script type="text/javascript" src="js/redirection_mobile.min.js"></script>
<script type="text/javascript">
SA.redirection_mobile
({param:"isDefault", mobile_prefix : "m", cookie_hours : "1" });
</script>This will set up a redirection for one hour. If the user selects ‘continue to full site’ they will not be redirected in that hour window
Create a completely mobile site with CSS
- This solution is the hardest and I have to be honest, I haven’t completely mastered it yet!
- This takes in effect the browser width and uses the css to position the elements based on the size of the window
- Building this type of site is fun because you don’t necessarily need a mobile device. Just click and resize your browser window and viola what your website change!
- It’s kinda time consuming though
- You have to optimize your graphics for your site. For example, you need a large logo for your main site, then a medium size logo for tablets and a small image for phones
//iPads and Tablets
@media screen and (min-device-width: 500px) and (max-device-width: 1024px){
}
//iPhones and phones
@media screen and (min-width: 150px) and (max-width: 500px){
}
Very good podcast (as usual.) I have been thinking about how to include mobile for my WordPress sites. Your second solution (creating a mobile landing page) is just what I was looking for. Keep up the good work. I will keep listening.
Oct 29, 2011John in Portland, Oregon
John, thanks for listening, I appreciate the feedback. Creating the mobile landing page is fun too! Have some fun with it.
Oct 31, 2011Great podcast with very timely info.
Thanks for posting detailed instructions here in the show notes Justin. Even a marketing guy like me can implement one of these solutions.
Oct 31, 2011Glad you liked it! If you ever have any WordPress questions, feel free to ask, I’d love to share with the community. Also, if you have any wise words you’d like to share about SEO or PPC with the community, I can interview you for an upcoming show.
Oct 31, 2011I recently discovered your podcast and am enjoying catching up on past programs. Thanks for the good work! Two things:
1.) Your comment that WPtouch “Only shows posts” is not accurate. On the plugin’s settings pages, please see the “Pages + Icons” section. WPtouch is the best free mobile plugin I’ve yet discovered. Not perfect, but useful for most sites.
2.) In this show I detected a contradiction in your comments around mobile computing. On one hand, you state that redirecting to a single mobile-enabled about/contact style page is enough, since that’s mostly what people on mobile devices are looking for. On the other hand, you state that mobile computing is exploding and it’s essential to mobile-enable one’s WordPress site. The latter seems more accurate to me, given the millions of smartphone and tablet devices being purchased.
In my view, “responsive layout” design strategies will become the standard eventual, with themes like…
http://www.woothemes.com/2011/09/buro/
http://www.billerickson.net/driskill-theme/
…leading the way. (I have no relationship with either company.)
Nov 13, 20111.) It is possible to customize WPTouch, but I didn’t think it was that intuitive, which will make it difficult for some people.
2.) Since there are tons of people who have smart phones now, your website should handle mobile traffic somehow. In my opinion, it doesn’t matter if you have a mobile landing page or if you have an entire site optimized for mobile, just make it easy for people to find your contact information from their phones 🙂
I appreciate the comments.
Nov 22, 2011dustin
I feel that it is better to use several tools to get the mobile experience you want:
1. I use mobile smart plugin to allow me to choose a theme for the mobile. It also ads a nice link at the bottom of the page so you can switch between mobile and regular view on the pc.
2. I searched for themes with the word
Nov 16, 2011Good to know! I didn’t realize that there were that many mobile themes available from WordPress. I’ll definitely take a look at them!
Nov 22, 2011