by Geoff Blake | Publisher: Infinite Skills | Release Date: March 2013 | ISBN: 9781771370745

In this WordPress Mobile Development training course from Geoff Blake, you will learn how to create websites using WordPress that look great no matter what device or screen size you are viewing them with. Responsive web design allows you to build and maintain one website, but have it respond according to the device that it is being viewed on. This tutorial will show you how to create a responsive website by way of customizing a WordPress template. Some experience and familiarity with WordPress and CSS is suggested in order for you to get the most out of this training. The core of responsive design lies in media queries, and that is where Geoff starts you off. You will learn how to setup media queries using CSS to detect what styles to apply to your website, based on the resolution of the device that is accessing the page. The training videos will show you how to create your high, medium and low resolution designs using wireframing, and then how to hand code each of those designs in WordPress, creating a website that responds to all kinds of mobile devices. By the time you have completed this computer based training course for mobile website design with WordPress, you will have a clear understanding of how to modify WordPress templates to make your site responsive to a wide variety of resolutions and devices. Working files are included, allowing you to follow along with the author throughout the lessons.

1. Getting Set Up
   • Welcome 00:01:13
   • A Look At What We Will Build 00:01:57
2. Responsive Design Basics
   • A Note About Geoffs Setup 00:02:50
   • Installing An Empty WordPress Theme 00:06:21
   • Creating Pages 00:03:57
   • Creating Posts 00:04:29
   • Setting Permalinks And Getting Images Organized 00:02:55
   • Setting Up The Low Resolution Media Query 00:05:38
   • Testing The Low Resolution Media Query 00:03:39
   • Setting Up The Medium Resolution Media Query 00:04:28
   • Testing The Medium Resolution Media Query 00:02:48
   • Setting Up The High Resolution Media Query 00:02:09
   • Testing The High Resolution Media Query 00:02:36
3. Building The HTML Structure
   • Building The Header Structure - Part One 00:05:14
   • Building The Header Structure - Part Two 00:03:51
   • Setting The Body Structure 00:06:21
   • Adjusting The Loop Structure 00:05:29
   • Setting The Footer Structure 00:03:12
4. Wireframing The High Resolution Layout
   • Getting Started With The High Resolution Layout 00:05:38
   • Applying Formatting To The Master Container 00:05:30
   • Setting Properties For The Layout Header 00:01:52
   • Formatting The Main Navigation Menu - Chapter 4 00:05:30
   • Formatting The Slideshow - Chapter 4 00:04:38
   • Setting Up The Content Boxes 00:04:04
   • Applying Formatting To The Loop - Chapter 4 00:03:46
   • Finishing Off With The Footer 00:01:31
5. Wireframing The Medium Resolution Layout
   • Setting Up The Medium Resolution Layout 00:07:53
   • Formatting The Header And Navigation Menu - Part One 00:04:31
   • Formatting The Header And Navigation Menu - Part Two 00:03:42
   • Applying Formatting To The Slideshow 00:04:05
   • Setting The Content Box Formatting 00:04:01
   • Adjusting The Loop 00:03:30
   • Finalizing With The Footer 00:03:09
6. Wireframing The Low Resolution Layout
   • Getting Started With The Low Resolution Layout 00:03:31
   • Setting Up The Master Container 00:02:29
   • Formatting The Layouts Header 00:02:00
   • Adjusting The Main Navigation Menu 00:03:56
   • Formatting The Content Boxes - Chapter 6 00:04:09
   • Applying Formatting To The Loop - Chapter 6 00:02:06
   • Finishing Up With The Footer 00:03:23
7. Initial High Resolution Formatting
   • Getting Started With The High Resolution Formatting 00:03:02
   • Applying Formatting To The Navigation Menu 00:04:05
   • Formatting The Content Box Contents 00:04:10
   • Controlling The Loop Headers 00:04:19
   • Formatting The Content Boxes - Chapter 7 00:03:43
   • Formatting The Footer Text 00:01:52
8. Initial Medium Resolution Formatting
   • Getting Started With The Navigation Menu 00:04:10
   • Formatting The Slideshow - Chapter 8 00:03:26
   • Formatting The Content Boxes - Chapter 8 00:02:45
   • Finishing Up With The Blog Loop Formatting 00:05:03
9. Initial Low Resolution Formatting
   • Formatting The Main Navigation Menu - Chapter 9 00:03:04
   • Formatting The Content Boxes - Chapter 9 00:02:44
   • Formatting The Loop Area 00:04:43
10. Adding Graphics
    • Getting Started With The Header 00:06:20
    • Setting Up And Adjusting The Slideshow 00:06:21
    • Adding A Background Graphic To The Content Boxes 00:02:52
    • Adding Content Box Header Graphics 00:06:18
    • Adjusting The Low Resolution Header Graphics 00:02:17
11. Wrapping Up
    • Thanks For Watching 00:00:48
    • About Geoff Blake 00:01:24