Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
WordPress Mobile Web Development: Beginner's Guide
WordPress Mobile Web Development: Beginner's Guide

WordPress Mobile Web Development: Beginner's Guide: Make your WordPress website mobile-friendly and get to grips with the two hottest trends in web design—Mobile and WordPress with this book and ebook.

Arrow left icon
Profile Icon RACHEL MCCOLLIN
Arrow right icon
S$53.98 S$59.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.6 (5 Ratings)
eBook Aug 2012 332 pages 1st Edition
eBook
S$53.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial
Arrow left icon
Profile Icon RACHEL MCCOLLIN
Arrow right icon
S$53.98 S$59.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.6 (5 Ratings)
eBook Aug 2012 332 pages 1st Edition
eBook
S$53.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial
eBook
S$53.98 S$59.99
Paperback
S$74.99
Subscription
Free Trial

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

WordPress Mobile Web Development: Beginner's Guide

Chapter 1. Using Plugins to Make Your Site Mobile-friendly

Imagine you're the designer or administrator of an existing website and your client or manager tells you the site needs to be mobile-friendly, in a hurry. There's a limited budget and no time, so what do you do?

The answer, as with many WordPress challenges, could be a plugin.

When I first set up a mobile website for a client in 2010, there were only about half a dozen plugins that would help achieve this. Now, if you search for the term mobile in the WordPress plugin repository at http://wordpress.org/extend/plugins/, you will get 466 results, about 10 percent of which are plugins which will help make an existing desktop site mobile-friendly. They do it in different ways, but in this chapter, we will look at some that make your site mobile-friendly in the quickest possible time.

Note

WordPress uses plugins to add extra functionality to a site, which isn't a part of the core WordPress installation. Plugins exist for a huge array of tasks, from backing up your site to adding full e-commerce functionality. To find out more about plugins, see http://wordpress.org/extend/plugins/ and http://codex.wordpress.org/Plugins.

In this chapter we shall:

  • Learn about the different types of mobile plugins and how they work

  • Identify what you need to consider before choosing a plugin to make your site mobile-friendly

  • Examine some of the available plugins, see how they make a site look, and identify some of their pros and cons

  • Learn how to install and configure some of the most effective mobile plugins

So let's get on with it!

Before we start


Before completing the exercises in this chapter, you will need a few things ready as follows:

  • An existing desktop site, running on WordPress

  • Administrator access to the site's WordPress dashboard or admin.

  • FTP access to the site if you choose to manually upload plugins instead of using the WordPress backend

  • Permission to make changes to the site—it's probably safest to work on a test site first

  • A mobile device to test the mobile version of your site. These should reflect the devices your visitors will be using. We will look at testing using devices and emulators in Chapter 10, Testing and Updating your Mobile Site.

Plugins or responsive design—what to choose


When making our site mobile-friendly, we have two main options :

  • Using a mobile plugin to deliver a mobile theme or site to mobile devices

  • Using a responsive theme or making our existing theme responsive

We will look at the responsive design in more detail later in this book. But, as using a plugin is the quickest and easiest way to make our site mobile-friendly, that's where we'll start.

How do mobile plugins work?


The dozens of plugins that help us create mobile sites, do different jobs. The main kinds of plugins you will come across are as follows:

  • Plugins that switch the site's theme when someone visits it on a mobile device, known as switchers. To use one of these, we would have to create a separate mobile theme. We will look at some of these plugins and how they can support app-like sites, in Chapter 9, Adding Web App Functionality.

  • Plugins that help deliver different content to mobile devices, saving on load times and data transfer. These plugins work well with responsive sites, so we will look at some of them in Chapter 7, Sending Different Content to Different Devices.

  • Plugins that use a third-party service to power our mobile site. These run the site through the service provider's servers and usually require an activation key or an account with the provider.

  • Plugins that quickly and easily make our site mobile-friendly, displaying the content differently on mobile devices and making the site easier to read and interact with.

The preceding are the plugins we will be focusing on in this chapter.

The plugins we will work with in this chapter are all free and available in the WordPress plugin repository (http://wordpress.org/extend/plugins/). There are premium plugins available (and premium versions of some of the free plugins), but here we will be sticking with the free ones.

In this chapter, we will see how each plugin renders the Carborelli's site on a mobile device. On a desktop, this is how the site looks:

We will experiment with some plugins, which can quickly and easily make the site mobile friendly, while keeping as much functionality, content, and design as possible. If you have your own desktop site that you're making mobile-friendly, you can try the same plugins out on that, too.

Identifying the right plugin for our site


Before installing a plugin, there are some things about the site we will need to consider, including the devices we expect visitors to be using, the way the site works, and its content.

Time for action—identifying how your site should work on mobiles


If you're planning on making your own mobile-friendly site, grab a paper and pen, and make a note of your answers to the following questions:

  1. 1. Which mobile devices are you targeting? The main thing to think about is whether you're just interested in smartphones, or whether visitors to your site will be using lower-specification devices without full web browsers (for example, feature phones, which are more widely used than you may think).

  2. 2. Does your site have images or a logo that you want to display on mobiles?

  3. 3. Are there any widget areas on your site that you need to display on mobiles? Even if you've used widgets, you may not always need to display them to mobile visitors.

  4. 4. How much control do you want over the way your site looks on mobiles? Some plugins come with alternative themes or styling options, letting you pick colors and styles to some extent.

  5. 5. How will people be accessing your site? There's a good chance that they'll be using 3G or another slower method of data transfer. Speed and file sizes are, therefore, important to save losing visitors or alienating them because you're using up their data allowance.

When we come to looking at some individual plugins, we will identify how each of them addresses the questions you've just answered.

What just happened?

You now have some criteria you can use while choosing the best plugin for your site.

In the case of the Carborelli's site, our criteria are as follows:

  1. 1. The site will be targeting smartphones; in particular, iPhones, Android devices, and Blackberries. Access from other phones is not essential.

  2. 2. The logo isn't crucial on mobile devices—it's more important for people to be able to get the content. However, there are images and an embedded map showing Carborelli's location, which are important.

  3. 3. The site uses a widget area for the sidebar, making it easier for the client to update information in the future. So yes, it's important that widget areas are displayed.

  4. 4. Fine control over the styles isn't essential as long as the default style provided by the plugin is smart and images are displayed, as they will provide a lot of visual cues.

  5. 5. Most users will be from the USA and using 3G. Speed and file size are important to reduce data transfer, so we'll be looking for a plugin that doesn't make too many server requests and downloads smaller versions of images.

    The Carborelli's site, when tested using Google speed test (https://developers.google.com/pagespeed/) scores a fairly respectable 75 out of 100. Ideally, a mobile plugin should speed the site up, so give a higher score.

We will come back to these criteria shortly while looking at some plugins.

Plugins that will make our site mobile


Now that we've identified how we need our mobile site to work, let's have a look at some of the plugins available and how they might match up to our criteria. Once we've done that, we'll have a go at installing and configuring two of the most popular mobile plugins.

Note that this list is taken from the plugins available in the WordPress plugin repository at http://codex.wordpress.org/Plugins in June 2012. As plugins are added to the repository and sometimes removed, the list may change over time.

Plugin

Link

Features

Pros

Cons

WPtouch

http://wordpress.org/extend/plugins/wptouch/

  • Reliable and popular.

  • Can be used with no customization—works immediately.

  • Customization options for colors, logo and menu icons.

  • Use a different navigation menu from the desktop site—useful for different mobile navigation.

  • Display widgets.

  • Limited customization available—makes it difficult to carry through branding or styling to mobile site.

  • Doesn't resize image files for mobile devices.

  • The mobile menu has to be set up even if you want the same menu as in the desktop site.

WordPress Mobile Pack

http://wordpress.org/extend/plugins/wordpress-mobile-pack/

  • Detects mobile User Agents and uses a mobile switcher combined with a number of mobile themes which you can choose from.

  • Can be integrated with the WP SuperCache plugin for speed.

  • Flexibility—can be used as a switcher.

  • Customization options via an options screen or by editing the theme's CSS.

  • Relatively fast to load on mobile devices.

  • Limited customization options.

  • Displays widgets.

Wapple Architect

http://wordpress.org/extend/plugins/wapple-architect/

  • Uses a third-party service to make existing theme mobile-friendly

  • Detects User Agents—which one it targets can be configured.

  • Requires a free license key.

  • Works with existing themes, so can carry styling through to the mobile site.

  • Resizes images for speed on a mobile site.

  • Requires a license key, although this is free.

  • Displays widgets.

Mobile Press

http://wordpress.org/extend/plugins/mobilepress/

  • Detects mobile User Agents and uses a mobile switcher combined with bundled themes to render the mobile site.

  • Switcher allows flexibility to use with your own theme.

  • Doesn't display menus—so limited use for sites with a static home page.

WP Mobile Detector

http://wordpress.org/extend/plugins/wp-mobile-detector/

  • Detects User Agents and uses a switcher to display a mobile theme. Comes with seven pre-installed themes.

  • A premium version is available with more customization options.

  • Switcher can be used to switch to your own mobile theme.

  • Seven mobile themes give a degree of choice.

  • The bundled themes are limited and not very attractive.

  • Doesn't display widgets.

  • Colors and logos can't be changed without upgrading to the premium version or editing the theme CSS.

Note

A mobile switcher is a plugin (or functionality within a plugin), which detects when the site is being viewed on a mobile device and automatically switches to a theme which the site administrator defines. It normally detects the User Agent to do this.

A User Agent is an application, which accesses a website. Generally, this refers to a browser, but it can include screen readers, spiders, or any other application or programs that access websites.

Having looked at some of the most popular plugins and how they work, let's try setting two of them up—WPtouch and WordPress Mobile Pack. WPtouch is the most widely used mobile plugin.

WPtouch is used on a huge proportion of WordPress sites, and so the chances are that if you use a mobile to browse the web, you've seen it on some sites without even realizing.

WPtouch has a premium version with extra functionality, but here we will be working with the free version, available at http://wordpress.org/extend/plugins/wptouch/. As of January 2012, this plugin had been downloaded nearly three million times, so that's a lot of websites!

Time for action—installing and configuring WPtouch


So, it's time to install WPtouch on our site! We could simply install the plugin and have a mobile site that's ready to go, but it's possible to configure some options to make it look and behave the way we want it to.

  1. 1. Install WPtouch, either by downloading the plugin and uploading it to your plugins folder, or via the plugins page on your WordPress dashboard.

  2. 2. To configure WPtouch, click on WPtouch in the Settings menu.

  3. 3. Start by configuring the General Settings, as shown in the following screenshot:

  4. 4. The General Settings screen gives you a few options. Let's look at the most relevant ones:

    • WPtouch Language: Leave this as Automatically detected to fit with the rest of your site

    • WPtouch Home Page: Change this if you want visitors on mobile devices to arrive at a page other than your home page while accessing the site. This might be useful if there is a page with information that mobile users will need quickly, such as location and opening hours.

    • Site Title: If your site title is very long, changing this will make it fit better on a small screen.

    • Excluded Categories and Excluded Tags: Add any posts, categories, and/or tags you don't want mobile users to see.

    • Text Justification Options: Use this to define whether you want the text left-aligned or justified. Justification can look neater but may make the text harder to read on a small screen, so isn't recommended for accessibility reasons.

    • Post Listings Options: You can choose to display calendar icons, thumbnails, or nothing next to each post on your main blog or any archive pages. You also have the option to turn off some of the metadata. For the Carborelli's site, we will turn off the author, categories, and tags metadata as the site is not a blog.

    • Footer Message: Edit this if you want a specific message. Unfortunately, this doesn't accept HTML so you can't add links.

  5. 5. Scroll down to the Advanced Options screen, as shown in the following screenshot:

    For the Carborelli's site we have disabled most of these options as the site is not a blog and we are using a menu that has been defined on the WordPress dashboard.

    Some of these options will be useful if your site has one or more of the following:

    • User login

    • An automatically generated menu

    • A Twitter link

    • Upcoming dates

  6. 6. Ignore the Push Notification Options. This is only relevant if you have a Prowl account. Prowl is a service that pushes notifications to an iOS device from a PC or Mac.

  7. 7. The Style & Color Options give you more control over the way your site looks. We can amend the background, H2 font, and colors to give our mobile site a look that more closely mirrors the desktop site:

    Here, we have amended the fonts and colors to reflect the colors used in the Carborelli's desktop site. You can do the same for your site.

  8. 8. We will ignore the advertising options as this site doesn't include any advertising. If you are using Google Analytics to track visitors to your site, you will need to add your tracking code here. This is because the header in our desktop theme, where the tracking code is normally added, isn't loaded on mobile devices.

  9. 9. If you have an image or logo that you want to use as an icon on your mobile site, upload it to the icon pool via the Default & Custom Icon Pool editor. For the Carborelli's site we have uploaded the company's logo as an icon, as shown in the following screenshot:

  10. 10. If you've uploaded an icon or want to edit the settings for the pages, use the Logo Icon // Menu Items & Pages Icons editor:

    As you can see from the previous screenshot, we've made some changes to the default settings to add some Carborelli's branding to the site and to add icons to our menu items.

  11. 11. Finally, click on the Save Options button at the bottom of the screen to save all your changes and then test your site on a mobile device.

What just happened?

There were quite a few options to go through, but we've now created a mobile version of the Carborelli's site, which has some of the styling from the desktop version and includes the content we need in it. The following screenshots show what the site would look like with WPtouch activated out of the box, and how it now looks with our styling tweaks on an iPhone:

So, thinking about our criteria for choosing a plugin, how did WPtouch do?

  • The site will be targeting smartphones, in particular iPhones and iPod touches, Android devices, and Blackberries. Access from other phones is not essential.

    WPtouch passed on this criterion; it targets a range of smartphones and other mobiles, and certainly works well on iOS, Android, and Blackberry.

  • The logo isn't crucial on mobile devices—it's more important for people to be able to get at the content.

    WPtouch displays our logo, which exceeds our criteria.

  • The site uses a widget area for the sidebar, making it easier for the client to update this information in the future. So yes, it's important that widget areas are displayed.

    WPtouch fails on this—it offers no option for displaying widgets. This means the location map on our site's home page isn't visible. One way to get round this would be by setting the Find us page as the home page for mobile devices.

  • Fine control over the styles isn't essential as long as the default style provided by the plugin is smart and images are displayed, as they will provide a lot of the visual cues.

    WPtouch looks smart and the layout works well across a variety of devices. It was possible to edit the colors and tweak some text styling.

  • Speed and size are important to reduce data transfer.

    WPtouch displays images smaller than those on the desktop site but actually downloads the same images. This could really slow down the site and annoy users who are paying for their data. The Google speed test gives the mobile Carborelli's' site a low score of just 33 out of 100. This is largely due to the fact that large images are being sent to mobile devices.

In summary, WPtouch, although a very powerful plugin with some very useful options, probably isn't the right plugin for the Carborelli's site because of the lack of support for widgets and the poor speed test results. How does it match up to the criteria for your site?

WordPress Mobile Pack—number two in the charts


WordPress Mobile Pack is nowhere near as popular as WPtouch, but it is the second most popular plugin for quickly making your site mobile-friendly and all of its features are included in the free version.

The plugin's description in the plugin repository claims that it includes a raft of features, including a mobile switcher, more than one theme, widget support, and a mobile admin panel. So let's try it out!

Time for action—installing and configuring WordPress Mobile Pack


So, let's install WordPress Mobile Pack and see how it compares to the hugely popular WPtouch:

  1. 1. On the plugin's screen, deactivate WPtouch (if it's active) before you start.

  2. 2. Install the WordPress Mobile Pack plugin, either by downloading it from http://wordpress.org/extend/plugins/wordpress-mobile-pack/ and uploading it to your plugins folder, or by using the Add plugin screen. Activate the plugin.

  3. 3. To access the various settings screens for the plugin, select the required screen from either the Appearance menu or the Installed Plugins screen.

  4. 4. Let's start with the switcher screen. Click on Mobile Switcher to access it:

    The most useful option on this screen is the Mobile theme chooser. We are given the option to select the base theme, which is largely monochrome, or a blue, green, or red theme. Alternatively, if we have a mobile theme of our own, we can select that instead, meaning we could use this plugin purely as a mobile switcher. This means we could use it to switch to a mobile theme that we design ourselves—something we will do in Chapter 8, Creating a Web App Interface. Spend some time experimenting with the different WordPress Mobile themes and identify which one looks best for your site.

    For the Carborelli's site we will stick with the base theme as this is the cleanest and most modern, although it doesn't reflect Carborelli's brand colors.

    After making any changes, click on the Save Changes button.

  5. 5. Now open the Mobile Theme screen, to make some tweaks to our selected theme:

  6. 6. As our site isn't a blog, but has a static home page, uncheck the Show home link in menu option. We will also do the following:

    • Change the Lists of posts show option to Title only, which will take up less space.

    • Make sure the Shrink images option is checked.

    • Set the Number of widget items option to at least as high a number as the number of widgets we're using in the site. The Carborelli's site uses two widgets so we will stick with the default value of 5 in case any more are added at a later date.

  7. 7. By clicking on the Launch ready.mobi link, we can see a report detailing how our site would perform on mobile devices with the selected theme activated. We can then make any changes needed to improve performance.

  8. 8. Make any other tweaks that are appropriate for the site—most of the settings are self explanatory. Click on the Save Changes button.

  9. 9. Having set the options for the themes, open the Mobile Widgets screen:

  10. 10. The Carborelli's theme uses a framework with a number of widget areas—your theme may not have as many. Select the widgets from your theme that you want to display on the mobile site. For the Carborelli's site we want to display both of the widgets in the Primary Widget Area. When you've made any changes, click on Save Changes.

  11. 11. Finally, test your site on a mobile device to see how it looks.

What just happened?

We installed and activated the WordPress Mobile Pack plugin and edited the settings to best suit our site and theme. This was a faster and more straightforward process than with WPtouch, but that was partly because the plugin doesn't include as many options as WPtouch. This is how the site now looks on mobile devices:

So, how did WordPress Mobile Pack fare against our criteria?

  • The site will be targeting smartphones, in particular iPhones and iPod touches, Android devices, and Blackberries. Access from other phones is not essential.

    WordPress Mobile Pack passed this one—it targets a range of smartphones and others, and works well on iOS, Android, and Blackberry.

  • The logo isn't crucial on mobile devices but there are images which are important.

    WordPress Mobile Pack doesn't display the logo but it does display widgets, meaning that our map is visible to mobile users.

  • The site uses a widget area for the sidebar, making it easier for the client to update this information in the future. So yes, it's important that widget areas are displayed.

    WordPress Mobile Pack gives us the option to display as many widgets as we need, so it passes this test.

  • Fine control over the styles isn't essential as long as the default style provided by the plugin is smart and images are displayed, as they will provide a lot of visual cues.

    The mobile site looks smart when using the base theme, but the colors in the other themes aren't very attractive. Unfortunately, this meant we were unable to introduce any brand colors for the Carborelli's site. However, by including images with elements of the brand in, or tweaking the CSS, we could get around this.

  • Speed and size are important to reduce data transfer.

    WordPress Mobile Pack shrinks images, creating an additional copy of them at a smaller resolution and delivering that to mobile devices. The Google page speed test gives this version of the site a score of 50 out of 100, which is better than WPtouch but still not as fast as the desktop site.

To summarize, I think that the WordPress Mobile Pack does a better job than WPtouch of delivering the Carborelli's content to visitors, specifically because it displays widgets and is faster. It's a shame the styles can't be tweaked, but in our example the content is more important.

Did WordPress Mobile Pack meet the criteria for your site?

Have a go hero

We've spent some time installing and configuring just two of the available plugins for making a site mobile-friendly. Have a look at the table given earlier in this chapter for some suggestions.

Summary


We learned a lot in this chapter about configuring some of the plugins that let us quickly make a site mobile-friendly.

Specifically, we learned how to identify our criteria for choosing the most appropriate plugin for a site and how to install and configure two plugins—WordPress Mobile Pack and the hugely popular WPtouch. We also learned that different plugins offer us different options and functionality, for example, WordPress Mobile Pack supports widgets while WPtouch has some nice options for colors and fonts, as well as for uploading logos and icons. The plugins can have a significant impact on the site's speed. While there are plenty of plugins that do this job, there are actually very few that do it very well.

Based on the criteria we have set, the most appropriate plugin for the Carborelli's site is WordPress Mobile Pack. None of the other two displayed the important widget areas, WPtouch made the site slow and Mobile Pack handled menus poorly. However, if your site doesn't contain widgets or a lot of images, you may find that WPtouch is the most appropriate with its myriad options and available tweaks.

When working with an existing desktop site, like Carborelli's, a plugin is often the quickest and easiest way to make the site mobile-friendly. But what if you don't already have a theme, or you're not too attached to the one that you have? That's where mobile-friendly themes come in, which is what we will learn about in the next chapter.

Left arrow icon Right arrow icon

Key benefits

  • Learn how to build mobile and responsive websites using WordPress
  • Get to grips with the best mobile plugins and understand how they interact with your site
  • Learn how to make your own WordPress theme or site responsive, including layout, images, navigation and more

Description

The chances are that more of your WordPress website visitors are using mobiles, or more clients are demanding responsive or mobile sites. If you can use WordPress to build mobile-friendly sites you can win more business from clients and more traffic for your site. "WordPress Mobile Web Development Beginner's Guide" will benefit you whether you've dabbled in WordPress or worked with it for years. It will help you identify which approach to mobile is most appropriate for your site (responsive, mobile, or web app) and learn how to make each one work, demonstrating a variety of techniques from the simple to the more complex, working through clear practical examples and applying these to your own website. Start by quickly making a WordPress site mobile-friendly, using off the shelf plugins and responsive themes, choosing the best ones for you and customising them. This leads into responsive theme design, with advice on layout, images and navigation. Finally, learn how to build a web app in WordPress, making use of plugins, APIs and custom code. If you need to hit the ground running with mobile WordPress development, then this book is for you. With practical examples and exercises from the beginning, it will help you build your first mobile WordPress site without having to learn aspects of WordPress or mobile development that aren't relevant. It will also help you understand which approaches work and why, so you can apply this knowledge to future projects.

Who is this book for?

If you have dabbled in WordPress or been working with it for years, and want to build mobile or responsive themes or sites, this book is for you. Even if you can't write a line of code, the first few chapters will help you create a simple mobile site. But to get the most from the book, you will need a good understanding of HTML, CSS and WordPress itself. This book is for owners of self-hosted WordPress sites, not sites hosted at wordpress.com.

What you will learn

  • Identify which approach to mobile development will work best for your site, by understanding the needs of the site and its visitors
  • Find out which plugins and pre-built responsive themes are best for quickly making a WordPress site work on mobiles, and customize them for your site
  • Install responsive themes and customise them to fit with your existing design or brand
  • Make your existing WordPress theme or site responsive, adjusting the layout and interface to look great on mobiles, including phones and tablets
  • Take responsive design further, with responsive text and navigation, for better ergonomics and user experience
  • Learn how to make images and other media responsive and reduce their file size on mobile devices using inbuilt WordPress functionality
  • Create an app-like site, with a design and interface resembling a native app
  • Access the functionality of the user s phone from the browser to create a WordPress web app, and learn which features you ll be able to use in future

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 24, 2012
Length: 332 pages
Edition : 1st
Language : English
ISBN-13 : 9781849515733
Languages :
Concepts :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Aug 24, 2012
Length: 332 pages
Edition : 1st
Language : English
ISBN-13 : 9781849515733
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just S$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total S$ 141.98
WordPress 3.7 Complete: Third Edition
S$66.99
WordPress Mobile Web Development: Beginner's Guide
S$74.99
Total S$ 141.98 Stars icon

Table of Contents

10 Chapters
Using Plugins to Make Your Site Mobile-friendly Chevron down icon Chevron up icon
Using Responsive Themes Chevron down icon Chevron up icon
Setting up Media Queries Chevron down icon Chevron up icon
Adjusting the Layout Chevron down icon Chevron up icon
Working with Text and Navigation Chevron down icon Chevron up icon
Optimizing Images and Video Chevron down icon Chevron up icon
Sending Different Content to Different Devices Chevron down icon Chevron up icon
Creating a Web App Interface Chevron down icon Chevron up icon
Adding Web App Functionality Chevron down icon Chevron up icon
Testing and Updating your Mobile Site Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.6
(5 Ratings)
5 star 60%
4 star 40%
3 star 0%
2 star 0%
1 star 0%
Juanjo Fernandez Nov 25, 2012
Full star icon Full star icon Full star icon Full star icon Full star icon 5
We live at a time when it's essential to make our websites or web apps accessible from several different types of devices: desktop computers with big screens, smartphones with small touchscreens, tablets, netbooks, televisions, consoles, etc.As a result, starting in the web development world is becoming more difficult for newbies. This book tries to make that path easier by doing a thorough explanation of all steps to be followed to make our websites or web apps more accessible.Going further into details on the book's contents, it has to be stressed that is focused to newbies, but to make the most of it is highly recommended to have experience with CSS. PHP isn't essential, although it helps. Nor is it necessary experience with WordPress, but if you've used before you will feel more comfortable following explanations.This book is part of the series "Learn by doing" by Packt Publishing, which means that it's eminently practical. It's advisable to read it in front of your computer and write, modify and experiment with the code you will find that is abundant.It consists of 10 chapters that I will comment below:Chapter 1: Starting with the basics, this chapter tries to make a website accessible using free WordPress plugins. We use an example website called Carbonelli's, which is an ice cream store, and we'll see continuously throughout the book. Rachel McCollin makes an exhaustive review of the five most used WordPress plugins to make a responsive site, explaining their pros and cons and installing and configuring two of them.Chapter 2: Using plugins is a valid option in some cases, but it has many limitations. If you need something more flexible, the next step is to use a responsive WordPress theme, which is the focus of this chapter. Again we find an exhaustive comparison of different responsive themes. Rachel walks you through the installation process and shows the result for desktop computers and mobile devices.Also install a theme switcher plugin type. These kind of plugins change the WordPress theme when they detect that the user is accessing from a mobile device.Chapter 3: So far, we have seen the possibilities we have to develop our responsive website without touching code, but this will change in this chapter that focuses on Media Queries. We start making our layout to fluid, changing the pixel dimensions to percentages, then we'll define breakpoints for desktop computers, tablets in portrait mode, smartphones in landscape mode and smartphones in portrait mode. Finally we'll create Media Queries for each of these breakpoints.Chapter 4: This chapter continues where we left off in the previous one and we'll play much CSS code. Basically we will make the necessary adjustments in Media Queries that we created for the Carbonelli's website to looks properly at any resolution. The process followed by Rachel is: shows a site's image before the changes, explains the necessary adjustments and the reason, shows the code to achieve our goal (change the font size, adjust width, margins, etc.) and finally shows a picture with the result. An extensive and very detailed chapter.Chapter 5: Now that we have a website with a responsive design for any type of device, it's time to improve the user experience (UX). To achieve this, certain adjustments are necessary in the theme, such as changing the font size, using ems instead of pixels, changing font type and modifying the navigation. All this according to the device's resolution.Chapter 6: One of the big issues to ensure a responsive design is to deal properly with images and video. The reason is that, unlike the rest of elements that make up a website, in this case isn't enough to fit the width with the layout, the real challenge is to ensure that the mobile devices doesn't download the images full size version while we only need to show a much smaller one. We all know that data consumption has a price in such devices when we are not using WiFi, so it's a very important issue for our users.Well, this chapter exactly focuses this and solve the problem using a plugin that allows you to serve different content based on the device.Chapter 7: Following improvements in user experience, now that we are able to detect the type of device accessing our site, we can provide data tailored for different devices. I have found it very interesting to know the kind of information searched by the users depending on the type of device that they are using.Chapter 8: This chapter explains, among other things, what's a web app and what options we have when converting a website into a web application. Then we will see step by step what we need to do in order to begin transforming the visual appearance of Carbonelli's website in a web application.Chapter 9: Once we have the web app visuals, we must change out app's functionality. Rachel starts by reviewing the different types of plugins that we can use: E-commerce plugins, geolocation, social media, etc. to finally explain how we can add a feature that allows our users to create and sell custom ice creams using PayPal as a payment method.Chapter 10: The last step before launching our web app is to test it in a variety of browsers and devices. This chapter shows us the different options we have to achieve it: using browsers' plugins that modify the browser size or change the User Agent, and use various mobile devices' emulators.In summary and as I said at the beginning of this review, it's a practical book that forces us to adopt an active attitude when it comes to reading. Isn't enough to sit back into your favorite couch, you have to roll up your sleeves and start writing code and experimenting. In addition, each chapter includes a brief test that will help us to check if we master the skills. At the end of the book we can find the solutions and explanations to each question.This is a book that, as the title suggests, is focused to newbies. Surely not make you an expert on the subject, but it's a great start to keep you learning about responsive design, something that are more and more important every day.Finally I must emphasize that, although the book focuses on modifying a website using WordPress, you will find content very useful even if you don't use this CMS, especially from chapter 3, which is when we started to modify CSS code.
Amazon Verified review Amazon
Bill Keevers Jan 17, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The author's website [...] has direct contact information. I wanted to emulate her sample WordPress site [...] so I could follow along more closely. After I e-mailed her, she sent me her Dropbox account so I could download all the files. Then when I experience an error, she e-mailed me that I needed to install the Mobble plugin [...]
Amazon Verified review Amazon
Chris Mills Oct 12, 2012
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Give your WordPress sites a boost!So many of us web developers and designers depend on WordPress to fulfil the needs of our customers, and it is often hard to find information on niche WP topics, especially things like making WP sites responsive. I know there are responsive themes available for WP, but that is only a small part of creating mobile-friendly sites.So I opened Rachel's book with anticipation, having read some of her work before on various web sites, and I wasn't disappointed. She covers pretty much anything you could possibly need to get started in this area in a friendly approachable style, starting from the basics and moving up to more complicated topics. She starts off by giving sound advice on using mobile plugins and themes - great, because there is such a lot to choose from out there. The next major section of the book looks at using media queries to optimise different facets of your layout, from general containers, to nav menus, to text.Then we get to the real meat of the responsive umbrella - responsive images. Rachel presents some pretty nifty techniques for making video and images responsive on a WP site, including serving different file size images, rather than just changing the display size.The rest of the book concludes nicely, with tips for creative web app interfaces for WP sites, dynamically altering the content sent to (or displayed on) different devices using server- and client-side technologies, and how to handle testing and updates. If you're a WP developer working in this day and age, you'll probably find a lot of useful stuff crammed inside these pages.
Amazon Verified review Amazon
Milan Petrovic Dec 19, 2012
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Book is split into 10 chapters. First chapter deals with use of plugins to deliver mobile version of a website. Step by step instructions are included for few popular plugins. Second chapter is about using responsive themes that use same theme for mobile and desktop viewing, adjusting layout to different screen size using CSS.Chapters 3, 4, 5 and 6 are dedicated to building a responsive theme from setting up media queries for different devices, setting the layout to follow the responsive approach, working with theme elements and optimizing content for smaller screens (images before all). Chapter 8 deals with the detection of the device visiting the page and different method for this.Chapters 9 and 10 are dedicated to web apps, and methods for building them, and what plugins and tools you can use to enhance the app. Last chapter is about testing the mobile websites without using devices, all through desktop simulators for different platforms.Chapters on web apps are lacking and they are missing the much needed information about different mobile platforms and specific aspects needed for such apps on different devices. There is only a list of websites for different mobile systems and nothing more. testing chapter is also lacking information for more popular mobile environments, most likely due to the fact that only Opera has real testing tools for its mobile browsers.This is very good book. It was written for beginners, and it delivers relevant information for various methods on making mobile friendly website. Step by step tutorials in it are great, easy to follow and understand. There are some things that maybe are not exactly for beginners, but even code and CSS examples are followed by a lot of explanations.
Amazon Verified review Amazon
4eyes Dec 14, 2012
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
This book comprehensively covers the options available to make a Wordpress site work well on all mobile devices - phones and tablets. Whilst aimed at the beginner, more advanced developers will find many useful tips and resources throughout the book. WordPress Mobile Web Development: Beginner's Guide starts with some simple steps a developer can take to enhance how his site will look on different devices. The meat of the book discusses what is meant by responsive design and how to provide a good user experience on all devices using more hands-on techniques. Native apps are discussed and what the developer can do to make use of a browser's in-built functionality. There is also a discussion on useful techniques and strategies for testing and debugging your site.Each chapter provides numerous resources for downloading and references for further research. Techniques are detailed via a step by step approach and accompanied by a good use of screenshots. Many of the chapters include pop quizzes for you to test your understanding and retention.The first two chapters address the resources available to make a wordpress site mobile friendly. There are a number of themes and plugins available to download, enabling the developer to quickly ensure their site works well on all devices. The book explains the different impact these resources have on both development and end result. The author walks the reader through the steps to implement responsive themes or plugins including a description of the options and how to use them.The next five chapters focus on the theory of responsive design and more advanced techniques to customise the mobile experience. Issues of accessibility, response times and ease of interaction are addressed both from a theoretical and practical perspective. The author repeatedly refers back to these issues to help the developer determine which technique is the most suitable to use.Specific chapters focus on the different aspects of a website - page layout, text, navigation, images and videos - and how to make them responsive. In these chapters, you will learn how to use media queries, optimize images as well as file size and adjust your layout depending on device size and orientation. The author identifies different strategies to employ depending on the objective of the page and offers solutions for different problems. For example if space is an issue for displaying the navigation, she suggests using an accordion effect or using a fixed position button to link to the navigation further down the page. You can download a sample chapter at [...]The 2 chapters on native apps provide a good overview on their pros and cons versus mobile sites. Immediate and longer term solutions for a developer to consider are identified and as in previous chapters, third party solutions are offered for further investigation. The final chapter on testing is excellent, providing invaluable techniques and resources for testing. Clearly testing on all mobile devices is challenging and this chapter provides a number of options.I highly recommend this book to beginning developers with a small caveat - experience with Wordpress is essential and knowledge of CSS is useful. More advanced developers and developers who do not use Wordpress will also benefit from the many resources and references discussed. My only criticism of this book is that, unlike some books, it does not provide the full code for the example site which would enable the user to properly try out all the code and techniques.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.