WordPress Mobile Web Development: Beginner's Guide


WordPress Mobile Web Development: Beginner's Guide
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
$25.49
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
$49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 332 pages [ 235mm x 191mm ]
Release Date : August 2012
ISBN : 1849515727
ISBN 13 : 9781849515726
Author(s) : Rachel McCollin
Topics and Technologies : All Books, CMS and eCommerce, Mobile, Beginner's Guides, Open Source, WordPress

Table of Contents

Preface
Chapter 1: Using Plugins to Make Your Site Mobile-friendly
Chapter 2: Using Responsive Themes
Chapter 3: Setting up Media Queries
Chapter 4: Adjusting the Layout
Chapter 5: Working with Text and Navigation
Chapter 6: Optimizing Images and Video
Chapter 7: Sending Different Content to Different Devices
Chapter 8: Creating a Web App Interface
Chapter 9: Adding Web App Functionality
Chapter 10: Testing and Updating your Mobile Site
Pop Quiz Answers
Index
  • Chapter 1: Using Plugins to Make Your Site Mobile-friendly
    • Before we start
    • Plugins or responsive design – what to choose
    • How do mobile plugins work?
    • Identifying the right plugin for our site
    • Time for action – identifying how your site should work on mobiles
    • Plugins that will make our site mobile
    • Time for action – installing and configuring WPtouch
    • WordPress Mobile Pack – number two in the charts
    • Time for action – installing and configuring WordPress Mobile Pack
    • Summary
    • Chapter 2: Using Responsive Themes
      • Mobile themes versus responsive themes
      • Identifying the best approach for your site
        • Options for developing a mobile site
        • Identifying the best approach for our site
      • Twenty Eleven – configuring the default WordPress theme
      • Time for action – configuring the Twenty Eleven theme
      • More responsive themes – installation and configuration
        • Scherzo – installation and configuration
      • Time for action – installing and configuring the Scherzo theme
        • Ari – another clean minimal theme
      • Time for action – installing and configuring the Ari theme
        • Codium Extend
      • Time for action – installing and configuring the Codium Extend theme
        • More responsive themes
      • Taking it further – using a responsive theme just for mobile devices
        • Showing visitors different themes on different devices – how to do it
        • Stage 1 – installing and configuring themes
        • Stage 2 – installing and configuring a theme switcher
      • Time for action – configuring the WordPress Mobile Pack plugin as a theme switcher
      • Summary
      • Chapter 3: Setting up Media Queries
        • What you will need for this chapter
        • Working with the WordPress Editor
        • Time for action – opening our stylesheet in the WordPress Editor
        • Creating a fluid layout
        • Time for action – digging into the Carborelli's layout styling
        • Time for action – making our site fluid
        • Moving on – planning for our media queries
          • Identifying our breakpoints
          • In what ways should a site be different on different devices?
        • Before setting media queries – getting the browser to behave
        • Time for action – adding the code to set our width correctly
        • Writing our media queries
        • Time for action – writing our first media query
        • Testing our fluid layout on a smartphone
        • Time for action – a media query for smartphones in landscape mode
        • Reviewing what we've done
        • Summary
        • Chapter 4: Adjusting the Layout
          • Need for adjusting the layout
          • Altering the layout of our header
          • Time for action – adjusting the header for iPads
          • Time for action – adjusting the header layout for phones in landscape mode
          • Time for action – adjusting the header layout for phones in portrait mode
          • Moving the sidebar below the content
          • Time for action – moving the sidebar below the content for tablets in portrait mode
          • Time for action – rearranging our widgets
            • Adjusting the layout for more than two widgets
              • Three widgets side by side
              • Four widgets in a grid
          • Time for action – tweaking the content and sidebar layout for phones in landscape mode
          • Time for action – rearranging the sidebar widgets for phones in portrait mode
          • Moving on to the footer
          • Time for action – changing our footer layout for phones
            • Altering the layout of a fat footer
          • Reviewing what we've learned about the layout for different screen widths
          • Summary
          • Chapter 5: Working with Text and Navigation
            • A note on testing
            • Optimizing text for small screens
            • Time for action – changing text settings
              • Why use ems ?
            • Time for action – setting up text sizing in our media queries
            • Time for action – adjusting the text size on phones in landscape mode
            • Optimizing fonts for mobile devices
            • Time for action – specifying different fonts for mobile devices
            • Optimizing navigation menus for mobile devices
            • Time for action – changing the layout of the menu on small screens
            • Time for action – changing the position of the navigation
            • Time for action – linking to the repositioned navigation
            • Summary
            • Chapter 6: Optimizing Images and Video
              • Making images fit into a responsive layout
                • Ensuring images don't stray outside their container
              • Time for action – making our images responsive
                • Resizing narrower images within the layout
              • Time for action – giving our images a percentage width
                • Using CSS to resize images – the hitch
              • Proper responsive images – sending different image files to different devices
                • Are mobiles always slow?
                • Setting up our responsive images
              • Time for action – editing the media settings
              • Time for action – installing the mobble plugin
              • Time for action – using PHP to display the featured image
              • Time for action – adding a featured image to each page
                • Featured images – the disadvantages
            • Adding video to our site
              • Displaying video – choosing a method
                • Using Flash
                • Inserting our video into the HTML
                • Using a service such as YouTube to stream video to our site
              • Streaming YouTube video responsively
            • Time for action – adding a video to our site
            • Time for action – adjusting the video width
            • Time for action – making our video responsive
              • But are these videos truly responsive? I hear you ask
            • Summary
              • Chapter 7: Sending Different Content to Different Devices
                • Mobile-specific content – some considerations
                  • Why send different content to different devices?
                  • What differences will there be for our mobile site?
                  • Methods to send different content to different devices
                    • Hiding content using CSS
                    • Delivering different content using PHP
                    • Mobile First
                • Using CSS to hide page elements
                • Time for action – hiding elements using CSS
                • Using PHP to send different content to different devices
                • Time for action – removing a widget using PHP
                • Adding a mobile-only menu to the site
                  • Identifying the changes we need to make
                • Time for action – setting up our mobile menus
                • Time for action – coding mobile menus into the theme
                • Time for action – styling the new mobile menus
                • Time for action – adding a select menu
                • Summary
                • Chapter 8: Creating a Web App Interface
                  • What is a web app and why would we develop one?
                  • Developing a web app – designing the app
                  • Choosing how to develop our web app
                    • Pros and cons of the different methods
                  • Creating a web app using a plugin
                  • Creating a web app using a responsive design
                    • Making a backup before we start
                    • Hiding elements to create our web app’s home page
                  • Time for action – hiding home page content
                    • Changing our web app’s design with CSS
                  • Time for action – adjusting the header layout
                  • Time for action – editing the site description
                  • Time for action – setting up our web app’s navigation
                  • Time for action – adjusting the footer layout
                    • Creating a responsive web app – review
                  • Using a mobile theme to create a web app
                    • Creating our mobile theme files
                  • Time for action – copying our theme files to create a new theme
                  • Time for action – editing our mobile theme files
                  • Time for action – uploading and activating our web app theme
                    • Using a mobile theme to create a web app – review
                  • Summary
                  • Chapter 9: Adding Web App Functionality
                    • What might we use a web app for?
                    • Current WordPress plugins for web apps
                      • Events, bookings, and management plugins
                      • E-commerce and subscription plugins
                      • Geolocation and mapping plugins
                      • Social media plugins
                      • Photography plugins
                    • Creating our ice cream sundae builder
                    • Time for action – adding a form to our web app
                    • Time for action – integrating with PayPal
                    • Time for action – providing the visitor with directions
                    • Outside WordPress – third-party APIs
                    • Summary
                    • Chapter 10: Testing and Updating your Mobile Site
                      • Testing your mobile site
                        • Testing on mobile devices
                        • Resizing our browser window
                      • Time for action – using an extension to resize the Chrome browser window
                        • Switching desktop Safari's User Agent to simulate an iPhone
                      • Time for action – switching our User Agent
                        • Using a website to test responsive layouts
                      • Time for action – testing your site on responsinator.com
                        • Using mobile browser emulators
                      • Time for action – setting up Opera Mobile Emulator
                      • Time for action – testing our site in Opera Mini Simulator
                      • Time for action – testing with the Ripple extension for Chrome
                      • Using a mobile device to update your website
                        • Using the WordPress app
                      • Time for action – setting up and using the WordPress app
                      • Summary
                      • Pop Quiz Answers
                        • Chapter 2, Using Responsive Themes
                        • Chapter 3, Setting up Media Queries
                        • Chapter 4, Adjusting the Layout
                        • Chapter 5, Working with Text and Navigation
                        • Chapter 7, Sending Different Content to Different Devices

                        Rachel McCollin

                        Rachel McCollin is a web designer and developer specializing in WordPress development. She discovered WordPress when looking for a CMS that made the transition from static HTML relatively straightforward, and hasn't looked back since. Rachel runs Compass Design, a web design agency based in Birmingham, England, but with clients across the UK and internationally. The agency was established in 2010 and quickly began specializing in building WordPress themes and sites, with a slant towards responsive themes. The agency now has a great team of designers and developers, including some WordPress specialists.
                        Sorry, we don't have any reviews for this title yet.

                        Code Downloads

                        Download the code and support files for this book.


                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        WordPress Mobile Web Development: Beginner's Guide +    SAP HCM - A Complete Tutorial =
                        50% Off
                        the second eBook
                        Price for both: €34.95

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • 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

                        In Detail

                        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.

                        Approach

                        Beginner's Guide

                        Who this book is 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.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Resources
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software