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