WordPress Mobile Web Development: Beginner's Guide Table of Contents


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

                        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
                        Sort A-Z