IntroductionWelcome| 00:04 | Hi, I am Morten Rand-Hendriksen, and I
am here to show you some mobile plug-ins
| | 00:08 | for your WordPress site.
Welcome to WordPress Mobile Solutions.
| | 00:13 | In this course, we will take a close
look at some different plug-ins you can use
| | 00:17 | to quickly make your WordPress
powered site mobile friendly.
| | 00:20 | First, we'll take a look at the
WordPress Mobile Pack plug-in that allows you to
| | 00:24 | switch themes depending on whether the
visitor is using a mobile device or a
| | 00:28 | regular computer, and that provides
you with some basic mobile themes.
| | 00:32 | Then we will look at the WP Mobile
Detector plug-in, which provides similar
| | 00:37 | functionality to the WordPress
Mobile Pack, but in a different package and
| | 00:41 | with different results.
| | 00:43 | And finally, we'll look at the free
version of the popular WPtouch plug-in, which
| | 00:48 | gives you a modern looking
customizable mobile theme.
| | 00:51 | If you have a web site these
days it needs to be mobile friendly.
| | 00:55 | I am here to help you make that happen.
| | 00:57 | So let's get cracking with
WordPress Mobile Solutions.
| | Collapse this transcript |
|
|
1. Why Mobile MattersExperiencing the (not so) mobile web| 00:00 | If I ask you how you access the web
these days, I bet your answer will be
| | 00:05 | something like, with my phone, or with my
tablet, long before it is on my Desktop computer.
| | 00:11 | With introduction of Smartphones and
tablets, the way people visit and interact
| | 00:16 | with the web has changed completely.
| | 00:18 | In the past, the web was focused mainly on
desktop computers with ever larger screens.
| | 00:23 | Now the web needs to focus on the exact
opposite, mobile computers and smaller screens.
| | 00:29 | Using WordPress to create your web site,
you have several options when it comes
| | 00:33 | to dealing with this new mobile hurdle,
but before we look at these options,
| | 00:37 | let's take a look at to often not so mobile web.
| | 00:40 | What you see here is that web site I
built a couple of years ago, for the 12 x 12
| | 00:45 | Vancouver Photo Marathon.
| | 00:46 | It's a great web site as long as you are
on a desktop, it has nice big buttons
| | 00:50 | on it, it has nice dropdown menus, and
it's very easy to navigate and get to
| | 00:55 | where you want to go.
| | 00:56 | However, if you open this on your cell
phone, what you get is the exact same web
| | 01:02 | site scaled down to fit the phone.
| | 01:04 | That may sound okay, but it results
in constant pinching and zooming to see
| | 01:09 | what you want to do, and you keep
poking at these menu buttons to try to get
| | 01:13 | them to take you where you want to go, and
generally it's an extremely frustrating experience.
| | 01:18 | That's not because there is anything
wrong with the web site, it's because the
| | 01:21 | web site was built before we started
considering what happens when people visit
| | 01:26 | web sites with their mobile devices.
| | 01:29 | To see one option for how you can
solve this problem, go no further than my
| | 01:34 | blog, Design Is Philosophy.
| | 01:36 | What I did on this blog, was
I created a Responsive Theme.
| | 01:39 | A Responsive Theme is a theme and a
layout that responds to the size of the
| | 01:45 | screen that's accessing it.
| | 01:47 | As you can see, here in my Desktop,
as I resize this window, the content
| | 01:52 | rearranges and changes to fit the screen,
and you see even the menu changes from
| | 01:59 | this regular menu up here to menu
that snaps on the bottom of the list.
| | 02:04 | And if I go to a single post, you
will see that as I change the size the
| | 02:09 | window, the layout of the post
changes moving the title around, and you get
| | 02:17 | more space for the content.
| | 02:20 | If you visit this web site on your
cell phone, you get the exact same
| | 02:23 | experience, only the entire web site is
really squished in to fit with the phone.
| | 02:28 | But even though it's squished in, you
still get a good experience, and it's easy
| | 02:32 | to access the content and everything works.
This is what Responsive Design is all about.
| | 02:38 | For third example, go
check out readwriteweb.com.
| | 02:44 | Now readwriteweb.com is not a WordPress
site, but it serves as a great example
| | 02:49 | of what you can do instead of
creating a responsive theme.
| | 02:53 | What readwriteweb has done is they
have created a mobile version of their web
| | 02:58 | site, that looks different and focuses
specifically on mobile users, that means
| | 03:03 | you are landing on a different type
of web site when you use your mobile
| | 03:07 | devices, and you can do the same
thing in WordPress by using a plug-in.
| | 03:11 | In this course, we are going to be
looking at how you can use plug-ins to create
| | 03:15 | mobile specific web sites.
| | 03:17 | All these plug-ins have the same goal,
that is to create a web site that's easy
| | 03:21 | to navigate and ingest for mobile users,
and they go about it in different ways
| | 03:26 | producing different results.
| | 03:28 | The commonality between all these plug-ins
is that they create consistent user
| | 03:32 | experiences across multiple different web sites.
| | 03:35 | So you will recognize the same type of layout
for different web sites using the same plug-in.
| | 03:42 | If you're looking for information
on how to build responsive themes for
| | 03:45 | WordPress, you should go check
out the other course
| | 03:49 | WordPress: Building Responsive Themes, right here
on the lynda.com online training library.
| | 03:54 | This course will teach you how to
build exactly what you see here.
| | 03:58 | This is the Anaximander Theme, and it
was built specifically for that course
| | 04:03 | and for lynda viewers.
| | 04:04 | So if you follow that course from
beginning to end you'll end up with exactly
| | 04:08 | the site you're seeing right now.
| | 04:10 | The whole point of having a web site
is for people to be able to access the
| | 04:14 | information on that web site.
| | 04:16 | That means as the technology landscape
changes so the web site itself has to
| | 04:20 | change to accommodate the new reality.
| | 04:23 | By making your site accessible with
mobile devices, you keep yourself and your
| | 04:27 | information accessible as
the Internet landscape changes.
| | Collapse this transcript |
|
|
2. Using the WordPress Mobile PackInstalling and activating the WordPress Mobile Pack plug-in| 00:01 | WordPress Mobile Pack is a
powerful mobile plug-in for WordPress.
| | 00:05 | That gives you several different
ways of serving up mobile solutions from
| | 00:09 | your WordPress site.
| | 00:10 | This plug-in has been around for a
long time and the reason why it stays so
| | 00:14 | popular is because it has so
many different ways of doing things.
| | 00:17 | So when you install the WordPress
Mobile Pack just like the name suggests,
| | 00:22 | you're not just installing one
function, you're installing several.
| | 00:25 | So let's take a look at it.
| | 00:26 | I'll go to my site and go the
Dashboard and go to Plug-ins and Add New.
| | 00:34 | From here I'll search for WordPress Mobile
Pack and here we get some different options.
| | 00:44 | Now you'll notice that there are two
main options here you have, WordPress
| | 00:47 | Mobile Pack, and then you have
WordPress Mobile Pack + HUNT.
| | 00:50 | What you want is the straight up
WordPress Mobile Pack, so I'll click and
| | 00:54 | install that, so I'll click
Install Now and Activate the Plug-in.
| | 01:01 | And once this plug-in is activated
you'll notice here we have several different
| | 01:05 | options, we have the Mobile Switcher, we have
Themes, Widgets, Analytics, and something called mpexo.
| | 01:12 | We'll look at all that later, but for
now let's take a look at what this looks
| | 01:15 | like right out of the box on a phone.
| | 01:17 | When loaded on the phone you see that
the WordPress Mobile Pack default theme is
| | 01:22 | a stripped-down theme that gives you
only text and very limited styling.
| | 01:27 | That means it loads quickly, and it
functions really well on the phone.
| | 01:31 | If we go to the Blog section on the site,
you get a list of the different blog
| | 01:35 | items along with links to the
categories, and also the comments, and if we go
| | 01:40 | into a single post here, let's scroll to
the bottom, you'll see you have accordion
| | 01:45 | functionality for Comments, and for
Leaving a comment for yourself, which makes
| | 01:51 | this a very user-friendly theme for cell phones.
| | Collapse this transcript |
| Configuring the Mobile Theme Switcher| 00:00 | WordPress Mobile Pack gives you several
options when it comes to handling mobile visitors.
| | 00:05 | At the core of the plug-in, is the
Mobile Theme Switcher, which just like the
| | 00:09 | name suggests, allows you to switch the theme
when the site is accessed from a mobile device.
| | 00:14 | This means you're not bound by
the themes that come with a plug-in,
| | 00:18 | you can also create your own custom
themes that show up only on mobile devices.
| | 00:23 | The Mobile Theme Switcher
has several different options.
| | 00:26 | To get to it we have to go to the
Dashboard, and if we go to Appearance you'll
| | 00:31 | see that WordPress Mobile
Pack has added three new options:
| | 00:34 | Mobile Theme, Mobile Widgets and Mobile
Switcher, we want to go to Mobile Switcher.
| | 00:41 | From the Mobile Switcher
Configuration page we can set up how the plug-in
| | 00:46 | identifies mobile devices and what
theme we serve up to those mobile devices.
| | 00:52 | From the top we have the Switcher
mode where the identification happens.
| | 00:55 | We can disable the function so
that we don't detect mobile devices.
| | 00:59 | I don't know why you would
want to do that, but you can.
| | 01:02 | You also have Browser detection,
which is the standard mode.
| | 01:05 | This is the default and
the one I recommend you do.
| | 01:07 | It identifies the browser as a mobile
browser, or a desktop browser, and then
| | 01:12 | serves up themes depending on that.
You can also use Domain mapping.
| | 01:16 | This requires that you have access to
your DNS settings, and that your DNS host
| | 01:21 | allows you to do Wildcard Mapping,
but it allows you to sets a different
| | 01:26 | domain, for instance m.something,
| | 01:28 | for the mobile site, which
can be useful in some cases, or you can do
| | 01:34 | both Browser Detection and Domain Mapping.
| | 01:36 | For almost all cases Browser Detection is the
best option, so you should leave it at that.
| | 01:41 | Directly below we can select
what Mobile theme we want to use.
| | 01:45 | WordPress Mobile Pack ships
with four custom mobile themes.
| | 01:49 | They all look pretty much
the same except for the color.
| | 01:51 | The base is kind of brownish then you
have a blue, a green, and a red option.
| | 01:57 | But in addition, you get a list of all
the themes you have installed on your site,
| | 02:01 | and you can use any of
these themes as a mobile theme.
| | 02:04 | And this is really cool if you
have a custom theme for your site that
| | 02:07 | controls how it looks, and you also
want to serve up a custom experience for
| | 02:11 | people who access the site with mobile
devices because you can then create a
| | 02:15 | custom version of your theme just for
mobile devices so that whenever someone
| | 02:20 | visits your site on a mobile device,
they will get your theme customized for
| | 02:25 | a mobile experience.
| | 02:27 | If you don't have your own custom
mobile theme, but you're still going to serve
| | 02:31 | up something other, than the cookie-cutter
themes that come with the WordPress
| | 02:35 | Mobile Pack, you can choose to use a
Responsive theme like Twenty Eleven or
| | 02:40 | another responsive theme
just for the mobile devices.
| | 02:43 | The next three options relate to the
Switcher mode, so if you set the Switcher
| | 02:48 | mode to Domain mapping, you can now
change the Desktop domain and the Mobile
| | 02:53 | domains so that the different
users land on the correct sites.
| | 02:57 | Like I said before, this is an advanced
option, and it's really not necessary if
| | 03:01 | you use the Browser detection option,
but if you do, and you know what you're
| | 03:05 | doing you can experiment
with these settings as well.
| | 03:07 | Finally, at the bottom you have Footer links.
| | 03:10 | This allows you to place a small link
in the footer of the mobile site that
| | 03:14 | gives the visitor the ability
to jump back to the desktop site.
| | 03:18 | This is really useful because a lot of
people when they land on these mobile
| | 03:22 | sites don't like what they see or they
maybe looking for something specific like
| | 03:26 | an image or gallery or something
that's being excluded by the mobile theme.
| | 03:30 | By giving them this link they can
choose to go back to the desktop experience
| | 03:35 | even if it's a sub-optimal experience,
meaning you're handing the control over
| | 03:40 | the experience over to your user,
and that's always a good idea.
| | 03:44 | If you make any changes to the Mobile
Switcher settings, always remember to
| | 03:47 | click Save Changes before you leave the page.
| | Collapse this transcript |
| Configuring mobile themes| 00:01 | If you choose to use one of the
default mobile themes that's shipped with
| | 00:05 | WordPress Mobile Pack, you can
further customize its behavior in the
| | 00:09 | Mobile Theme section.
| | 00:10 | The Mobile Theme section is found
under Appearance and Mobile Theme and from
| | 00:15 | here you have several new options that
you can turn on or off, or customize, to
| | 00:21 | make your mobile site
work the way you want it to.
| | 00:24 | Off the top, you can Enable,
or Disable, Nokia Templates.
| | 00:28 | This is for people who use old Nokia
type phones that have a different type of
| | 00:32 | browser in them, so this plug-in ships with
custom experiences for those mobile users.
| | 00:38 | You can also check the mobile
status of your site using a ready.mobi.
| | 00:43 | It's an online service that goes into
your site and checks how it will work
| | 00:47 | on different devices.
| | 00:49 | This might be a good idea if you are
using a custom theme, and you're not sure
| | 00:52 | how it's going to perform on different devices.
| | 00:55 | All you do is you activate that theme,
and then you click on Launch ready.mobi,
| | 00:59 | and you will be taken directly to that site.
| | 01:01 | Below that, you can choose whether you
want to Show the Home link in your main menu.
| | 01:06 | This is a common request for menus in
general, people may or may not want to
| | 01:11 | have that Home link show up, because
in some cases if you're using a custom
| | 01:15 | menu, you already have a Home link in the
Custom menus, you don't want two of them.
| | 01:20 | This is where you would turn that on or off.
Next you can choose the Number of posts.
| | 01:25 | So this will override the general number
of posts section in WordPress and allow
| | 01:30 | you to restrict the number of posts to
show in an archive page, like the Index
| | 01:35 | page or Category page or a Tag
page on just the mobile devices.
| | 01:41 | Below that, you can choose what type of
information you want to show for each post.
| | 01:45 | You can show Title only, Title and
teaser for just the first post and then just
| | 01:51 | the Title for the rest, or
Title and teaser for all posts.
| | 01:55 | You can also choose whether you want to
show meta tags, including author, tags,
| | 02:00 | categories, comments, and all that kind of stuff.
Below that you can set the Teaser length.
| | 02:06 | This is great if you have a lot of
long teasers that you use for your theme,
| | 02:11 | and you want to have a shorter version
on the teasers for your Index pages on
| | 02:15 | the mobile site, or in some cases you may want
to have a longer teaser for your mobile site.
| | 02:21 | The Number of widget items settings
allows you to change the number of items
| | 02:26 | in the widgets in your Mobile Theme
because many widgets will default to
| | 02:30 | quite a high number of items in lists,
and in some cases that will look kind of
| | 02:35 | weird on your phone.
| | 02:36 | For instance, if you have a Tag Cloud,
and you have hundreds of tags, you may
| | 02:40 | not want to have to scroll through all of them.
| | 02:42 | So here you can limit that number
so that each widget will only have a
| | 02:46 | certain number of items.
| | 02:47 | You can also choose to Remove
interactivity and media elements, such as
| | 02:51 | JavaScript and Flash Items
and movies and embedded frames.
| | 02:55 | I would suggest you leave this on
because some of those interactive items may
| | 02:59 | cause havoc on your phone.
| | 03:01 | They are not going to destroy the phone
though, it just be extremely difficult
| | 03:04 | to navigate on the phone.
| | 03:06 | Partitioning large pages may or may not
be a good idea, I think this made more
| | 03:11 | sense previously when people had a
harder time loading things, what it does is
| | 03:15 | it literally splits
large pages in several pages.
| | 03:18 | You get the Next button on the bottom.
| | 03:21 | In some cases it leads to better user
experience, but I find myself getting
| | 03:24 | really annoyed when I have to keep
skipping to the next page to read something,
| | 03:29 | so I would turn that off.
You also have a Shrink images option.
| | 03:34 | This is smart because it allows the
mobile plug-in to shrink the images down so
| | 03:39 | that they fit on a mobile device
because not surprisingly a mobile device where
| | 03:43 | there is much smaller screen size
doesn't need gigantic pictures because then
| | 03:47 | we are just wasting bandwidth.
| | 03:50 | The Clear cache now button is
associated with this, and it allows you to clear
| | 03:54 | the cache, that is the saved
versions of the smaller images.
| | 03:59 | If you choose to change an image that's
already into post, so if you check Clear
| | 04:03 | cache now and save changes, then all
the cached images, those are the images
| | 04:08 | that were saved that are smaller will
be deleted and new ones will be created
| | 04:12 | next time they are called up.
| | 04:13 | The final option, Simplify styling, is a
clever little option that strips off any
| | 04:19 | styling code that you may
have put into your post.
| | 04:22 | Things like making certain font bigger or
smaller so that it looks good on the phone.
| | 04:26 | Now if you do things properly you
shouldn't really have much styling elements
| | 04:30 | in your post and pages to begin with,
but if you do, it's a good idea to leave
| | 04:34 | this on so that the experience is good for the
people who visit your site using mobile devices.
| | 04:40 | If you make any changes here, remember
to always click Save Changes at the end.
| | Collapse this transcript |
| Configuring mobile widgets| 00:00 | Once the theme has been configured,
you can further customize the mobile
| | 00:04 | experience by deciding what widgets to show.
| | 00:07 | Mobile Widgets show up quite
differently from your regular sidebar widgets, so
| | 00:11 | it's worth some experimentation to find out
which widgets work and which widgets don't.
| | 00:16 | Controlling the widgets in your mobile
theme is a bit different from controlling
| | 00:20 | your regular widgets.
| | 00:22 | If we go to Appearance and Mobile
Widgets, you'll see here it says, Use this
| | 00:27 | page to select which of your current
visible widgets will appear for your
| | 00:31 | mobile users, and when you scroll down
you will see that under Main Sidebar we
| | 00:36 | have Recent Posts and Recent Comments,
under Footer Area One we have Custom
| | 00:40 | Menu, under Footer Area Two we have
Recent Posts, and under Footer Area Three
| | 00:45 | we have Categories.
| | 00:47 | Where is this all coming from?
It's coming from the Regular Widgets.
| | 00:50 | So if we go to the Regular Widgets,
you will see here under Main Sidebar, we
| | 00:54 | have Recent Posts and Recent Comments,
under Footer Area One we have Custom
| | 00:58 | Menu, Footer Area Two, Recent Posts
and Footer Area Three, Categories.
| | 01:04 | So you here is what the Mobile Widgets
function is doing is saying, hey, you
| | 01:10 | have all of these widgets enabled for
your regular theme, how many of those do
| | 01:14 | you want to display in your mobile theme,
that's great because it means you can
| | 01:18 | add as many widgets as you want in
your regular theme for desktop or laptop
| | 01:22 | users, and then you can choose which ones
you want to display on the mobile site as well.
| | 01:28 | So if we have the widgets we want
here, I can choose to go into Mobile
| | 01:33 | Widgets and activate just a couple of them
because those are the ones that I want to display.
| | 01:39 | When I Save this and load the site on
my mobile device, and I scroll to the
| | 01:44 | bottom, I will see that the Active
Widgets now appear as accordion menus at the
| | 01:49 | bottom, so I can click on each of these
accordion menus, and I get list of the
| | 01:53 | items in that widget.
| | 01:54 | For instance, under Recent Posts, I
now get the five most recent posts, and
| | 01:59 | under More Info I get a custom menu.
| | 02:02 | So as you can see by configuring
the Mobile Widgets, you get the same
| | 02:06 | information that you have in your
regular widgets on your regular theme, but you
| | 02:10 | get them customized for the mobile experience.
| | Collapse this transcript |
| Tracking mobile analytics| 00:00 | WordPress Mobile Pack has one more trick
up its sleeve, Simple Mobile Analytics.
| | 00:05 | They are not under the Appearance tab,
but rather under the Tools tab, and if
| | 00:10 | you go down here and click on Mobile
Analytics, you get a simple page that
| | 00:15 | gives you information about how many people
who visit your site currently use mobile devices.
| | 00:20 | These analytics are somewhat skewed
because we have been experimenting with
| | 00:24 | the site on our mobile devices all day, so
therefore the percentage is extremely high.
| | 00:30 | But for your regular site this kind of
information is actually really important
| | 00:34 | because then you can see how many
people who visit your site use mobile devices
| | 00:39 | and then customize the experience based on that.
| | 00:41 | If we have a very high percentage like
over 35%, like we do, of the people who
| | 00:47 | use mobile devices, I'd strongly
recommend creating a custom mobile theme for
| | 00:52 | those people so that they get the
same type of experience that the desktop
| | 00:55 | users get on your site, but they don't get all
the clutter that the desktop site has to offer.
| | 01:02 | That way they get a consistent
experience across all devices, and you can
| | 01:07 | customize that experience
to the devices they use.
| | 01:10 | If you, like us, have been experimenting
with a site and testing it constantly on
| | 01:14 | your mobile device, you may want to
Reset the Counter before you start using
| | 01:20 | this data as valid data because the
one thing you don't want to do is start
| | 01:24 | working on your site because you think
you need to customize it to your mobile
| | 01:28 | users, while in reality you're
just customizing it for yourself.
| | 01:32 | And one more thing, as this page
suggests, this is a very, very, very basic way
| | 01:37 | of tracking mobile users.
| | 01:39 | If you add a proper tracking service,
like Google Analytics, to your site, you'll
| | 01:44 | get far more detailed information about
the people who visit your site, but for
| | 01:48 | a quick look at what's going on, on
your site, this is a perfect service.
| | Collapse this transcript |
|
|
3. Using the WP Mobile DetectorInstalling and activating the WP Mobile Detector| 00:00 | An alternative to the WordPress
Mobile Pack plug-in can be found in the WP
| | 00:05 | Mobile Detector plug-in.
| | 00:07 | These two plug-ins are very
similar and they have many of the same
| | 00:11 | functionalities, the main difference
lies in the type of themes that they
| | 00:14 | shipped with, and how these themes are managed.
| | 00:17 | We can install the WP Mobile Detector
plug-in the same way we installed the
| | 00:21 | other plug-ins by going to the Dashboard,
going to Plug-ins, and before I install
| | 00:26 | it, I have to make sure that my WordPress
Mobile Pack plug-in is deactivated so it
| | 00:31 | doesn't clash with a new
plug-in I am going to install.
| | 00:34 | So if you go into plug-ins and
WordPress Mobile Pack is Activated, click on
| | 00:39 | Deactivate to deactivate it, then we can
go to Add New, type in wp mobile detector,
| | 00:51 | and here is the WP Mobile Detector,
Install it, Activate the Plug-in, and once
| | 01:01 | it's installed I can open the site
on my mobile device, and I see that I
| | 01:05 | immediately get this mobile-friendly
theme that I can use to access the content.
| | 01:10 | You'll also notice that this theme
looks quite different from the one that came
| | 01:14 | with the WordPress Mobile Pack.
| | 01:16 | This is a more modern looking theme, and
if you like this kind of look, then you
| | 01:21 | may want to use this Plug-in instead.
| | Collapse this transcript |
| Configuring WP Mobile Detector settings| 00:00 | The WP Mobile Detector plug-in comes with its
own set of settings and configuration options.
| | 00:07 | But before we look at that, I am just going
to address something that you see right
| | 00:11 | here on the Dashboard.
| | 00:12 | This happens quite a lot when you
install new plug-ins in WordPress, different
| | 00:15 | plug-ins may serve up new
content that you see on your Dashboard.
| | 00:19 | In this case, the WP Mobile Detector
adds this WP Mobile Detector Updates
| | 00:24 | panel on the Dashboard.
| | 00:26 | If you don't want to see this, you
can either collapse it, you can grab it
| | 00:31 | and move it somewhere else, or you can go
to Screen Options and turn it off completely.
| | 00:37 | This is completely optional, and it's
just something I wanted to address because
| | 00:41 | people tend to ask about it.
| | 00:43 | Now to look at the settings, at the very
bottom of our menu, you see that we now
| | 00:48 | have WP Mobile Detector as an option
and under here, you can go to Settings and
| | 00:54 | see the settings that come with this
plug-in. The settings are fairly basic and
| | 00:58 | they are basically on off switches for
different functions. You can decide to
| | 01:03 | use the mobile statistics function
they comes with for WP Mobile Detector you
| | 01:07 | see it here under stats, yes or no.
You can give credit to WordPress Mobile
| | 01:12 | Detector with a footer link,
yes or no, default to set the no.
| | 01:16 | You can choose to Show a dashboard
widget, and you can also choose whether you
| | 01:21 | want to show the mobile theme to tablet
devices. This is maybe the most important setting
| | 01:25 | because in many cases the mobile themes to
really work all by well on tablet devices.
| | 01:31 | So in many cases you may want to
consider turning this off especially for using
| | 01:35 | a responsive theme for the rest of your
web site. For each of these options you
| | 01:39 | have an Update button so you don't have
the keep saving the whole page and then
| | 01:43 | going back and changing option, and you
can experiment with these and see what
| | 01:47 | you think, but like I said, they're fairly basic settings.
| | Collapse this transcript |
| Configuring WP Mobile Detector themes| 00:00 | Just like you can pick what kind of
theme you want to use for your main web site,
| | 00:05 | you should be able to pick what kind
of theme you use for your mobile sites.
| | 00:09 | And just like in the WordPress
Mobile Pack plug-in the WP Mobile Detector
| | 00:13 | plug-in allows you to pick what theme you wanted
people to see when they use mobile devices.
| | 00:18 | If you go to the back end, go to WP
Mobile Detector and select Mobile Themes
| | 00:25 | you'll see a list of all the available
mobile themes here, and you notice that
| | 00:28 | this list looks quite like the
General Theme Selector for WordPress.
| | 00:33 | Here we have the different stock
options that come with the WP Mobile Detector.
| | 00:38 | You'll easily identify them because
they're all made by websitez.com, and you
| | 00:44 | can pick any one of these.
| | 00:46 | You'll also see other themes,
including the themes that you have installed,
| | 00:50 | and because we were using the
WordPress Mobile Pack earlier we also have
| | 00:55 | those as options down here.
| | 00:58 | Picking any of these themes will
give you a nice mobile experience.
| | 01:03 | So, for example, if you want to use
this Bluesteel option I'll go and click
| | 01:07 | Activate, and that will
activate Bluesteel as the mobile theme.
| | 01:12 | If I go to my phone now we can
take a closer look at this theme.
| | 01:17 | From the top you see the site name, and
there's a dropdown menu where I get the
| | 01:22 | Search option, I also get the regular
menu options, and this is one of the
| | 01:26 | custom menus, and I also get the widgets.
| | 01:30 | So these different themes will
place the widgets in different places.
| | 01:33 | In the case of this Bluesteel theme
the widgets are placed in this dropdown
| | 01:37 | menu on the header.
| | 01:38 | As we scroll down you see we have the
site name and the content, and if we go
| | 01:44 | using our menu to the News and
Information section, which is the Blog section for
| | 01:49 | this site, you see we get a fairly
standard blog with the date, the title, and a short
| | 01:57 | version of the post.
| | 01:58 | You can collapse the first post if you
want to, and you can also expand any of
| | 02:02 | the other post to see the short
description of each of the posts.
| | 02:06 | If you click on the title, you go directly
to a full post where you have the tags,
| | 02:12 | the categories, and you
can also leave a comment.
| | 02:18 | WP Mobile Detector ships with the
several different themes and they all have
| | 02:21 | slightly different configurations and
different functionality, so I urge you
| | 02:25 | to try a couple of different ones to see which
one you like the best and then activate that one.
| | Collapse this transcript |
| Tracking WP Mobile Detector analytics| 00:01 | The last feature in the WP
Mobile Detector plug-in is the stats.
| | 00:07 | Again, just like the WordPress Mobile
Pack plug-in, WP Mobile Detector has its own
| | 00:13 | built-in stats system.
The stats separate the users into three groups,
| | 00:18 | Basic Mobile Devices, Advanced Mobile
Devices, and it also tracks Googlebot and
| | 00:24 | Bing Bot so that you know that in
some cases these aren't real users.
| | 00:27 | You'll see the stats displayed here, and
you can see how many unique users there
| | 00:32 | are based on IP address, and you
can also see how many total visits.
| | 00:36 | You can select between Today, Last 7
Days, or Month-To-Date, and you also get
| | 00:41 | some basic information about the user
agent, that is what kind of device was used.
| | 00:46 | Although most of this information
can be gathered using a more advanced
| | 00:49 | application like Google Analytics,
| | 00:52 | it's good to have this kind of simple
view that just tells you how many people
| | 00:56 | are actually visiting your
site using a mobile device.
| | 01:00 | That way you can see what types of
device being used and how many people are
| | 01:03 | going back to your site on their mobile
device by looking at this Total Visits value.
| | 01:08 | That way you have an idea of how much
time and effort you should put into the
| | 01:13 | mobile version of your site to
make it work for those people.
| | 01:17 | If you don't have a lot of mobile
visitors, it's not all that important, but if a
| | 01:21 | large percentage of your visitors are
using mobile devices, you really should
| | 01:25 | make an experience that is as
much tailored to them as possible.
| | 01:29 | Overall, if you compare the two together,
the WP Mobile Detector plug-in is easier
| | 01:34 | to use and has more modern themes
than the WordPress Mobile Pack plug-in.
| | 01:38 | However, the WordPress Mobile Pack plug-in has
more advanced features and more customizability.
| | 01:44 | So it's a toss up, do you want a more
modern look and simpler functionality, or do
| | 01:49 | you want more options?
| | Collapse this transcript |
|
|
4. Using the Free Edition of WPtouchInstalling and activating WPtouch| 00:00 | The last mobile plug-in we're going to look at
is also the most popular one, called WPtouch.
| | 00:05 | And as you can see it's been
downloaded over 3.5 million times, and that's
| | 00:10 | just the free version.
| | 00:11 | There's also a paid version with far
more advanced functionality that is
| | 00:16 | also extremely popular.
| | 00:18 | WPtouch is different from the
two other plug-ins we have looked at.
| | 00:21 | In that, this is not a mobile theme
switcher, but rather a custom mobile theme.
| | 00:27 | Because of this, the developers have
spent far more time looking at graphics,
| | 00:32 | making it look really nice on different
devices, and also giving it full support.
| | 00:37 | That means, lots of customizability and
a really consistent layout for everyone.
| | 00:42 | Before we install WPtouch let's make
sure the other mobile plug-ins are turned
| | 00:46 | off so we don't get any collisions.
| | 00:48 | So I am going to go and deactivate the
WP Mobile Detector plug-in here, and then
| | 00:53 | because I have had some bad
experiences with deactivating this particular
| | 00:57 | plug-in before, I am going to go to
Appearance > Themes, and make sure that the
| | 01:02 | Twenty Eleven theme is still active.
I'll even go to the front page just to check.
| | 01:06 | Because in some rare cases when you
deactivate the WP Mobile Detector plug-in
| | 01:11 | for some reason the main theme also
gets temporarily deactivated, and you have
| | 01:15 | to reactivate it to make it work,
but in this case everything is fine.
| | 01:19 | Now I can go back to the Dashboard, go to
Plug-ins > Add New, and search for WPtouch.
| | 01:32 | I'll install WPtouch, activate it, and
when I now open the site on my phone we
| | 01:42 | get a very nice mobile experience.
| | 01:45 | As you see this plug-in has very
iPhone inspired look, and it has features
| | 01:51 | like a dropdown menu at the top, a
search bar at the top, but the power of
| | 01:58 | WPtouch lies in all the customization
you can do with this theme, and that's
| | 02:02 | what we'll look at next.
| | Collapse this transcript |
| Configuring general settings and advanced options| 00:00 | Even in the free version, the
WPtouch plug-in has a lot of customization
| | 00:05 | options that help you customize the mobile
experience for visitors that use mobile devices.
| | 00:11 | To get to those settings go to the
Dashboard > Settings > WPtouch.
| | 00:18 | Here you get the dashboard for WPtouch,
and here you can configure all the settings.
| | 00:22 | At the very top you have a feed that
shows you the latest news about the plug-in,
| | 00:28 | along with a big ad for the WPtouch
Pro plug-in, which if you like WPtouch you
| | 00:34 | may want to invest in because it has a lot of
extra functionality like iPad support and other things.
| | 00:39 | And directly underneath, you have Settings,
and that's what we're going to look at now.
| | 00:46 | Off the top you have Regional Settings
that have to do with the plug-in itself,
| | 00:49 | so in all this language that you
see here can be switched either from
| | 00:53 | automatically detected--which is where
you should leave it--to French, Spanish,
| | 00:58 | Basque, Japanese, Turkish, or Italian.
| | 01:01 | This only applies to the language in
the plug-in itself, so like I said, you
| | 01:06 | should leave it at Automatically detected.
| | 01:07 | The next option is really important, and
it is the Home Page Re-Direction option.
| | 01:13 | If you look at the site I have right
now you'll see that the front page is
| | 01:18 | a static page, and the blog is placed under
News and Information under a page called Blog.
| | 01:24 | If I want to make the homepage on
mobile devices be the blog page, I need to
| | 01:30 | override the Reading Options which are set to
the static page, and I can do that right here.
| | 01:35 | So I simply drop it down, and I select
the page--in this case the Blog page--and
| | 01:41 | then the Home Page will now be the Blog page.
| | 01:43 | Below that I can change the title of
the site if I don't want to use the
| | 01:47 | standard site title, and I can exclude
categories and tags based on the IDs for those.
| | 01:52 | That's because in the plug-in
when you hit the dropdown menu at the top,
| | 01:58 | you get the category list, and in some
cases you may want to exclude them so that
| | 02:02 | they don't appear on the phone.
| | 02:04 | That's especially important if you have
a category with content you don't think
| | 02:07 | we'll display properly on the phone anyway.
| | 02:09 | You can set Text Justification either
to Left aligned or to Full or justified,
| | 02:15 | and you can choose what type of
icons you want each post to have.
| | 02:19 | The default is the calendar icon that
you can see on the phone, but you can also
| | 02:24 | choose to set it to Post
Thumbnails, or you can set it to No Icon.
| | 02:30 | For each post you can also decide
whether you want to see Truncated Titles, that
| | 02:34 | means if the titles too long to fit on
the screen, they will just add a ellipses
| | 02:39 | to the end, that dot, dot, dot. You can
also choose whether you want to Show the
| | 02:43 | Authors Name, so if you have a one-
author web site you may want to turn it off,
| | 02:48 | but if you have multiple authors you
may want to turn it on. You can choose
| | 02:52 | whether to Show the Categories, the
Tags, and whether to hide the excerpts.
| | 02:55 | Finally, in the general settings, you
can set a customized footer message.
| | 02:59 | By default it just says, All content
Copyright, and then it puts in the name of
| | 03:04 | the blog, but you can put in anything you want.
| | 03:06 | Below the General settings we have
Advanced Options, and these are on/off
| | 03:10 | toggles for different settings. You
can allow or disallow zooming on content,
| | 03:14 | so you can do the pinch and zoom.
That should be left off. You can Enable
| | 03:18 | Categories in the header that's under
the dropdown menu. You can also Enable
| | 03:23 | Tabs and a Search link in header.
| | 03:26 | If you want to you can enable login in
the header. I would say that generally
| | 03:30 | that's not a good idea, because you
don't want people to try to log into your
| | 03:34 | site, but in some cases you
may want to make this an option.
| | 03:38 | And you can wire this plug-in in
with other plug-ins like GigPress or
| | 03:41 | WordTwit that show you either Twitter
links or what's coming up on the blog.
| | 03:47 | You can enable comments on posts, enable
comments on pages, enable gravatars, and comments.
| | 03:53 | Gravatars are those little faces
that you see next to the comments.
| | 03:56 | And finally, you can set it so that the
first time someone visits your web site
| | 04:01 | using a mobile device they get the
desktop theme instead of the mobile theme.
| | 04:05 | That may be a good idea if you really
want people to identify the web site ask
| | 04:10 | your web site the first time and
then have them use the mobile theme.
| | 04:15 | The last two options, Enable WPtouch
Restricted mode and Custom user-agents, are
| | 04:20 | advanced options that are rarely used,
and the only reason you'd want to use them
| | 04:25 | is if you have very specific user scenarios.
| | Collapse this transcript |
| Setting options for push notifications, style, color, advertising, and stats| 00:00 | In addition to general and advanced
settings, WPtouch comes with extra settings
| | 00:05 | that allow you to set up push
notifications, advertising and stats, and also apply
| | 00:11 | some simple custom styling to your mobile sites.
| | 00:14 | If we scroll down past General Settings
and Advanced Settings, you'll get to the
| | 00:19 | Push Notification Options.
| | 00:21 | This option allows you to wire your
mobile site to service know as Prowl that
| | 00:26 | enables the web site to send push
notifications to mobile devices.
| | 00:31 | To use this, you first have to have a
Prowl API key that you can get from
| | 00:36 | prowlapp.com, and this API key allows
you to link your site with the prowl
| | 00:41 | service, and that in turn will push
notifications through cell phones.
| | 00:46 | Those notifications would be new
comments and pingbacks, account registrations,
| | 00:52 | and allowing users to send direct messages.
| | 00:55 | Below Push Notification options,
we have Style & Color Options.
| | 00:59 | The Style & Color Options are fairly
basic, and they allow you to control a bit
| | 01:03 | of the look of the site. We could go in
here and change the Background from the
| | 01:07 | Classic to one of the
other default options here.
| | 01:12 | We can also change the fonts for the
post titles to one of these options on the
| | 01:16 | dropdown, and we can also change some
of the colors on the site, including the
| | 01:22 | title text color, the header background
color, the sub-header background color,
| | 01:26 | and the site-wide links colors.
| | 01:27 | Below Style & Color Options we
have Advertising, Stats & Custom Code.
| | 01:33 | This function allows you to link your
mobile site to advertising networks.
| | 01:38 | In the free version of the plug-in you
can only link it to Google AdSense, but if
| | 01:43 | you have the Pro version, you can link
to other advertising networks as well.
| | 01:47 | If you want to use the advertising
network here, you need to have a Google
| | 01:50 | AdSense account, you get the AdSense ID,
and you plug it in here, and then you
| | 01:55 | can also set up a custom Google
AdSense Channel just for the mobile site so
| | 01:59 | that you can run statistics and see how many
people interact with a mobile ads in this plug-in.
| | 02:05 | Personally, I do not like the idea
of putting ads on my site at all and
| | 02:11 | especially not in a mobile site, but if you
want to do that, this is where you would do it.
| | 02:16 | More importantly, you can also add custom
tracking codes for statistics, and this
| | 02:22 | is something I highly urge you to do.
| | 02:24 | Get a Google Analytics account and
create two different tracking methods, one
| | 02:29 | for your regular web sites and one for
the mobile web site, and then you put in
| | 02:34 | the tracking code here for the mobile
web site. That way you run separate stats
| | 02:39 | on the people that access your site
through mobile devices, so you can truly see
| | 02:43 | how they navigate through your site and
compare that to how your desktop clients
| | 02:48 | navigate through your site so that you
can see what's going on and see what you
| | 02:53 | need to perfect or change.
| | Collapse this transcript |
| Customizing the menu with icons| 00:00 | When you have just installed WPtouch
on your site and you open it on your
| | 00:05 | mobile device and you use the
dropdown at the very top, you'll see that you
| | 00:09 | have three main items on the
Menu, Home, RSS Feed, and Email.
| | 00:15 | Next to that, unless you deactivated them, you
have a list of tags and a list of categories.
| | 00:21 | But nowhere in this interface do you
have links to all the different pages on
| | 00:25 | your site, which is probably
something you want to have in the menu.
| | 00:29 | The reason why you don't see all your
pages on the menu right away is because
| | 00:34 | the creators of WPtouch know that not everyone
wants to display all their pages in the menu.
| | 00:39 | There can be many reasons for this, for
example, if you're using one page as the
| | 00:45 | blog page and another page as the front page.
| | 00:47 | If you want to customize the menu, you
need to go to the WPtouch Admin Panel, and
| | 00:52 | scroll all the way to the bottom.
| | 00:56 | In the last option here called Logo
Icon // Menu Items & Pages Icons, this is
| | 01:03 | where you can customize the menu.
Now I am just going to tell you outright,
| | 01:06 | this is the free version of WPtouch,
and it does not support the WordPress 3
| | 01:11 | Custom Menu functionality.
| | 01:13 | If you want the WordPress 3 Custom Menu
functionality, you have to buy WPtouch Pro.
| | 01:18 | But even with WPtouch as the free version
you still can control it to quite an extent.
| | 01:23 | Let's just ignore the first option
for now and go down to this list.
| | 01:28 | Here off the top, you can Enable
the Home Menu item in the menu.
| | 01:33 | And as you saw by default, the
three you have is Home, RSS and Email.
| | 01:39 | This is where you can enable
or disable any one of these.
| | 01:41 | For instance, I don't want a button
so people can send me an email, so I am
| | 01:46 | going to turn that off, and I also don't want
the Home Menu items so I am going to turn that off.
| | 01:51 | And I will explain why in a second.
| | 01:53 | The next thing you can do is decide if
you want the menu to be ordered based
| | 01:58 | on name or page ID.
| | 01:59 | So I am going to Name because name and
page ID pretty much are the same thing,
| | 02:03 | it's going to end up being fairly random.
| | 02:05 | And then below here, you can select
what pages you want to show in the menu.
| | 02:09 | The reason why I don't want to show
the homepage is because the homepage is
| | 02:13 | actually just one of these pages.
| | 02:15 | And for the mobile user, I want that
page to say Welcome to KinetECOInc.
| | 02:19 | So I am going to activate this page, I
also want to activate Product Sampling,
| | 02:25 | and Contact, and Blog.
| | 02:28 | I am going to leave About, Company
Structure, and KinetECO Executives blank.
| | 02:34 | Now I will Save the Options, if we
scroll back down again, almost all the way to
| | 02:41 | the bottom, you will see we have the
Default & Custom Icon Pool or the plug-in
| | 02:45 | ships with a set of icons that you can
use, including that Admin icon the cog,
| | 02:50 | and social icons and things like that.
| | 02:52 | And you can also upload
your own icons if you want to.
| | 02:55 | So what I am going to do here is Upload
an Icon that I created, it's right here,
| | 03:01 | and that icon is added to the pool.
| | 03:04 | Once the icon is uploaded, I can now use it
and assign it to anyone of my menu items.
| | 03:09 | But to do so, I have to refresh my page first
so that these dropdown menus have the new icon.
| | 03:15 | So I will go and Save Options scroll
down again to the bottom, and now at the
| | 03:21 | bottom of my dropdown list, I
have KinetECO icon that I can select.
| | 03:26 | So I will select that for all
of my pages first and Save it.
| | 03:37 | And activate the dropdown, and now
you see that my new custom icon appears
| | 03:42 | next to all these items.
| | 03:44 | But I want to go step further and
assign icons that make sense compared to what
| | 03:48 | those different buttons are.
| | 03:49 | So I will go down and
look at my icon sets again.
| | 03:53 | And I see that I have a Blog
button, and I have a Contact button.
| | 03:57 | So I want to use icons
that make more sense for that.
| | 04:00 | So I am going to use these Notes for the
blog and the Contacts button for the contact.
| | 04:05 | So I will scroll down again, go to Blog,
and find the one that's called Notes and
| | 04:12 | then find Contacts, and use the one
that's called Contacts, Save the Options
| | 04:18 | again, and when I use the menu, you will
see that we now have icons that clearly
| | 04:24 | indicate what these different sections are.
| | 04:27 | That way we're creating an experience
that is very akin to what people are used
| | 04:31 | to when they use mobile devices.
| | 04:33 | Now we have Iconography that clearly
indicates where they're going let me click
| | 04:38 | on the different buttons.
| | 04:39 | Because this is the free version of
WPtouch, what you're seeing here is barely
| | 04:43 | scratching the surface of what is possible.
| | 04:46 | If you go to the web site to look at
what is possible, you can see that while we
| | 04:52 | are now at the free version--
which has pretty much all red Xs--
| | 04:56 | all the pro versions have a lot more
functionality, so it's well worth taking a
| | 05:00 | look at what you can do when
you upgrade to WPtouch Pro.
| | Collapse this transcript |
|
|
5. Going further with WordPress for MobileThe end of mobile plug-in customization is where responsive design begins| 00:00 | In this course, we have been looking
at how to use plug-ins to make simple
| | 00:04 | mobile versions of web sites that
are easy to access for mobile visitors.
| | 00:10 | However, you would have notice that
these mobile web sites have a very
| | 00:14 | distinctive look, and that look doesn't
really correspond with the look of your
| | 00:19 | web site as a whole.
| | 00:20 | There's a huge debate going on inside
the web development community right now
| | 00:24 | over these types of web sites.
| | 00:26 | The question is do you go with the
mobile specific web site that might be
| | 00:30 | generic or do you create your own
mobile version of the web site that looks
| | 00:35 | exactly the way it should on mobile
devices, or do you create a responsive web
| | 00:41 | site that changes its
content to fit with mobile devices?
| | 00:46 | And this is a topic as fraught with controversy.
| | 00:48 | So if you are lying on the other side, that's fine.
But personally, I like responsive design.
| | 00:54 | The reason being in responsive design,
if it's implemented properly, the site
| | 00:59 | you visit when you go on your mobile
device will be the same site that you visit
| | 01:03 | when you go on your desktop.
| | 01:04 | And therefore, you'll see
cohesion between the two.
| | 01:08 | For an example of a site that uses
responsive design in WordPress really well,
| | 01:13 | go to the smashingmagazine.com web site.
| | 01:14 | Smashing Magazine is an excellent
resource for articles on design and
| | 01:20 | development, and they
write a lot about WordPress.
| | 01:23 | But if you look at this site on your
mobile device, you will notice that
| | 01:27 | it works really well on the mobile device
without this being a separate mobile solution.
| | 01:32 | This site is responsive and will reformat its
content to fit whatever size screen you're using.
| | 01:38 | So if I am on a smart phone, it's rather
small, and all the extra content has been cut off.
| | 01:44 | But if I am on a large tablet, I get a
different experience that has more extra content.
| | 01:49 | If you're interested in learning how to
build these responsive WordPress themes,
| | 01:54 | check out my WordPress: Building Responsive Themes course
right here on the lynda.com online training library.
| | 02:01 | If you follow that course from start to finish, you'll
end up with a fully-responsive theme of your own.
| | Collapse this transcript |
|
|
