Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
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
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Half star icon 4.6 (5 Ratings)
Paperback Aug 2012 332 pages 1st Edition
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon RACHEL MCCOLLIN
Arrow right icon
$19.99 per month
Full star icon Full star icon Full star icon Full star icon Half star icon 4.6 (5 Ratings)
Paperback Aug 2012 332 pages 1st Edition
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

WordPress Mobile Web Development: Beginner's Guide

Chapter 2. Using Responsive Themes

So, we’ve had a look at some plugins that can quickly and easily make your site mobile-friendly. These are a really easy way to make your site work great on mobile devices, but if you’re anything like me, you’ll have noticed a couple of downsides. The first downside is that with a plugin, you get a mobile site that looks just like a lot of other mobile sites out there with very little opportunity to add your own design. And the other one is that it’s difficult to display all of the content from your site, especially if you’re using widgets and a custom header.

So, you want to overcome these limitations, but you’ve still got limited time and next to no budget to make your site mobile. What can you do? The answer may just be to use a pre-existing mobile or responsive theme.

To get to grips with responsive themes, in this chapter we’ll:

  • Learn about mobile and responsive themes, and the difference between them

  • Learn how responsive themes work and what they offer...

Mobile themes versus responsive themes


In the past, most site owners who wanted a mobile-friendly site would use a separate mobile theme for the site with a design specifically for mobile devices. Some would also use different mobile domains. In fact, this is what those plugins we learned about in the last chapter are doing.

If you’re using a mobile theme, you tell WordPress to switch themes if the visitor is using a mobile, and stick to the desktop theme if he/she’s using a—yes you’ve guessed it—desktop PC.

A responsive theme, on the other hand, uses the same theme and similar styling for both sites, but uses a combination of a fluid layout and media queries to make the layout and content different on different-sized devices. It doesn’t just work for mobiles; responsive themes can change the look of a site on tablets or on really large screens, too.

Note

Responsive design—key terminology

To get to grips with a responsive design, you’ll need to understand the following:

  • Fluid layout: This is a...

Identifying the best approach for your site


Before starting, it’s a good idea to think about your website, its content and functionality, and consider what the best approach might be.

First let’s look at the options available to us.

Options for developing a mobile site

There are five main options for developing a mobile site as follows:

  • Using a mobile plugin: This gives us a mobile-friendly site with the minimum of effort, but doesn’t give us much scope to incorporate our own design into the mobile site, as we saw in the previous chapter. Many mobile plugins also don’t target tablet devices.

  • Using an off-the-shelf responsive theme: There are a number of free responsive themes available in the WordPress plugin repository. In this chapter we’ll look at some of them and see how we can tweak them so that our mobile site is more consistent with our desktop site.

  • Using an off-the-shelf responsive theme for mobile devices and our existing desktop theme for desktop computers: We achieve this by using...

Twenty Eleven—configuring the default WordPress theme


Since Version 3.2, every installation of WordPress comes with the Twenty Eleven theme (http://wordpress.org/extend/themes/twentyeleven) already installed and ready to go with. And the great news is that it’s responsive. So let’s see how it looks when applied to the Carborelli’s site.

Time for action—configuring the Twenty Eleven theme


To configure the Twenty Eleven theme, perform the following steps:

  1. 1. Activate the theme. At the moment, we have a bespoke theme activated, so we need to activate the Twenty Eleven theme. Let’s do that by clicking on Themes in the Appearance menu, as shown in the following screenshot:

    So how does the Carborelli’s home page look now? First, we will see how it looks on a desktop, as shown in the following screenshot:

    Next, we will see it on mobile devices with screens narrower than 480px, as shown in the following screenshot:

    Hmm. It’s not quite right, but it doesn’t look bad. Can you spot the main changes Twenty Eleven has made to the site, compared to the original theme? They are as follows:

    • The widgets are missing. The map has disappeared because it was in a widget. There is a search box but it’s in the header.

    • A comments box has been added. We don’t want one of those on our home page.

    • A wide image has been added at the top, which isn’t relevant...

More responsive themes—installation and configuration


But of course, we’re not limited to Twenty Eleven if we want an off-the-shelf responsive theme. A search for the terms—mobile and responsive, in the WordPress theme repository at http://wordpress.org/extend/themes/ reveals 14 themes in total, so let’s have a look at some of them.

Scherzo—installation and configuration

Scherzo (http://wordpress.org/extend/themes/scherzo) was one of the first free responsive WordPress themes, released at the beginning of 2011. It includes options for the background and header, which give it some flexibility, but in my view its main selling point is the fact that it’s very clean and minimal, which would make it a great parent theme to add our own styling to using a child theme.

Time for action—installing and configuring the Scherzo theme


Let’s see what we can do with Scherzo. To install and configure the Scherzo theme, perform the following steps:

  1. 1. Start by downloading Scherzo and activating it on the Manage Themes options page. Out of the box, this is how the Carborelli’s site now looks on desktop computers:

    And here’s how it looks on mobile devices:

    The desktop version has quite a lot of white space, and the mobile version has a problem with text wrapping around the images. The issue with the wrapping around the images would have to be solved within a media query, which is outside the scope of this chapter. The white space can be easily fixed by changing the theme options.

  2. 2. The Header screen lets us upload a header image and change the color of the header font, so let’s do that first.

  3. 3. The Background screen gives us the option to change the page background, which results in less white space.

What just happened?

We installed Scherzo and made some changes to the...

Time for action—installing and configuring the Ari theme


Let’s try it out on the Carborelli’s site. To install and configure the Ari theme, perform the following steps:

  1. 1. Download Ari from http://wordpress.org/extend/themes/ari and activate it on the Manage Themes options page. Let’s have a look at what it does to our site without any tweaks, on each of the desktop, iPad, and mobile. The following screenshot shows the Ari theme on the desktop:

    The following screenshot shows how it looks on the iPad:

    Finally, our site with the Ari theme on a mobile looks like the following screenshot:

    As with Scherzo, there are some issues with wrapped text in the mobile version, but the changing column layouts are a nice touch across the different devices.

  2. 2. The next step is to make some design and branding alterations, which we can do via the Theme Options screen. Change the color of the header text, the page background, and the body text if you want. You can also upload an image to use as the logo—this...

Time for action—installing and configuring the Codium Extend theme


To install and configure the Codium Extend theme, perform the following steps:

  1. 1. Download Codium Extend from http://wordpress.org/extend/themes/codium-extend and activate it on the Manage Themes options page. So, how does it look out of the box on the Carborelli’s site? Let’s look at each of the desktop, iPad, and mobile renderings of the site. The following screenshot shows how Codium Extend looks on the desktop:

    The following screenshot shows how Codium Extend looks on the iPad:

    Finally, the following screenshot shows our site with the Codium Extend theme on a mobile:

    Hmm. The widgets seem to have gone a little awry. On the desktop, we have some extra widgets, and in the tablet and mobile version there are no widgets at all. The menu is in the wrong order, and finally the colors are nice enough but not consistent with our brand. Let’s fix each of these problems.

  2. 2. On the Widgets screen, there are two available widget areas...

Taking it further—using a responsive theme just for mobile devices


It may have occurred to you while working through this chapter that some of these themes give the Carborelli’s site a look and functionality that is great on mobiles. But, it’s a shame to lose the desktop theme with all its detail and elements such as the call to action button and contact details in the header.

It will probably also have occurred to you that some of these themes gave us a really quick and easy way to create a responsive site without writing any code.

So, what if we could have our cake (or our ice cream) and eat it? Is there a way to display the existing theme for desktop visitors, but display a responsive theme for mobile and possibly tablet visitors?

The great answer is yes, there is, and it involves the use of theme switchers.

Note

Do you remember what a switcher is, which we saw in Chapter 1, Using Plugins to Make Your Site Mobile-friendly? It’s a plugin that switches the site’s theme when someone visits it...

Time for action—configuring the WordPress Mobile Pack plugin as a theme switcher


To configure the WordPress Mobile Pack plugin as a theme switcher, perform the following steps:

  1. 1. Download WordPress Mobile Pack from http://wordpress.org/extend/plugins/wordpress-mobile-pack/ if you haven’t already, and activate it.

  2. 2. On the Mobile Switcher screen, select the responsive theme from the Mobile theme drop-down list. Here, we will select Ari, as shown in the following screenshot. Click on Save Changes.

  3. 3. Now, let’s see how the site looks, firstly on a desktop and then on a mobile. Note that the site will look the same on tablets as it does on the desktop, as the theme switcher is only activated for mobile devices. The following screenshot shows how the site looks on the desktop:

    The look of the site on the mobile is shown in the following screenshot:

What just happened?

Using a theme switcher plugin (WordPress Mobile Pack), we configured our site so that people visiting it on desktop PCs will see...

Summary


In this chapter we’ve started to work with the responsive design, by choosing and configuring a few responsive themes and testing them on our site.

We learned the difference between mobile and responsive themes, and the options available to us while choosing how to develop our mobile site. We also learned what to consider when choosing our approach and our theme, how to install and configure some free responsive themes, and how to combine an off-the-shelf responsive theme with a theme switcher to retain our existing desktop theme but improve the user experience on mobile devices.

But, this is just scratching the surface of what we can do with responsive themes. By building responsiveness into our own theme, we can retain all of the branding, design, and content we want for the Carborelli’s site, while ensuring that the site looks great on desktops, mobiles, and tablets. We can take it further by ensuring that mobile users don’t have to download large image files, and harness APIs and...

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 : 9781849515726
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Aug 24, 2012
Length: 332 pages
Edition : 1st
Language : English
ISBN-13 : 9781849515726
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 $5 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 $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 103.98
WordPress Mobile Web Development: Beginner's Guide
$54.99
WordPress 3.7 Complete: Third Edition
$48.99
Total $ 103.98 Stars icon
Banner background image

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

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.