IntroductionWelcome| 00:04 | Hi! I'm Joe Lowery.
Welcome to Dreamweaver and WordPress:
| | 00:07 | Building Mobile Sites.
| | 00:09 | I can't walk down a New York City street,
or take a subway ride without noticing
| | 00:14 | how everyone seems to be using their
phone to compare restaurant reviews, or a
| | 00:17 | tablet to catch up on the latest buzz.
In this course, we'll help you mobilize
| | 00:22 | your WordPress sites with Dreamweaver.
| | 00:24 | First, we'll put down a solid foundation,
so you can better understand what your
| | 00:29 | options are when it comes to
adapting your site for a range of screens.
| | 00:33 | I'll also give you the
complete rundown on media queries;
| | 00:37 | the basic CSS3 technology that allows
you to create responsive Web designs.
| | 00:43 | Next, we'll dive into the first of two
techniques for building mobile WordPress sites.
| | 00:49 | The first method, which uses WordPress
child themes is great for setting up sites
| | 00:54 | that require relatively few changes.
| | 00:57 | I'll show you how to optimize
your CSS for both tablet and phone.
| | 01:01 | Then, we'll spend the rest of the
course exploring a different methodology,
| | 01:05 | better suited for applying more extensively
custom designs, with multiple style sheets.
| | 01:11 | Along the way, I'll also show you how
you can set up your WordPress site in
| | 01:15 | Dreamweaver to use adaptive images
that incorporate screen-optimized graphics
| | 01:19 | resized on the fly, as well as
restructuring your navigation as your content
| | 01:24 | moves from large to small displays.
| | 01:27 | Please note that this course assumes
you're familiar with basic Dreamweaver and
| | 01:31 | WordPress functionality, and
the integration between the two.
| | 01:35 | Okay, let's get going with
Dreamweaver and WordPress:
| | 01:39 | Building Mobile Sites.
| | Collapse this transcript |
| About the exercise files| 00:00 | If you are a Premium Member of the Lynda
.com Online Training Library, you have
| | 00:05 | access to the exercise files
used throughout this title.
| | 00:08 | The information in this
course is ultimately intended to be applied
| | 00:12 | to your own Web pages.
| | 00:14 | However, you may find it helpful to
work with the supplied exercise files to
| | 00:17 | practice the steps safely, and
without creating your own examples.
| | 00:21 | To begin using the files from the site,
download them, extract them, and then
| | 00:26 | store those files in a
convenient location, such as your Desktop.
| | 00:29 | The Exercise Files folder is
organized by chapter, and in every chapter, it's
| | 00:35 | broken down into the
various movies that you'll see.
| | 00:38 | Within the movie chapters, there are a
series of files, typically assets, like
| | 00:43 | CSS style sheets, images,
source code files, and so forth.
| | 00:47 | In the video chapters, you'll also find
a Final folder, which contains the files
| | 00:52 | showing the completed lesson that you
can open up, and explore at your leisure.
| | 00:56 | Because we're working with WordPress,
which stores much of its information in a
| | 01:00 | database, it's best to follow the
course chapter by chapter in order to have
| | 01:05 | the most current data.
| | 01:06 | However, if you'd like to jump in at a
certain point, I've provided an XML file
| | 01:11 | for certain chapters, which you can
use to bring the data into WordPress'
| | 01:15 | database tables with the
WordPress Import feature.
| | 01:19 | The Import feature is found in the
WordPress Dashboard, under the Tools category.
| | 01:23 | If you're a monthly subscriber, or
annual subscriber to Lynda.com, you don't
| | 01:27 | have access to the exercise files,
but you can definitely follow along with
| | 01:31 | your own assets.
| | Collapse this transcript |
| Development environment requirements| 00:00 | Because WordPress is an application
that relies on PHP, and MySQL, you'll need
| | 00:05 | to set up a local development
environment to work with it.
| | 00:08 | While going through all of the steps to
create such a development environment is
| | 00:12 | beyond the scope of this course, I am
going to lay out the requirements, and give
| | 00:15 | you some pointers, including a
freely available Lynda.com course.
| | 00:20 | For WordPress to run, you'll need the
following setup on both your hosted site,
| | 00:24 | and your local system.
| | 00:26 | First, you'll need a Web server,
like Apache, or Microsoft's Internet
| | 00:30 | Information Server.
| | 00:31 | Then, you'll also need a PHP
server, version 5.2.4 or better.
| | 00:37 | Finally, you'll also need a
MySQL Server, version 5.0 or higher.
| | 00:42 | If you're working with a legacy
WordPress site that uses WordPress 3.1 or below,
| | 00:47 | you can go with earlier versions
of both PHP, and the MySQL Server.
| | 00:52 | Make sure that your Web site host meets
these requirements before you embark on
| | 00:56 | using WordPress for a site.
| | 00:58 | These days, you'll find that most of them do.
| | 01:01 | Now, if you haven't set up a local
development environment yet, and you need to,
| | 01:05 | there are several ways to go.
| | 01:07 | You can install the various components --
the Web server, the PHP server, and
| | 01:11 | the MySQL Server -- separately, or you
can install one of the several bundled
| | 01:16 | systems that are available.
| | 01:18 | There are three that I feel
comfortable recommending for most anybody.
| | 01:22 | The WampServer for Windows is good for
both 32-bit, or 64-bit systems. MAMP is
| | 01:28 | available for Mac OS X. When you go to
download it, you'll see that there is a
| | 01:32 | standard, and a pro version;
| | 01:33 | you really only need the standard version.
| | 01:36 | If you want one system for both
Windows and Mac, I'd recommend XAMPP.
| | 01:40 | Now, all of the bundled
systems come with PHPmyAdmin,
| | 01:44 | but if you're installing the components
separately, I'd recommend that you also
| | 01:48 | install PHPmyAdmin, or a
similar database manager.
| | 01:52 | If you'd like detailed explanations of
how to do this, see the freely available
| | 01:56 | course by David Gassner: Installing
Apache, MySQL, and PHP in Lynda.com's
| | 02:03 | Online Training Library.
| | 02:04 | Next, you'll need to set up WordPress locally.
| | 02:07 | For a detailed explanation, see my course,
Dreamweaver and WordPress: Core Concepts.
| | 02:13 | As an overview, here's what you need to do.
| | 02:15 | First, create a database in MySQL
with PHPmyAdmin, or a similar app.
| | 02:21 | Then copy your WordPress files that
you've downloaded from wordpress.org to a
| | 02:25 | new folder in your Web root.
| | 02:28 | In your browser, go to localhost/(folder name).
| | 02:32 | That will prompt the WordPress
application to put up a screen that says, looks
| | 02:36 | like you don't have a configuration file;
| | 02:38 | would you like to create one?
| | 02:40 | You click Yes, and then you're off to the races.
| | 02:43 | All you need to do is to enter the
database name, the server name, which is
| | 02:47 | typically localhost, and then
your username and password for MySQL.
| | 02:52 | After WordPress installs, the
final step is to create your
| | 02:56 | Dreamweaver environment.
| | 02:58 | For that, you set up a Dreamweaver
site pointing to your WordPress files, and
| | 03:03 | then also create a new
testing server in Dreamweaver.
| | 03:06 | You want to make sure to connect using
Local/Network settings, point to that
| | 03:12 | same site folder, and then switch over
to the Advanced Tab in the server setup,
| | 03:16 | where you can select the PHP MySQL server model.
| | 03:19 | After you've saved those settings, make
sure that you check the testing server
| | 03:24 | checkbox, and not the remote server.
| | 03:27 | Once your local development
environment is established, you'll be able to
| | 03:30 | create and develop WordPress sites,
as well as work with PHP and MySQL
| | 03:34 | separately in Dreamweaver.
| | Collapse this transcript |
| Setting up an existing WordPress site| 00:00 | Web designers wear many hats, and from
time to time, they're called to take over
| | 00:05 | and expand upon an existing site.
| | 00:07 | If you're working with a plain HTML
site, the handover can be as simple as
| | 00:11 | copying a set of files.
| | 00:13 | However, if you're working with a WordPress
site, life just got a little more complicated.
| | 00:18 | In this movie, I'm going to show
you the steps you need to take when
| | 00:22 | expanding an existing WordPress site
that's not your design, and along the
| | 00:26 | way, show viewers who would like to
use this course's exercise files how to
| | 00:31 | set up your local site.
| | 00:33 | This course assumes that you
already have a local PHP MySQL development
| | 00:38 | environment established.
| | 00:40 | The first step is to create a new database.
| | 00:43 | So I'm going to go over to phpmyadmin
up in my browser, and click Databases, and
| | 00:49 | then create a new database, and we're
calling this one tpa, which is short for the
| | 00:55 | site's company, Trans Planet Airlines,
and then a hyphen, mobile, and click Create.
| | 01:02 | It's very quick and easy.
| | 01:03 | Next, because this is going to be a
WordPress-centric site, I'm going to copy a
| | 01:08 | recently downloaded version of
WordPress into my local site root, which, because
| | 01:13 | I'm using WAMP server, is C:/wamp/www.
| | 01:19 | So let me go over to Windows Explorer,
and here in my Downloads folder, I have
| | 01:23 | my wordpress folder.
| | 01:25 | I'm just going to right-click, and then
copy that, and then go to C:/wamp/www, and
| | 01:35 | then paste in my copied folder.
| | 01:40 | I'll now rename wordpress to the site name.
| | 01:43 | For this course, it's DW_WP_Mobile.
| | 01:48 | Let's head back to the browser to
handle the WordPress installation.
| | 01:52 | I'll open up a new tab, and
go to localhost/dw_wp_mobile.
| | 02:01 | This is not case-sensitive, so you can
enter in in lowercase if you'd like; put a
| | 02:05 | Closing Slash, and then hit Return.
| | 02:07 | WordPress detects that we don't
have a wp-config file available.
| | 02:12 | All we need to do to start the
installation is click Create a
| | 02:15 | Configuration File. So I'll do that.
| | 02:18 | There is our information screen.
| | 02:20 | We've got all of these items ready.
| | 02:22 | So I'll click, Let's go!
| | 02:24 | Now let's enter in the name of
the database that we just set up.
| | 02:27 | That was tpa-mobile.
| | 02:31 | My username here is root.
| | 02:33 | I don't have a password set up for
this installation of WAMP server,
| | 02:38 | but it's my local development
system, so I feel okay about that.
| | 02:41 | My Database Host is localhost, and I'm going
to keep the Table Prefix at wp_. All right!
| | 02:47 | I'm ready to click Submit,
and then run the install.
| | 02:55 | I'll put in the site title,
which is Trans Planet Airlines.
| | 03:01 | Keep admin as the username, and enter
in a password, confirm that password, and
| | 03:09 | enter in my e-mail, and then I'm
going to deselect the Privacy checkbox.
| | 03:17 | Because this is a local development
site, there's no need for Google and
| | 03:22 | Technorati to search my site.
| | 03:24 | Now let's install WordPress, and Success!
| | 03:28 | Okay, let's go ahead and log in.
| | 03:30 | Enter admin as my username, and the password.
| | 03:35 | You'll get a welcome screen,
Dashboard, which you can go ahead and dismiss.
| | 03:39 | Now that we have WordPress up and
running, let's head on over to Dreamweaver
| | 03:43 | to set up the site.
| | 03:45 | Here in Dreamweaver, I'm going to
choose Site > New Site, and then name this site,
| | 03:50 | and this is going to be DW_WP_Mobile.
| | 03:54 | The Local Site Folder is the one that
we just copied over into the site root,
| | 04:00 | so I'll click the Browse for folder,
go to Computer, C: > wamp > www, and
| | 04:09 | double-click DW_WP_Mobile.
| | 04:13 | We want to make sure that select, and then
your folder name is shown; click Select.
| | 04:19 | Now, we need to go and set up
a local testing server as well,
| | 04:23 | so I'll click the Server
category, and then add a new server.
| | 04:28 | We'll name this server testing,
and I'm going to connect using the
| | 04:33 | Local/Network options.
| | 04:36 | Let's click on the Browse for folder
icon next to Server Folder, and it should
| | 04:41 | go right to the site root. That's perfect!
| | 04:44 | Click Select.
| | 04:46 | Now let's enter in our Web URL, which is
going to be http://localhost/ and then
| | 04:55 | the folder name: DW_WP_Mobile.
| | 04:59 | Again, it's not case-sensitive. All right!
| | 05:01 | Put in a closing Slash, or
let Dreamweaver do it for you.
| | 05:06 | Now one last thing: let's click on
Advanced, and then choose PHP MySQL from
| | 05:12 | the Server Model list.
| | 05:14 | Click Save, and here's that one
little gotcha that I was mentioning in
| | 05:18 | the previous video.
| | 05:20 | You want to make sure that you turn off
the Remote option here, and turn on Testing.
| | 05:26 | Okay, click Save.
| | 05:28 | Dreamweaver will open the site, and
update the site cache, and now we're ready to
| | 05:33 | incorporate some custom work that will
give us a solid foundation to work on.
| | 05:37 | I'm going to head on over to Windows
Explorer one more time, and go to my
| | 05:42 | Desktop, where I have my exercise files.
Open those up, and in the Introduction
| | 05:47 | folder, you'll find one for this movie: 00_04.
| | 05:51 | If you open that up,
you'll see three items there.
| | 05:55 | The first we're going to work with
is tpa, which if I expand it, you'll see
| | 06:00 | are files that belong in a WordPress theme.
| | 06:03 | So I'm going to go ahead and copy that,
and then head on over to my C:/wamp.
| | 06:12 | I'll just scroll down to www
there, and drill into my site.
| | 06:20 | All themes are contained in the wp-content
folder, and within that, in the themes folder.
| | 06:27 | So once I've expanded the themes folder,
I can right-click, and then click Paste,
| | 06:32 | and there is my tpa folder.
| | 06:35 | Now, we need to bring another folder
from the exercise files over, and we're
| | 06:40 | going to put it right here in wp-content,
| | 06:42 | and that's the Uploads folder.
| | 06:44 | So let me head back over to the Desktop;
Exercise Files > Introduction > 00_04, and
| | 06:54 | I'll select the Uploads folder.
| | 06:56 | The Uploads folder will contain images
that were used in posts of the existing site.
| | 07:01 | WordPress stores those in the wp-
content/uploads folder, in a date-oriented
| | 07:08 | folder structure, with a folder for each
year, and then within that, a folder for
| | 07:13 | any month that you upload a folder in.
| | 07:16 | So we're going to grab this entire
folder here, copy that, and then head back
| | 07:22 | to our site root, into our site, into the wp-
content folder, and then just paste that in.
| | 07:33 | You'll notice that there is no
Uploads folder to begin with.
| | 07:36 | WordPress doesn't create that
folder until you upload a file.
| | 07:40 | Okay; our Dreamweaver work is completed.
| | 07:43 | Let's go back to the WordPress Dashboard
one more time, and activate our custom theme.
| | 07:49 | Themes are found under the Appearance heading.
| | 07:51 | So I'll click Themes, and
| | 07:53 | here you see the Current Theme, which is
2011, and we also see our two Available Themes.
| | 08:00 | On the left is my custom theme, tpa,
and on the right is another default theme
| | 08:06 | that's installed by WordPress.
| | 08:07 | Let's go ahead and just activate the tpa
theme, and we can take a look at it, and see
| | 08:13 | how it is shaping up. All right!
| | 08:15 | That looks pretty good.
| | 08:16 | Let's go back to WordPress Dashboard,
because we have one more thing to do, and
| | 08:23 | that is to import the
data from the previous site.
| | 08:26 | You can do this directly through WordPress.
| | 08:29 | You have an Import tool that's
found under the Tools category.
| | 08:34 | So I'll click Import, and you
can import a number of things.
| | 08:37 | We want to import a WordPress
XML file, so click WordPress.
| | 08:41 | Now, this is the first time
that you've run it as it is here.
| | 08:45 | You'll need to install the importer.
| | 08:47 | So just click Install Now.
| | 08:49 | Once it has installed, click
Activate Plugin & Run importer.
| | 08:53 | Okay, we're ready to go
ahead and choose a file.
| | 08:58 | That file will be found in the
exercise files that we've been working with;
| | 09:03 | also in that same Introduction > 00_04
folder, and it's called tpa-mobile_start.
| | 09:13 | So select that, click Open,
and Upload file, and import.
| | 09:19 | Now, I'm going to go ahead and leave the
default options here, and just click Submit.
| | 09:23 | Now, you'll get a couple of
error messages. Those are okay.
| | 09:27 | The media that you see here, that it
says it has failed to import; that's why we
| | 09:32 | transferred over those files.
| | 09:34 | Okay, so let's just go take
a quick look, now, at our site.
| | 09:40 | There we see the default, Hello World!
| | 09:43 | message from WordPress, and a couple
of custom posts as well. All right!
| | 09:49 | I'm going to go to the post, and
just do a little bit of cleanup.
| | 09:53 | Let's get rid of Hello World!
| | 09:55 | by clicking Trash, and we'll go to the
Pages category as well, because they also
| | 10:02 | install a sample page. No need for that,
| | 10:04 | so let's get rid of that. Okay.
| | 10:09 | Let's do one final test in Dreamweaver
to make sure that our testing server is
| | 10:13 | up, and firing on all cylinders.
| | 10:16 | To test, I'll open up the index.php
file in our site root; go into Design View.
| | 10:25 | Let's discover our dynamically related
files to make sure everything is there.
| | 10:29 | You'll get a Script warning from Dreamweaver.
| | 10:32 | That's fine; click Yes.
| | 10:34 | It looks like all of our
files have been discovered,
| | 10:37 | so let's go into Live View,
and there's our site.
| | 10:42 | Excellent!
| | 10:43 | Everything is working as expected.
| | 10:45 | The techniques covered in this movie
are not only useful for taking over a
| | 10:49 | legacy WordPress site, but they can
also be applied when moving a site from one
| | 10:53 | Web host to another.
| | Collapse this transcript |
|
|
1. Preparing Your Site to Go MobileTargeting configurable site elements| 00:00 | When laying out a strategy to develop a
mobile WordPress site, it's important to
| | 00:04 | have a firm grasp of what your options are.
| | 00:07 | In this movie, I'll go over all the
various component elements of a site that
| | 00:11 | can be adapted for optimum
performance on a variety of screens.
| | 00:15 | To illustrate the concepts,
we'll take a look at some of the best
| | 00:19 | implementations of mobile Web sites.
| | 00:21 | So I have open here an Example_Sites
page, which can be found in the
| | 00:26 | Chapter 1 > 01_01 folder of the Exercise Files.
| | 00:31 | If you would like to open this up and
use it in your local site, be sure to save
| | 00:35 | it in your local site, or else
Dreamweaver won't be able to use it with the
| | 00:38 | testing server already set up.
| | 00:40 | So let's start with what is
perhaps the most basic element open to
| | 00:44 | mobile modification, and
| | 00:46 | that's the structure of
the page itself: the layout.
| | 00:49 | The number of columns, and
their width, can easily be adapted.
| | 00:53 | So I'm going to go into Live View here,
and then from Live View options, choose
| | 00:58 | Follow Links Continuously, so that we
can use Dreamweaver itself to demo the
| | 01:02 | various states of these
mobile-oriented Web sites.
| | 01:05 | Let's go to Boston Globe.
| | 01:07 | I think it's appropriate that the first
site we look at as an illustration for
| | 01:12 | mobile techniques was created in
consultation with Ethan Marcotte, whose article
| | 01:17 | on Responsive Web Design started a
revolution in mobile site development.
| | 01:22 | Here we see it in full screen, and
you can see, it's a multicolumn layout.
| | 01:27 | Now let me go to Window Size,
and let's go down to Tablet.
| | 01:32 | Now we're going to two
columns instead of three.
| | 01:35 | If I scroll down, you'll see
all the content is still there;
| | 01:39 | it's just laid out below
the existing two columns.
| | 01:44 | Let's go to Phone, and now
we're down to a single column.
| | 01:50 | You'll notice that the
content is being totally reflowed.
| | 01:53 | It's not like we just cut
off all the other columns.
| | 01:56 | The layout has been made more
suitable for a small screen design.
| | 02:02 | Now, to reinforce the concept of column
reconfiguration, here's a visual example
| | 02:07 | by a company called Made by Splendid.
| | 02:11 | Notice all the graphics here, and watch
what happens when I go to Tablet, and then
| | 02:20 | again, when we go down to Phone.
| | 02:28 | Another obvious candidate
for CSS modification is text.
| | 02:33 | Text sizes, both in headlines, and body
text, can either change size proportionally
| | 02:39 | if set in ems or percentages, or
expressly at specific breakpoints.
| | 02:43 | Here's a site that does both.
| | 02:45 | It's an Amsterdam-based
design firm: edenspiekermann.com.
| | 02:49 | So here we see it in Smart Phone view,
and you can get a sense of the easily
| | 02:55 | readable type size there.
| | 02:57 | Now, let's go on up to Tablet, and
things have changed a little bit.
| | 03:04 | You can see that they actually have a
manifesto here that opens and closes, which
| | 03:08 | is missing from the mobile phone design.
| | 03:12 | When we go to full size, the
text enhances significantly.
| | 03:17 | How can you use Dreamweaver to
tell that there is a big change?
| | 03:20 | Well let me expand my panels here, and
then I'll open up the CSS Styles panel,
| | 03:25 | and give it some room by closing Files panel.
| | 03:28 | Let's go into Inspect mode, and
take a look at some of the text.
| | 03:32 | So if I go into this top middle column here,
we can see that the font size is 1.6 em.
| | 03:39 | Let me change to Tablet again,
and now font size is 1.3 ems.
| | 03:45 | One more time; do Smart
Phone, and it stays at 1.3 ems.
| | 03:53 | You'll find, as you start to look
around, that there are definitely a number of
| | 03:56 | different philosophies and
strategies for handling text.
| | 04:00 | Sometimes people make the shift when
moving from a Desktop design to a tablet
| | 04:04 | design, and then don't when going from
tablet to phone, and others will skip
| | 04:09 | the transition when going to tablet, and only
make a change in font size when going to phone.
| | 04:14 | It really is totally up to the designer.
| | 04:18 | One of the page elements that really
cries out for adaptation is navigation.
| | 04:23 | While primary navigation may not change
when viewed on a tablet, it often does,
| | 04:28 | and should, on smaller screens,
like this one from Impact Dialing.
| | 04:32 | So here's our navigation up top here.
| | 04:34 | Let's go to Tablet size,
and pretty much identical.
| | 04:40 | Now, let's switch down to
Smart Phone, and totally different.
| | 04:45 | Let's look at one other site; a
designer site called D Construct
| | 04:50 | that updates the navigation
for both tablet and phone.
| | 04:54 | So here, when looking at the window
size for a mobile phone, you'll notice the
| | 04:58 | navigation uses small icons.
| | 05:01 | Let's head up to Tablet, and
now we're back to straight text.
| | 05:07 | And again, when going up to Full Size,
the text gets a little bit larger.
| | 05:12 | A subtle difference, but
still pretty significant.
| | 05:15 | Many designers take advantage of the
bigger canvas of the Desktop screen with
| | 05:19 | large-scale background images.
| | 05:21 | These backgrounds can look great on the
Desktop and tablet, but overwhelm the small screen.
| | 05:27 | On this site, CalebAcuity, they
handle it by dropping out this
| | 05:31 | large-scale background.
| | 05:34 | They keep it for the tablet.
| | 05:36 | Now, Dreamweaver seems to have a
problem with this particular Web site when
| | 05:40 | switching the document window to phone size.
| | 05:42 | So let me show you this in Chrome,
and I'll just drag the width of the
| | 05:46 | window, and here you can see it
resizing using ems, but watch what happens
| | 05:51 | when we get to a certain width.
| | 05:53 | The background image goes away, and
is replaced by a totally different
| | 05:58 | navigation experience.
| | 06:00 | What about foreground images?
| | 06:03 | In many ways, they're a much bigger
headache than backgrounds, primarily because
| | 06:08 | there is no pure CSS method for
adjusting sizes automatically, or even using
| | 06:13 | media query breakpoints.
| | 06:16 | Designers working with WordPress sites
are lucky, however, because WordPress is a
| | 06:20 | PHP application, and there is a
programmatic method for outputting
| | 06:24 | appropriately sized images on the fly.
| | 06:27 | We'll cover the technique in a later
video called setting up adaptive images,
| | 06:31 | but I wanted to show you an
example of what's possible.
| | 06:34 | Here's a site from Wales called dolectures.com
that uses adaptive images very effectively.
| | 06:41 | So, we're in Tablet View now.
| | 06:44 | Let's switch over to Full Size, just so
you can see the change in image size.
| | 06:50 | Then let's go to Smart Phone 320x480.
| | 06:53 | Now, these are not just the browser
resizing the images; it's actually new
| | 06:59 | images being created on the fly.
| | 07:01 | Well, let's flip back to Full Size, and
we'll cover one final element, and that's
| | 07:07 | the 800 pound gorilla in
the room: the content itself.
| | 07:11 | I'm going to go to Glue Isobar's site.
| | 07:14 | You'll find that some designers take
a hard look at how the site they are
| | 07:18 | working on is being used on various
screens, and then structure it accordingly.
| | 07:23 | Take, for example, this site
from creative agency, Glue Isobar.
| | 07:27 | When moving from Desktop to tablet,
the content merely rearranges itself.
| | 07:33 | However, when viewed on a Smart Phone,
entirely new elements emerge that point up
| | 07:38 | the most frequently required aspects of
their site. Their address, complete with
| | 07:43 | map, and phone numbers are right up top.
| | 07:47 | I hope you found this overview of what's
possible in mobile Web site design to be
| | 07:51 | beneficial, and maybe even a tad inspirational.
| | 07:54 | Now that you understand the overarching
concepts, you're ready to tackle the CSS
| | 07:59 | mechanism that powers these changes:
| | 08:01 | media queries.
| | Collapse this transcript |
| Understanding media queries| 00:00 | There's an ever-growing proliferation of
internet capable devices, with an almost
| | 00:05 | dizzying variety in screen sizes, and
resolution, and Web designers everywhere
| | 00:11 | owe a debt of gratitude to the W3C
working group, who developed the media query
| | 00:16 | specification for CSS3.
| | 00:18 | A media query allows specific CSS
rules, or external style sheets, to be
| | 00:25 | applied conditionally.
| | 00:26 | You can, for example, start with a basic
Desktop design, and then use one set of
| | 00:32 | CSS rules if the width of the display
screen is at a minimum 768 pixels, like an
| | 00:39 | iPad or other tablet, and another, if
the screen is at least 320 pixels, like an
| | 00:45 | iPhone or Android device.
| | 00:47 | In fact, you can have as many CSS
style sheets for as many different screen
| | 00:52 | sizes as you can handle.
| | 00:54 | So what does the media query code look like?
| | 00:57 | Well, if you're incorporating entirely
different external style sheets, it's a
| | 01:02 | link tag with an enhanced media attribute.
| | 01:06 | Here's the code to pull in a
style sheet for a standard tablet.
| | 01:10 | Note the min-width and max-width named
value pairs within the media attribute.
| | 01:16 | The min-width and max-width properties
are supported across all modern browsers
| | 01:20 | that you'll find on mobile devices.
| | 01:22 | There are other conditional media
attributes, like orientation as well.
| | 01:28 | Now, you don't always have to
work with external style sheets.
| | 01:31 | Using the @media statement, you can
conditionally apply properties and values.
| | 01:36 | Here's the code for adding styles to a
small sized screen in an @media statement.
| | 01:42 | So that's all well and good in the
abstract, but how does one go about designing
| | 01:46 | for multiple screens?
| | 01:47 | Dreamweaver has developed a very
easy to use interface called the
| | 01:52 | Multiscreen preview.
| | 01:53 | We'll get to the specifics of
working with the Multiscreen preview when
| | 01:57 | creating WordPress sites later in the course,
but I wanted to introduce you to the feature.
| | 02:02 | I am going to click Multiscreen up
here in the top bar, and here you see what
| | 02:07 | is perhaps the world's largest dialog
box, and this offers us three different
| | 02:12 | views of the same Web page.
| | 02:14 | The Desktop version is found on the
bottom, the Tablet on the upper-right, and
| | 02:19 | Phone on the upper-left.
| | 02:20 | This interface not only previews the
final results of your media queries, but it
| | 02:25 | also allows you to set them up.
| | 02:27 | So if I click the Media Queries
button here, another dialog appears.
| | 02:32 | Now, if you're using Dreamweaver CS5,
you've got a more basic interface when you
| | 02:37 | click Media Queries.
| | 02:38 | Both versions -- CS5, and CS5.5 -- do
essentially the same thing: allow you to define
| | 02:45 | widths where a specified
CSS style sheet is invoked.
| | 02:48 | In Dreamweaver CS5.5, you can also
choose to write your media queries into a
| | 02:53 | master CSS file, or the current HTML doc.
| | 02:57 | One other difference is that you can
opt for Dreamweaver to insert a meta-tag
| | 03:02 | that forces devices to use their true width.
| | 03:04 | That's this option right here.
| | 03:07 | If you don't include this code,
mobile devices, like the iPhone, will
| | 03:10 | automatically scale your site as if
it had a larger width, and you won't get
| | 03:15 | the anticipated design.
| | 03:17 | If you're working with
Dreamweaver CS5, you can code this by hand.
| | 03:21 | Finally, in Dreamweaver CS5.5, you
have the option to create additional media
| | 03:27 | queries right in the
interface that you see here.
| | 03:29 | Dreamweaver CS5 users will have to code
any additional media queries manually.
| | 03:35 | Luckily, once you see a few examples,
the syntax is pretty easy to understand.
| | 03:41 | Media queries are at the heart of a
mobile Web development strategy, and you'll
| | 03:45 | be seeing a lot of them as we
create our mobile WordPress sites.
| | Collapse this transcript |
|
|
2. Retrofitting for Multiple ScreensSetting up a child theme | 00:00 | In this chapter, we will cover the
first of two techniques for creating a
| | 00:04 | mobile WordPress site.
| | 00:06 | The other technique, which begins with
Chapter 03, is for more robust mobile-first designs.
| | 00:12 | The method described in this chapter
is best used for retrofitting a Desktop
| | 00:16 | design to create the look and
feel for tablets and phones.
| | 00:20 | Although both techniques make use of
media queries, this strategy relies on the
| | 00:25 | @media statements, and
importantly, WordPress child themes.
| | 00:30 | Let me start by opening up the
style.css for our current theme, TPA.
| | 00:36 | So I will go to the Files panel, open
up wp-content > expand themes, and then open
| | 00:44 | up our tpa folder; double-
click on style.css to open it.
| | 00:52 | Now you know, when you install a new
WordPress theme, it is maintained in it's
| | 00:57 | own subfolder, found within wp content themes.
| | 01:01 | Just like 2011 or the custom
theme we are using now, TPA.
| | 01:06 | Minor revisions can be made to the
style.css file located within the
| | 01:11 | specific theme folder,
| | 01:12 | but if you ever upgrade the theme,
you risk losing those changes,
| | 01:16 | so the concept of child themes was born.
| | 01:19 | As the name implies, a child theme can
inherit styles from the parent, while also
| | 01:25 | establishing its own.
| | 01:27 | To create a child theme, you need to
create a new folder in the themes folder,
| | 01:32 | so I am going to right-click on themes
in the Files Panel, choose New Folder, and
| | 01:39 | I am going to name that mobile.
| | 01:41 | And then, within mobile, all a child
theme actually needs to be recognized by
| | 01:45 | WordPress is its own style.css file.
| | 01:48 | Although, you can add images, functions,
separate pages, just as you would any other theme.
| | 01:53 | So let's create that CSS file now.
| | 01:56 | I will go to File > New > Blank Page in
the first column, CSS under Page Type,
| | 02:04 | and then click Create.
| | 02:06 | Let's go ahead and save this in our
new mobile folder. I will go to the site
| | 02:15 | root, and then drill down to wp-content
> themes > mobile, and we want this to be
| | 02:22 | named the same standard name that you
always use, which is style.css; Save it.
| | 02:30 | Now we need to get rid of this code up
top here, because in order to be properly
| | 02:35 | recognized as the style sheet for a theme,
we have to start with the CSS comment
| | 02:40 | properly structured for WordPress.
| | 02:42 | Let's go back to our TPA style.css.
| | 02:46 | I am just going to copy this opening
comment here, pressing Control+C on the
| | 02:50 | PC, and of course Command+C on a Mac, and then
Control+V to paste it, Command+V, of course, on a Mac.
| | 02:57 | Now, most of this stays the same,
| | 02:59 | but you do need to make a couple of changes.
| | 03:01 | You need to change the name, so instead of
TPA Theme, I'm going to call this TPA Mobile.
| | 03:08 | Everything else can stay the
same if it's still accurate,
| | 03:11 | but you need to add one more line, and
that is the template line, which indicates
| | 03:17 | which parent to use.
| | 03:19 | So you put in the keyword Template,
followed by a colon, and then a space, and
| | 03:24 | now you want to write in, not the name
of the theme, as you might expect, but
| | 03:28 | rather, the theme's folders name.
| | 03:30 | So in this situation, we are going to be
linking it to the theme that's in the folder tpa.
| | 03:38 | So, here I'll just put in tpa, and save my file.
| | 03:44 | A child themes style sheet completely
replaces the style sheet of the parent.
| | 03:49 | So, if you're not doing a complete
overhaul, and one of the benefits of doing a
| | 03:54 | child theme is that you don't have to,
| | 03:56 | the first thing you'll want to do
is import the parent style sheet.
| | 04:00 | So now I'm going to add my @import
statement, and we will use the URL parameter
| | 04:06 | to point to the style.css file
located in the tpa theme folder.
| | 04:11 | So @import, space, url, open parenthesis,
single quote, and we are going up
| | 04:21 | a directory ../tpa/style.css.
| | 04:29 | And then let's close that
parenthesis, and put a semicolon.
| | 04:33 | Okay, we will save our file, and now
we're ready for the last step in setting up
| | 04:38 | our child theme: activation.
| | 04:41 | So here we are in the Dashboard.
| | 04:43 | Let's go to Appearance > Themes,
and there you see the child theme.
| | 04:49 | Notice that we don't have a graphic
for this. That's because we don't have an
| | 04:53 | image named screenshot within
the mobile folder, but that's okay;
| | 04:57 | we don't really need one. And I will
just scroll down a little bit, and here you
| | 05:01 | can see a little more of a
description of how child themes work.
| | 05:05 | WordPress says, the template files are
located in the themes/tpa folder, while
| | 05:11 | the styles sheet files are
located in themes mobile.
| | 05:14 | And then it goes on to say that TPA mobile
uses templates from TPA Themes. All true.
| | 05:19 | All we need to do now is to click Activate.
| | 05:23 | Okay, this part of our work is done.
| | 05:25 | You will find that child themes are
pretty straightforward to set up, and as you
| | 05:29 | will see, the perfect vehicle for your
mobile designs; pun slightly intended.
| | Collapse this transcript |
| Integrating media queries| 00:00 | In the Chapter 1 video, Understanding
Media Queries, I mentioned that there were
| | 00:04 | two ways to apply media queries:
| | 00:06 | with a link tag, or with an @media statement.
| | 00:09 | In this movie, we will follow the @
media route to create the necessary media
| | 00:13 | queries for this technique.
| | 00:15 | The conditional @media statement
goes directly into the style.css file we
| | 00:20 | created for our child theme in the
previous movie titled Setting Up a Child Theme.
| | 00:26 | Before we can dive into the CSS,
there is one bit of essential
| | 00:30 | housekeeping, however.
| | 00:32 | To make sure that our mobile devices
are reporting the proper width, we will
| | 00:36 | need to add a meta tag to the header.php file.
| | 00:40 | So over to the Files panel we go,
drill down to the tpa theme folder.
| | 00:47 | Then when you find the header.
php file, double-click that.
| | 00:51 | Whenever you are working with a child
theme, WordPress always uses the files
| | 00:56 | that are found in the parent theme
folder, unless there is a file with the same
| | 01:01 | name, in which case that overrides the
file functionality in the parent theme.
| | 01:06 | Since we don't have a header.php in
our child theme, any changes that we make
| | 01:11 | here will apply to the activated child theme.
| | 01:15 | So right after the title tag, I am
going to place my cursor there, hit Return,
| | 01:20 | and now I am going to enter in a
meta tag with the name of viewport.
| | 01:25 | This is a fairly recent tag, and that's
why Dreamweaver CS5.5, at this point, does
| | 01:31 | not have support for it in code hinting.
| | 01:33 | After you've entered in the name, we
enter in another parameter, content, and
| | 01:37 | this content is a name value
pair that sets the width property.
| | 01:42 | So you enter in width, followed by an equals
sign, and then the first of two arguments.
| | 01:47 | In this case, we are going to
set the width to a system variable
| | 01:51 | called device-width.
| | 01:54 | The device-width parameter tells the
browser to use the width of the device as
| | 01:58 | the width of the viewport, instead
of the default number of pixels.
| | 02:02 | Now, let's add one more argument,
and that's the initial scale.
| | 02:07 | So put a comma, and then
right after it, initial-scale=1.
| | 02:14 | Setting initial scale to 1 determines
the zoom level, and stops the mobile device
| | 02:19 | from zooming in or out.
| | 02:21 | Let's close off the meta tag, put a space,
a slash, and then closing caret. Okay.
| | 02:28 | We are ready to turn to our CSS style
sheet now, and add in our @media statements.
| | 02:34 | I will save this file, and then go back
to the Files panel, and from the mobile
| | 02:41 | folder, double-click on
style.css to open that up.
| | 02:44 | After the @import statement, let's put a
couple of lines, and add our first media query.
| | 02:51 | It starts with an @media keyword,
followed by a space, and then the parameter
| | 02:56 | screen, telling it what type of media
to use, and now a logical operator, and,
| | 03:02 | followed by, in parentheses, the
minimum width value, and instead of minimum
| | 03:07 | width, you write in min-width.
| | 03:09 | Our minimum width is going to be 321 pixels.
| | 03:14 | Now, another and, followed by the
maximum width, which will be 768 pixels. Close
| | 03:21 | the parentheses, and then we will
put an open curly brace, couple of line
| | 03:26 | returns, and a close curly brace.
| | 03:28 | Now, what we have just created is a
media query for a tablet, where it has a
| | 03:35 | minimum width of 321 pixels, which is
just 1 pixel more than that of a phone, and
| | 03:41 | a maximum width of 768 pixels. All right!
| | 03:45 | Let's do another one, and
we will do one for our phone.
| | 03:48 | So I will add in a couple of spaces there.
| | 03:51 | So it's the same syntax, except we
will set the maximum width to 320 pixels,
| | 03:56 | with no minimum width.
| | 03:58 | Let's go ahead and save our page.
| | 04:00 | So, do we need to post these pages, and look at
them on a mobile device, or set up an emulator?
| | 04:06 | Nope; Dreamweaver has a built-in
method for displaying the results of
| | 04:10 | conditional @media statements,
| | 04:12 | but we do need to add some
styles, so we can be sure it's working.
| | 04:16 | As a quick test, I am going to add
different background colors to the
| | 04:20 | outerWrapper div selector.
| | 04:22 | Okay, for our tablet, I will put in an
outerWrapper selector, and then within
| | 04:27 | that selector, a background
color of green. All right!
| | 04:30 | Let's copy that, and paste it in our
telephone query, and we will make this one yellow.
| | 04:40 | That should be graphic enough for us to
tell the difference, don't you think?
| | 04:43 | Now, I will save my file again, and
now I will open up the index.php file for
| | 04:51 | the site, which is found in the site
root, go into Design, and then Live View,
| | 04:58 | and there is our design.
| | 05:00 | So now let's go to the Window Size list, which
is found in the lower-right of the Status Bar.
| | 05:06 | Now, when I click on it, it will
show me all the available sizes, with a
| | 05:10 | checkmark next to the current sizes.
| | 05:12 | So we're at Full Size, in Landscape orientation.
| | 05:16 | You will note that Dreamweaver CS5.5
shows a very targeted list of window sizes,
| | 05:22 | including those for tablets and phone.
| | 05:25 | This feature is not available in CS5.
| | 05:27 | However, you can use
preferences to create a similar list.
| | 05:31 | Just choose Edit Sizes
at the bottom of the list.
| | 05:34 | So let's go ahead and try our tablet.
| | 05:38 | There is our green background color.
| | 05:40 | So it looks like that's working.
| | 05:42 | Now, let's give the phone a shot,
and there is our yellow background.
| | 05:48 | Nothing else has changed, of course.
| | 05:50 | So you would have to do an
awful lot of scrolling to see it in
| | 05:54 | this configuration,
| | 05:55 | but we will get to making
those modifications shortly.
| | 05:57 | Now, let me go back to Full Size, and I
want to show you that you can also just
| | 06:04 | grab the corner, and resize the window.
| | 06:07 | In order to move out of Full Width mode,
and make our window resizable, I am
| | 06:11 | going to click the Window gadget in
the upper-right, and now I should be able
| | 06:14 | to resize the window.
| | 06:16 | And as I reduce the sizes of window,
once I get to 768 pixels, the media query
| | 06:22 | for tablet kicks in, and my
background color shifts to green.
| | 06:25 | Now, let's keep going, and you
can watch the status bar here.
| | 06:30 | There is the dynamically changing window size.
| | 06:33 | So when I get to 320, it's working
exactly as it should, and we have this
| | 06:38 | lovely yellow background.
| | 06:40 | So let me expand the window one more time,
and you will notice, up on the related
| | 06:45 | file bar, that I have two style sheets;
| | 06:47 | the first one is my TPA theme style sheet,
and the second one is the style sheet
| | 06:54 | for my child template, mobile.
| | 06:56 | So we can click on that, and we are just
going to go ahead and remove these colors.
| | 07:00 | We'll leave the outerWrapper
properties, because we will be using those later,
| | 07:07 | and now we are ready to start adding
actual styles to our @media statements.
| | Collapse this transcript |
| Changing tablet styles| 00:00 | Restyling a Desktop design to fit the
tablet form factor is, relatively speaking,
| | 00:05 | pretty straightforward.
| | 00:07 | A tablet in portrait mode is
typically about one third the width of the
| | 00:10 | corresponding Desktop design.
| | 00:12 | To make this adjustment, you generally
have to alter just a few key CSS rules,
| | 00:18 | like those affecting the overall
wrapper, as well as any content columns.
| | 00:22 | Depending on the design, you may also
need to slightly scale back the text size,
| | 00:27 | as you'll see with our example.
| | 00:29 | Let's change the window size to Tablet,
and then work our way from the outside in,
| | 00:35 | starting with the body.
| | 00:37 | So, I'm going to click on style.css,
which you'll recall is the style sheet for
| | 00:42 | our child theme, and within the @media
statement for tablet, I'm going to put one
| | 00:47 | rule up above our existing outerWrapper
rule, and that's a rule for the body.
| | 00:54 | So let me enter in the body selector.
| | 00:56 | And I want to change the font size here.
| | 01:00 | Currently the font size is 1.2ems, with
a line height of 1.4em, and that's just a
| | 01:07 | little bit too hardy, shall we say,
for the tablet, especially in portrait.
| | 01:12 | So let me go ahead and reduce those
a little bit. I'll make it
| | 01:16 | font-size 1em, and then line-height 1.2em.
| | 01:20 | Now, you can see an immediate effect
| | 01:24 | if you just click into the document
window, so this way, you can kind of go
| | 01:28 | back and forth between previewing your document,
and the style sheet that you're working on.
| | 01:34 | All right!
| | 01:35 | So we're ready to change the outerWrapper,
and this will control the overall width.
| | 01:40 | I'm going to give it a width of 688
pixels, because I want to have some of the
| | 01:45 | sky area appearing around it.
| | 01:47 | So within the outerWrapper, let's make
the width 688 pixels, and now if I click
| | 01:54 | in here, again, an immediate effect.
You also begin to see some of the
| | 01:58 | problems that you're going to have
to deal with, like the navigation bar.
| | 02:02 | Now, if you're not sure what the CSS
rule is that you need to work with, you
| | 02:06 | can always turn on Inspect mode, and then go
down to the area that is giving you the problems.
| | 02:13 | I'm going to hover over planets, here,
and then press my left arrow key, so I can
| | 02:19 | go up the DOM a little bit, and see
as it highlights different elements,
| | 02:24 | that's the one I want, it looks like.
| | 02:26 | It's the nav tag, with a class of mainMenu;
you can see that down in the tag selector.
| | 02:32 | So, we are going to go ahead and just
click on that to lock that in, and then
| | 02:36 | expand my CSS Styles panel, and let me
bring open the Properties pane here.
| | 02:41 | So you can see, down at the bottom my
nav style is selected, so that's the one
| | 02:46 | I'm going to need to change.
| | 02:48 | Now, this is the one;
| | 02:49 | if I hover over it, you can see
that it's defined in style.css,
| | 02:55 | and currently, the width is 960, so let's
bring it into the same width as my outerWrapper.
| | 03:02 | So I'll go back over to the stylesheet,
press Return, and then nav, the HTML5
| | 03:09 | tag, open curly brace, and let's give
it a width of 688 pixels, as I said, and
| | 03:18 | I'll close that down.
| | 03:21 | And now when we click in,
it moves right into place.
| | 03:24 | Now, you'll notice that the text
in the nav bar is pretty sizable.
| | 03:28 | I think we could actually scale that
back a little bit, especially since we've
| | 03:31 | scaled back the other text.
| | 03:33 | So, if you're not sure what that is,
again, click on Inspect, and let's just go
| | 03:39 | ahead and click on one of
the navigation elements there.
| | 03:41 | Now we'll open the CSS Styles panel,
and you can see in the Summary section up
| | 03:47 | here, it will show us all the basic
properties, and it looks like its inheriting,
| | 03:53 | and it's set at 1.2-1.4.
| | 03:56 | So, let's open this up just a little
bit more here, and I'm going to click into
| | 04:04 | the Rules panel, and then just
walk up it until I get a text size;
| | 04:10 | there's my font-size 100, and looks
like it's going to go all the way to the
| | 04:17 | top, and yes, it does.
| | 04:21 | So, it is coming in at that larger size.
| | 04:25 | So I'm going to go ahead and reduce
this to 24 pixels, enter in a font-size
| | 04:32 | property, and then when I click in, my
font size of my navigation items are
| | 04:39 | reduced; looking a little bit better there.
| | 04:43 | Next, as I kind of scroll down the area,
| | 04:46 | you can see that I've got a pretty
significant issue here, where it looks like
| | 04:51 | one of my wrapper elements is extending
a bit too far, and it's not the content
| | 04:57 | area; seems to be the contentWrap.
| | 05:00 | So, if I click there, and then go to
contentWrap, it might have a margin that's
| | 05:07 | being applied to it,
| | 05:08 | so let's zero out that margin, and
again, I'll go to Code view, and let's do
| | 05:14 | #contentWrap, and set those margins to 0.
| | 05:25 | Okay, looks like we have
a cumulative issue here.
| | 05:28 | Next, I'm going to change the
content area, which is way too big.
| | 05:33 | If I expand this whole panel here,
it's going to cut off a little bit of our
| | 05:39 | document window, but sometimes it's
easier to work with it this way, and we'll
| | 05:42 | close down the Files panel.
| | 05:43 | So, again, Inspect, and I'll hover over
some text, and then use my left arrow key
| | 05:50 | to go up the DOM, and there is the
content that I want to work with.
| | 05:55 | I can see now, the width is set to 700 pixels.
| | 05:59 | That's a little high for a tablet,
so let's reduce that to 478 pixels.
| | 06:06 | After putting in my content selector,
I'll put in the width property, set to 478
| | 06:13 | pixels, and semicolon to close that off.
| | 06:15 | And now let's also get rid of the
margin-right property, which was
| | 06:21 | previously set to 50.
| | 06:22 | So, I'll make that 0, and then
enter in the closing curly brace.
| | 06:28 | Okay, so now when we click into
it, things are looking a lot better.
| | 06:33 | Let me just go to Design view for
a second, so we can take a look.
| | 06:36 | It looks like that combination of the
contentWrap, and the content itself, were
| | 06:43 | causing a major issue for the tablet,
but now things are looking pretty good.
| | 06:47 | It looks like the sidebar, or the
widget area, could use some attention.
| | 06:51 | So let's take a moment to inspect that,
so we can see what rules apply here.
| | 06:55 | So, I will click on Inspect, hover over
Recent Posts, and then again, walk up the
| | 07:00 | DOM with the left arrow key,
and there is my widget area.
| | 07:05 | I can see that there's a margin-
top of 20 pixels, and that's fine.
| | 07:08 | I can see that it keeps it
lined up. That looks good.
| | 07:11 | However, the width is too close to
the content area, so let's reduce that
| | 07:15 | width from 220 to 180.
| | 07:19 | So again, I'll click on style.css, and
that opens this up into Split view, and
| | 07:24 | then create a new rule for the widget-
area class, and we'll set the width to 180
| | 07:33 | pixels, and click over here to see how that looks.
| | 07:37 | Yeah, that gives us a little bit more room.
| | 07:40 | Now, as I scroll down, it looks to me
like the links are a little too prominent,
| | 07:45 | so I think I want to dial back the
font size, and let's make those 1em.
| | 07:51 | As you're working your way through a
design like this, you can really use
| | 07:55 | Dreamweaver interactively in order to
see what looks good, and what doesn't look
| | 08:00 | good, and make adjustments as you go.
| | 08:02 | Okay, that looks a lot better.
| | 08:04 | Although, it looks like our headings,
which I believe are h3 tags -- I
| | 08:08 | select that, and I can see down in the
tag selector that it is an h3, and also
| | 08:12 | in the Styles panel.
| | 08:14 | So, that's also a little bit too big,
so we'll bring that down, as well as the
| | 08:20 | links that we see here.
| | 08:21 | We've got to do a little bit of work
here in order to get everything in line.
| | 08:26 | I'm going to group a number of
selectors together, because I'm going to
| | 08:28 | set everything to 1em.
| | 08:30 | So first I'll target the widget-
area h3s, and then I'll go after the
| | 08:36 | widget-area anchor tags, and finally
the widget-area paragraph tags; that
| | 08:43 | should cover all the bases.
| | 08:45 | So, we'll do an open and a close curly
brace, and then in the middle of it, set
| | 08:51 | the font size to 1em. All right!
| | 08:53 | Let's see how that looks.
| | 08:56 | Everything is coming
together a little bit better.
| | 08:59 | Let me go back into Design view,
and I'll scroll all the way down.
| | 09:03 | There's an image that's
not being read in properly.
| | 09:07 | It looks like the width of the
footer is just a bit too large there, so
| | 09:13 | let's add one last rule for the footer
tag, and we'll set that width to the same
| | 09:22 | as the other dimensions: 668. Okay.
| | 09:24 | *
I'm going to save my page.
Head back into Design view.
| | 09:33 | It looks like the width of the footer
didn't change noticeably, but it will now
| | 09:37 | hold that width when we go into Landscape.
| | 09:40 | So, let me close this down to
give us a little bit more room.
| | 09:44 | So that's it. Just nine rules to restyle a
Desktop design to fit of tablet in Portrait mode.
| | 09:50 | But what happens when we switch to Landscape?
| | 09:53 | Well, let's give it a whirl.
| | 09:54 | We will go over to window sizes,
and choose Orientation Landscape.
| | 09:59 | Because the width is now 1024 pixels,
which is greater than our 768 breakpoint,
| | 10:05 | the styles applied are those of the Desktop.
| | 10:08 | You'll notice the larger
font, and the larger width.
| | 10:11 | However, you can quickly fix that situation.
| | 10:14 | Let me show you how.
| | 10:15 | Let's open up, in Code view, our style.css,
and I'm going to go all the way up to
| | 10:23 | the @media statement.
| | 10:24 | Now I'm going to add another media
query to the same @media statement.
| | 10:29 | I'll put my cursor right after the
close of the last one, enter a comma, a
| | 10:35 | space, and then the keyword, screen,
and, in parentheses, min-width of 321
| | 10:43 | pixels, another logical and, another
open parentheses, and now we'll put in
| | 10:50 | the maximum width of 1024 pixels, and
that's the maximum width of the tablet when
| | 10:55 | it's turned in Landscape orientation.
Close the parentheses, one final
| | 11:00 | logical and, and one final
parameter in parentheses, and that is
| | 11:05 | orientation:landscape.
| | 11:11 | Okay, let's save our file, and now
let's switch to Design view, and there's
| | 11:16 | our Landscape view.
| | 11:18 | Now, I can switch back to Portrait,
and you can see, it's basically the same
| | 11:24 | thing. In Landscape,
| | 11:25 | you just get a bigger view
of the star field behind it.
| | 11:29 | Now, of course, you could go ahead
and break out that media query for the
| | 11:34 | Landscape orientation, and do
completely different values; that's up to you.
| | 11:38 | Now, some may argue that the changes
to a tablet are not that significant, and
| | 11:42 | not really necessary.
| | 11:44 | After all, most tablets automatically
reduce the page to fit the screen. It
| | 11:48 | really depends on how much
width your Desktop designs take up.
| | 11:52 | If you're still designing for an 800
pixel width screen, then it may not be
| | 11:56 | worth it, but if your designs have
taken part in the expanding monitor width
| | 12:01 | trends of recent years, your tablet
carrying site visitors will greatly
| | 12:05 | appreciate the extra effort.
| | Collapse this transcript |
| Optimizing styles for phones| 00:00 | Taking a Desktop design, where a screen
size of 1200 pixels is considered to be
| | 00:04 | medium, and retrofitting it to a phone
screen, where the norm is 320 pixels, is
| | 00:10 | almost the very definition of major overhaul.
| | 00:14 | This is true, especially in comparison
to the Desktop to tablet conversion.
| | 00:19 | To my mind, the key goals are
accessibility and readability.
| | 00:23 | In this movie, we'll target four main
areas: structure, navigation, text, and
| | 00:29 | user interaction, with 20 different CSS
rules designed to meet those twin goals.
| | 00:34 | I have open, now, my index.php file.
| | 00:38 | We're in Live View, looking at
the Tablet View at the moment.
| | 00:42 | So, let's switch to Phone;
| | 00:45 | I'll choose the 320 by 480, and then
let's open up our style.css file.
| | 00:51 | Remember, we have two of them here now;
one that comes from the mobile folder,
| | 00:56 | and the other one from our tpa folder.
| | 00:58 | We want the mobile folder,
| | 01:00 | so I'll go ahead and select that.
| | 01:01 | Now I'm going to expand the panels
over here, and let's collapse the Files
| | 01:08 | panel in order to give the CSS Styles a lot
of room, and then let me open up Split View.
| | 01:15 | One of the great things about working
with the Phone window size is we have got
| | 01:19 | a lot of room to operate here. Okay.
| | 01:21 | Now, there are some CSS rules that I'm
going to want to carry over from the ones
| | 01:26 | I've already done for the
tablet, including the body.
| | 01:29 | So, I'm just going to go ahead and
copy that, so we can have the same
| | 01:34 | font-size and line-height, and then
scroll down to where my media query for the
| | 01:39 | phone is, and paste it in. Okay.
| | 01:42 | Now, we're going to need to do a fair
amount of work with the outerWrapper.
| | 01:45 | So, I'm going to put my cursor
inside of the existing outerWrapper.
| | 01:49 | Let me scroll down a bit, so you can see
it more easily, and the very first thing
| | 01:54 | I want to do is get rid of the top
margin that we see up above here.
| | 01:58 | We have about 50 pixels of margin there,
just to give a little bit of space visible.
| | 02:02 | We don't have the luxury for that,
given the smaller phone screen real estate.
| | 02:06 | So let's set margin to 0, and
we'll keep it centered; auto.
| | 02:11 | Now, I know I want to give
it a very specific width,
| | 02:14 | so I'll enter the width property,
and give it a width of 320 pixels.
| | 02:20 | We can maximize that area.
| | 02:22 | Now, the next thing I need to do is to
change the background of the outerWrapper.
| | 02:27 | If we go over to our CSS Styles panel,
and click Refresh, we can see that the
| | 02:31 | start of our CSS Rules have taken place.
| | 02:34 | Now, if I use the Inspect mode, and
then go to the outermost edge here,
| | 02:40 | there's my outerWrapper.
| | 02:43 | So, I'll just select that, because I
want to point out, in the Rules section, we
| | 02:47 | now have two outerWrappers
defined, and they're both in style.css.
| | 02:52 | Dreamweaver does not identify the path to that,
| | 02:56 | so you need to actually click
into one of them to see which it is.
| | 02:59 | This looks like the one that we just
defined for the phone, and if I click on
| | 03:04 | this one, here is the other
one that is the inherited one.
| | 03:08 | You won't see the styles for the
tablet, because of the window size that
| | 03:12 | Dreamweaver is now using. All right.
| | 03:15 | There are a fair number of styles here,
| | 03:17 | so I think what I'm going to do is
right-click on this outerWrapper entry, and
| | 03:22 | then choose Go to Code, which will
go to the code in my TPA stylesheet.
| | 03:27 | I'm going to select the remaining
properties -- padding, background, and so
| | 03:31 | forth -- copy those, and then let's head back to
our mobile stylesheet, where I can paste them in.
| | 03:41 | And let me tab them over, so everything
is lined up nicely, and give ourselves a
| | 03:47 | little bit more room to work with.
| | 03:48 | So now, when you copy styles from an
existing stylesheet, you will find that
| | 03:54 | there are some that you want to change,
and others you just want to leave alone.
| | 03:58 | In this case, I do want to keep some
padding in the inside of my outerWrapper,
| | 04:02 | so I'm going to go ahead and leave
that default value in the TPA stylesheet.
| | 04:07 | The background, I actually want
to change quite significantly.
| | 04:10 | I'm going to add in a smaller logo,
rather than the large logo that we see here.
| | 04:16 | So I'm going to go ahead and click
Refresh, and when I do that, I can choose Edit
| | 04:21 | Rule from the bottom of the CSS Styles panel.
| | 04:24 | I like to do this for working with
background images, because it's a lot easier
| | 04:30 | to navigate and find your files.
| | 04:32 | We'll leave the Background-color white,
and click Browse to locate my files.
| | 04:37 | I want to go into my themes folder,
into the tpa folder, and then within the
| | 04:42 | images folder within that, and choose a
revised logo that I've set up called tpa_logo_small.
| | 04:50 | Click OK.
| | 04:51 | Now, we don't want this to repeat of course.
| | 04:54 | So, I'll choose no-repeat.
| | 04:56 | And we do want to center it at the top.
| | 05:02 | Click OK. So now you can see the large
older logo, and the smaller new logo behind it.
| | 05:07 | We'll get rid of that
large logo in just a minute.
| | 05:10 | I do want to finish up a couple of things here.
| | 05:13 | Now, you'll notice that I have a
number of border radiuses set to 2.25em.
| | 05:19 | I'm going to zero all of those out, because
I don't want any curves now in this design.
| | 05:28 | So, let me save the file, and then just
click back for a moment, and hit Refresh.
| | 05:34 | And it's kind of a subtle, but there was a
curve element that was there, and now that's gone.
| | 05:39 | Now let's go ahead and get rid of the
large image that's here in the header,
| | 05:43 | and I don't need to do any inspection
for that, because I know that it's in the
| | 05:48 | header tag, and it's a background image,
and I can get rid of it by just setting
| | 05:52 | background to none.
| | 05:53 | Now, you'll notice that there is also a little
bit of padding here, and I want to zero that out,
| | 06:00 | so I'm going to choose
padding-top, and enter 0 for that.
| | 06:05 | We'll save that file, and let me click
back over, and click Refresh, and after
| | 06:11 | clicking Refresh, our large logo is now gone,
and we're ready to move on to the next area.
| | 06:17 | After the header, comes the content area,
and there is a contentWrap rule, where I
| | 06:23 | want to set the margin to zero.
| | 06:25 | So, let me just go ahead and enter that in.
| | 06:27 | You can also copy this from
the tablet section if you wanted;
| | 06:30 | we did this same thing there.
| | 06:33 | Now it's time to work with the
content itself a little bit, and that's all
| | 06:37 | contained in the div, with an ID of content.
| | 06:41 | You'll recall that it was
floated to the right.
| | 06:43 | We're going to get rid of
that by entering a float: none.
| | 06:47 | We also need to change the width.
| | 06:49 | I'll set the width at 300
pixels, and let's zero out the margin.
| | 06:54 | You can see we're just trying to
optimize the space here as much as possible, and
| | 06:58 | set the padding to 0 on top, 10 pixels
on the right -- and that's because there is a
| | 07:04 | scroll bar that appears, and I don't want
to have my text go into that -- and then 0
| | 07:10 | on the bottom, and 0 on the left.
| | 07:13 | Okay, let's save that, and then click
into our document window, and press Refresh,
| | 07:19 | so that we can see that things are
now beginning to shape up a little bit.
| | 07:23 | If we go down further, past the
articles, we'll start to come to the sidebar
| | 07:27 | portion, and we can see that that
needs a little bit of work as well.
| | 07:31 | So, I know that my sidebar is contained
within the div with a class of widget-area.
| | 07:40 | So, I'll enter in a rule for that.
| | 07:42 | So, now I'm going to add some
padding to move it away from the edge,
| | 07:47 | and then I also want to
differentiate it a little bit,
| | 07:50 | so I'm going to give it a light
Background-color. Let's give it a -- well,
| | 07:55 | let's say a CCC color there. All right!
| | 07:58 | Let's see how that looks.
| | 08:00 | Click Refresh, and scroll back down. All right!
| | 08:04 | That's not bad.
| | 08:05 | Now, I notice as I'm scrolling through
here that I have a number of links, and
| | 08:11 | they all have this bottom border
here that's dotted. I don't think it's
| | 08:15 | really working here,
| | 08:17 | so I'm going to get rid of it.
| | 08:19 | I'll enter in p for paragraph tag, and
then an a:link, comma, p a:visited, comma, p
| | 08:28 | a:hover, and finally p a:active. And we'll
clear out the bottom border by setting it to none.
| | 08:39 | One last element in our structure
section, and that's for the footer.
| | 08:45 | Now, you'll notice that the footer kind
of extends all the way to the edge, and
| | 08:50 | it's pushing the outer
limits of what's going on here,
| | 08:52 | so let's go ahead and adjust that.
| | 08:55 | I'll enter in footer, and we'll give
it a width of 280 pixels, and then let's
| | 09:05 | Refresh, and there is my narrower footer margin.
| | Collapse this transcript |
| Optimizing navigation for phones| 00:00 | Continuing from the previous movie, we
are going to work on navigation next.
| | 00:04 | It's important to keep in mind that
mobile screens are a pointing-centric
| | 00:08 | device, not a mouse-centric one, and
that fingers are just a tad bigger than
| | 00:13 | tilted wide arrowheads.
| | 00:15 | So, in our navigation section -- which I
am going to label here, just to make it
| | 00:22 | easy to find -- if we scroll up to the top
of the document, you'll see that that's
| | 00:28 | one of our major problems: that
the nav bar is quite enormous.
| | 00:32 | So let's go ahead and bring
the nav tag down to 320 pixels,
| | 00:38 | so I'll set that width at 320.
| | 00:41 | Now, I want to do a fair amount of styling here.
| | 00:44 | I want to reverse the colors, so we drop
out the heavy blue background, and I also
| | 00:49 | want to get rid of the rounded corners.
| | 00:51 | So let's make the background-color
white, which is triple f in
| | 00:59 | hexadecimal, and the color, we'll set to blue.
| | 01:05 | Now, I need to bring it down some, so I
am going to add a margin-top of 40 pixels,
| | 01:12 | and then also get rid of
all of the border radiuses.
| | 01:17 | So there are three rules that govern
the border radiuses; two browser specific
| | 01:21 | ones, and then a generic one. So let's
zero out the browser specific ones first.
| | 01:26 | I'll start with Mozilla. You do hyphen,
moz, or you can use code hinting there. And
| | 01:34 | then we are looking for a border-radius, so
I'll start to type border, and hyphen, r. That
| | 01:39 | brings us to close to radius, so I can use
my code hints, and we want to set that to zero.
| | 01:44 | So I am going to actually just copy
this, and paste it twice more, and then I'll
| | 01:50 | change moz for the first one I pasted
in, to webkit. And then, for the generic
| | 01:57 | rule, I'll just get rid of hyphen, moz, hyphen.
| | 02:01 | Okay, let's close out the rule; I'll save that.
| | 02:05 | Now let's go back. Click Refresh.
| | 02:08 | Okay, we got rid of our
corners, and we started to get rid of
| | 02:11 | the background color.
| | 02:12 | We've got a couple of other rules that are
still affecting that, so let's keep going.
| | 02:18 | Next up, we're going to continue to
drill down, and now we'll work on the
| | 02:22 | unordered list that's within the
nav. So nav, unordered list.
| | 02:27 | I generally work from outside in, and
here we are just going to zero out the
| | 02:32 | margin, and set the width to auto.
| | 02:38 | Next in line is the list
item that's within the ul tag.
| | 02:42 | And I figure a faster way to
work would be to go find these.
| | 02:47 | So now we start to see some changes.
| | 02:50 | I am going to go ahead and click Inspect, and
then click on one of these list items here;
| | 02:55 | make a little bit more room.
| | 02:59 | And here's the list item
that we are looking for.
| | 03:03 | I am going to go to code here.
| | 03:05 | And one way that I've found is pretty
efficient is, if you've got a lot of rules,
| | 03:10 | especially in the navigation section,
rather than writing them out one at a
| | 03:13 | time, go and copy the ones that are in
the parent stylesheet, and then move on
| | 03:19 | over to the stylesheet for the
child theme, and paste them in.
| | 03:23 | And now let's go ahead and
make some corrections here.
| | 03:26 | So some of these properties I am going
to keep and others I'm going to change.
| | 03:31 | The ones I'm going to keep
as active, I can get rid of.
| | 03:34 | So we still want our elements to float left,
so I am going to go ahead and get rid of that.
| | 03:41 | The width I am going to set to auto.
| | 03:43 | Text-alignment, we want to make left,
and then I have a few other properties
| | 03:50 | that I need to add.
| | 03:51 | The first is font-size.
| | 03:52 | We really need to shrink this down a bit,
| | 03:55 | so I am going to make the font-size
.6ems, and because I want it to appear
| | 04:01 | straight across, I am going to add a
white-space property, and set that to no wrap.
| | 04:08 | Now, before I go on to work on the a:link
and a:visited rule, I am going to add
| | 04:13 | one more rule in here that will
target the anchor tags in general.
| | 04:18 | So it'll be nav ul li a,
for anchor tag.
| | 04:23 | And here, I want to set the width of the
elements, so I am going to set it to 60
| | 04:28 | pixels, and a small margin-right of 10 pixels.
| | 04:35 | Let's Refresh the page,
and see where we are at.
| | 04:38 | Okay, things are starting to take shape here.
| | 04:40 | You can see that we still have
background and foreground color issues, and
| | 04:44 | that's because we have those colors
defined here in the a:link, a:visited,
| | 04:49 | a:hover, and a:active rules.
| | 04:51 | So, we'll adjust those now.
| | 04:53 | First, I am going to change the line-
height from 40 pixels, instead of that big
| | 04:57 | thick bar. Let's just make it 1.2ems,
which is more text oriented.
| | 05:02 | We'll keep display-block, so I can go
ahead and remove that from my @media statement.
| | 05:07 | We want to reverse these colors, so
instead of the color being white, we are
| | 05:12 | going to make it blue.
| | 05:13 | And instead of the background-color
being blue, we'll make that white.
| | 05:18 | I do want to keep the text-decoration at
none, so we'll remove that redundant rule.
| | 05:23 | Now for hover, I'm going to use a warm
red that I have as the background-color
| | 05:28 | here, so that's D32020, and I am going
to set my background-color to white.
| | 05:35 | All right, let's take a look;
see how that's coming along.
| | 05:39 | So there is all of our
navigation styles applied.
| | 05:42 | Looks like we've still got a little bit
of work to do with naming menu items up
| | 05:46 | here, but otherwise, it's looking pretty good.
| | 05:48 | Let's work with the text next.
| | 05:51 | Text on a mobile screen is often smaller
than text on our tablet or Desktop, but
| | 05:55 | it can't be too small, or
you'll sacrifice readability.
| | 05:58 | So, after the navigation rules, I am
going to reduce the h2s, h3s, as well as
| | 06:05 | the paragraphs, just to
bring everything down a notch.
| | 06:08 | So I am going to start with the h2s, so
we'll enter in a h2 rule, and change the
| | 06:13 | font-size to 1.25em, close that
off, and now how about the h3s.
| | 06:22 | The h3s are used in the sidebar. We want
those to be even smaller, and we'll make
| | 06:29 | them just 1em, and they are also bold,
so if I scroll down a little bit, you'll
| | 06:34 | see that they're pretty hefty there.
| | 06:36 | So let's take off their boldness,
and make the font weight normal.
| | 06:42 | Okay now, close out that rule, and
finally, I want to actually bring down the
| | 06:48 | paragraph text-size as well.
| | 06:50 | Right now, it's at 1.2em, and I
am going to bring it down to .8.
| | 06:56 | So we'll click into Code View, enter a
paragraph rule, and change that font-size to .8em.
| | 07:04 | Now, I want to make sure that I target
all of these, so within the entry -- that is,
| | 07:11 | the post -- there is another paragraph tag.
| | 07:14 | So I want to change the margins. As you
can see, I've got a fair amount of margin
| | 07:18 | space; let's see if we can target that.
| | 07:20 | I know that those are within the entry
tag. If you are not sure, you can always
| | 07:24 | click within it, and you'll see, down
at the tag selector, the enclosing tag.
| | 07:29 | You could also use Inspect, of course.
| | 07:32 | So, back to Code View, and we'll do div
.entry, comma, div.entry p, for paragraph, and
| | 07:42 | let's set the margin to zero all around,
and the padding to 5 pixels on top, and
| | 07:50 | zero left and right.
| | 07:51 | Okay, I'll make sure that I am
still within the media bracket.
| | 07:56 | And now let's click over, hit Refresh,
and things are tightening up very nicely.
| | 08:01 | Finally, we need to take a close
look at the user's primary conduit for
| | 08:05 | interacting with the site owner,
and other site visitors: forms.
| | 08:09 | Forms play a big part in the WordPress
world, particularly when it comes to comments.
| | 08:14 | A lively blog, filled with reader
reaction and interactions, is a joy to behold,
| | 08:19 | and a tremendous traffic driver.
| | 08:22 | To affect that, I am going to enter in
some code to target the commentform ID.
| | 08:27 | So I'll go to my stylesheet, and enter
in a hashmark (#), and then the ID of
| | 08:33 | commentform. This is a standard
WordPress ID. And I want to target the label
| | 08:40 | there, and now I'll enter in a display:
block rule, and this will force all the
| | 08:46 | labels for the commentform on top, and
on a separate line from the input items.
| | 08:52 | Let's close that out.
| | 08:53 | And then the other area that I
want to target is the textarea.
| | 08:57 | So let me go ahead and enter in commentform
again, textarea -- that's the tag --
| | 09:05 | and let's set the width to something that
will fit within our screen size: 280 pixels.
| | 09:12 | Okay, I am going to save this, and
then toggle Live View on and off.
| | 09:18 | Now, as we scroll down,
everything is looking pretty good.
| | 09:21 | Let's go ahead and go
into one of the pages here.
| | 09:24 | I am going to hold down the Control key, so
I can navigate to Saturn Ring Organizer
| | 09:28 | Wanted, and then scroll below it, and
here you can see the results of my
| | 09:33 | comment form manipulations, where now
the labels are below the form elements and
| | 09:39 | my text area fits really nicely.
| | 09:42 | Everything seems to be working well,
and now we have a complete design scheme
| | 09:45 | for multiple screens.
| | 09:47 | Of course, your design choices will be
different, but now you have the tools for
| | 09:51 | retrofitting a Desktop design
for the emerging mobile world.
| | Collapse this transcript |
|
|
3. Implementing a Full Mobile Redesign StrategyUnderstanding the technique| 00:00 | In the previous chapter, we covered
a technique for taking an existing
| | 00:03 | WordPress Web design intended for the Desktop,
and retrofitting it to tablet and phone screens.
| | 00:10 | But happily, new WordPress
Web site designs are needed every day.
| | 00:14 | So how do modern Web designers react,
knowing from the beginning that a multiple
| | 00:19 | screen strategy is a requirement?
| | 00:21 | In this movie, we'll explore the answer
to that question a bit, and explain the
| | 00:26 | technique that is detailed in
the remainder of this course.
| | 00:29 | Two guiding principles for Web
professionals have emerged in recent years:
| | 00:33 | responsive Web design, and mobile first.
| | 00:36 | Responsive Web design is a concept
intended to tackle the challenge presented
| | 00:40 | by the proliferation of Internet capable
devices, and their accompanying varied screen sizes.
| | 00:47 | The first serious argument for
responsive Web design came from an article in A
| | 00:52 | List Apart by Ethan Marcott, which
you can find at the URL listed here.
| | 00:56 | There are two main aspects to a responsive
design, and they work together hand in glove:
| | 01:02 | fluid grids, and media queries.
| | 01:05 | A fluid grid responds to the browser
window size; the columns of the layout
| | 01:10 | expanding and contracting with the screen width.
| | 01:13 | Here's Ethan Marcott's example from an
article for A List Apart on fluid grids.
| | 01:18 | Watch how the layout reacts as I
shrink and expand the browser window.
| | 01:22 | As good as they are,
fluid grids have their limits.
| | 01:25 | If you contract them too much, the
percentage values the column widths are
| | 01:29 | based on fall apart.
| | 01:31 | That's where the second part of
responsive design equation comes into
| | 01:34 | play; media queries.
| | 01:36 | As we've seen earlier in this course,
media queries allow CSS stylesheets to be
| | 01:41 | conditionally applied.
| | 01:42 | Typically, device screen width is a
primary condition that triggers a media
| | 01:47 | query to take effect, and
apply a different stylesheet.
| | 01:50 | In the Setting up Media Queries movie
in this chapter, we'll create a number
| | 01:55 | of media queries, and link tags, rather than
the @media statements as we did in Chapter 2.
| | 02:01 | Responsive design has led to
responsible design, and the desire to tackle
| | 02:05 | the notable problem that exists when
retrofitting Desktop designs to work
| | 02:09 | with tablets and phones.
| | 02:11 | If your CSS uses the Desktop design as
the starting point, with a large-scale
| | 02:16 | background image, browsers will still
download that image, regardless of the
| | 02:20 | screen, and which media query
driven stylesheet is being used,
| | 02:25 | so that, effectively, any time you're
looking at a phone that has such a
| | 02:29 | background, the larger background,
even though it isn't used, is still
| | 02:33 | downloaded to your phone.
| | 02:34 | This obviously slows mobile site's
rendering time, and negatively impacts on
| | 02:39 | resource management.
| | 02:40 | A better approach is to structure
your CSS styles with a base of core
| | 02:45 | components, primarily text, and basic
structure, and save the background imagery
| | 02:50 | for media query specific styles.
| | 02:52 | We'll follow that
approach in the upcoming movies.
| | 02:56 | This leads to our final
corollary for responsive design.
| | 03:00 | Web sites should also be
responsive to the viewers needs.
| | 03:04 | In the Targeting Configurable Site
Elements movie, I mentioned the concept
| | 03:08 | of responding to how the Web site
was being used on different screens.
| | 03:12 | You might remember the very responsive
example, glue Isobar, and how radically it
| | 03:17 | shifted design and focus from Desktop to phone.
| | 03:21 | We'll also incorporate that principle into
the look and feel of our mobile phone design.
| | 03:25 | Now that you understand better where
we're going with the full mobile design
| | 03:29 | strategy, you're ready to get started
with creating the necessary media queries.
| | Collapse this transcript |
| Setting up media queries| 00:00 | In standard HTML Web sites,
Dreamweaver's media query feature is pretty
| | 00:04 | much plug-and-play.
| | 00:06 | You plug in the values you want, and
Dreamweaver outputs the code you need.
| | 00:10 | It's not quite as easy as that with a
WordPress site, but we can still leverage
| | 00:15 | Dreamweaver's coding prowess to do
most of the heavy lifting for us.
| | 00:19 | We'll be using a different theme for
the remaining chapters of this course.
| | 00:23 | Let's go get it, put it into our
Dreamweaver site, and activate it in WordPress.
| | 00:27 | So I'll use Windows Explorer to go my
Exercise Files > Chapter 3 > 03_02, and if
| | 00:35 | you'll right click on tpa2, and copy
the files, and then we need to go back to
| | 00:41 | our site root, which we can find here in the C:
| | 00:44 | wamp folder > www folder, and I'll
click our site, and drill into where our
| | 00:50 | themes are maintained.
| | 00:52 | So again, I'll right click, and
paste, and there is my new theme.
| | 00:57 | Now let's head over to WordPress to activate it.
| | 01:00 | To activate a new theme, go to Appearance >
Themes, and our current theme, you see,
| | 01:05 | is TPA Mobile, but among
the available themes is TPA 2.
| | 01:10 | So that's the one we want to activate;
click that link, and we're good to go.
| | 01:15 | Now let's head back to Dreamweaver.
| | 01:17 | The reason we can't use media
queries straight out of the box is because
| | 01:21 | WordPress themes require the
integration of PHP code that call specific
| | 01:27 | WordPress functions in order to
properly link to their own stylesheets
| | 01:31 | within the theme folder.
| | 01:33 | But with the help of a temp file, we
can use Dreamweaver to get us most of the
| | 01:37 | way there, including creating a
series of stylesheets for us.
| | 01:41 | So I am going to open my Files panel,
and if you don't see the new theme folder
| | 01:46 | that we put in there right away,
just click Refresh, and it will appear.
| | 01:50 | Now I am going to right click on tpa2,
and then choose New File, so we can create
| | 01:55 | a file within that folder, and I'll
rename it temp, and then open it up.
| | 02:02 | Okay, we're ready to jump into creating
our media queries, and you start that by
| | 02:06 | going to Multiscreen Preview, and
then click the Media Queries button.
| | 02:12 | Again, CS5 users won't see a
dialog box with this many options,
| | 02:17 | but you can still get Dreamweaver
to generate most of the code for you.
| | 02:20 | The rest of it, you can code by hand.
| | 02:22 | Okay, so we want to write our
media queries to this document.
| | 02:27 | We definitely want to have Force devices
to report actual width selected, and now
| | 02:32 | we want to create the actual media queries.
| | 02:35 | Now, we could click the Add button
to start the process, but a much more
| | 02:38 | efficient way to go is to click
Default Presets, and once you do, you'll see a
| | 02:43 | separate Media Query for
Phone, Tablet, and Desktop.
| | 02:47 | Now you need to tell Dreamweaver
where to point that media query.
| | 02:50 | So let's start with Phone, and we're
going to create a new file, and that file is
| | 02:55 | going to be called style_phone.css.
| | 03:01 | Press Tab when you're done, not Return,
so that you can continue to assign files.
| | 03:06 | Click Tablet, and now we'll name that one
style_tablet.css, press Tab, and finally Desktop.
| | 03:17 | Now, I've taken the liberty of going
ahead and creating a Desktop file for you,
| | 03:21 | because it only has one rule, but it is
an important one, because it holds the
| | 03:26 | large background image that will only
be downloaded and displayed when the site
| | 03:31 | is viewed through a Desktop.
| | 03:32 | So instead of Create new file, choose
Use existing file, and then click on the
| | 03:38 | Select File icon, and select style_desktop
from the tpa2 folder. Click OK, and OK once again.
| | 03:47 | Dreamweaver will ask if you want to
save the changes to your temp file; click
| | 03:50 | Yes, and now there is the
start of our media query.
| | 03:54 | Now, you won't see anything up top in the
two media query previews, because there
| | 03:58 | are no styles there.
| | 04:00 | Let's go ahead and close this
dialog box, and go to the next step.
| | 04:04 | As is, this code is perfect for an
HTML site, but we need to massage it a bit
| | 04:09 | for inclusion in our WordPress driven site.
| | 04:12 | Now, the easiest way to do this is
to copy this code, put it in the
| | 04:16 | header.php file, and then use some of the PHP
code that's there to integrate it into this code.
| | 04:24 | So let's copy our Phone,
Tablet, and Desktop links.
| | 04:28 | I am going to go ahead and
include the comments as well.
| | 04:32 | I'll copy that, and then open up the
Files panel, and in the tpa2 folder -- make
| | 04:39 | sure I am in that same folder; yep -- I will
double-click on header.php; close the Files panel.
| | 04:46 | Now here on line 17, you see the one
link to the standard stylesheet, with the
| | 04:52 | PHP specific code in it,
pointing to the stylesheet_url.
| | 04:56 | Let's paste in our copied media queries,
and now let's pick up that PHP code, and
| | 05:02 | use it to bring these other
links into WordPress compliance.
| | 05:06 | So I am just going to copy that entire
PHP block, and now in front of the href
| | 05:12 | for the Phone media query, I'm going to
paste it in, put a forward slash, and
| | 05:18 | then change stylesheet_
url to stylesheet_directory.
| | 05:23 | So let's go ahead and copy that
entire PHP code block, and the forward slash,
| | 05:30 | and put it in front of style_tablet.css,
and then once more in front of style_desktop.css.
| | 05:38 | Now, I have one more snippet of code to get
from my temp file; let's head back there.
| | 05:44 | And I want to pick up the meta tag
that you see here on line 5, so I'll just
| | 05:51 | select that, and copy it, and
then bring it over to header.
| | 05:55 | And I am going to put it
right after the charset meta tag,
| | 05:59 | but there is one more thing I need
to do here, and that's to add a second
| | 06:03 | parameter to the viewport meta tag.
| | 06:06 | So put your cursor after
content, and then comma, and then
| | 06:10 | type initial-scale=1.
| | 06:11 | As I explained before, this controls
the zoom level. I've found that it's
| | 06:18 | necessary to add this bit of code,
particularly when you're trying to bring
| | 06:22 | orientation into the equation.
Let's save our header.php file.
| | 06:27 | Okay, coding is all done, but how do we test?
| | 06:30 | Let's temporarily add some simple CSS
rules to the Tablet and Phone stylesheets,
| | 06:36 | so that we can feel secure that our
media queries are working correctly.
| | 06:40 | So back to the Files panel, and
scroll down a bit until you see
| | 06:44 | style_phone.css. Open that one up.
| | 06:49 | Now, I am going to just put in a very
quick rule for the outerWrapper, which is an
| | 06:55 | ID that I use pretty much in all of
my sites, and I am going to set the
| | 07:01 | background-color to,
let's say, yellow. All right!
| | 07:04 | Let me copy this, and let's save that
file before we open up the next one.
| | 07:10 | Back to the Files panel, double-click
on style_tablet.css, and put your cursor
| | 07:17 | after the charset declaration, and paste it in.
| | 07:20 | Now let's swap the color from yellow to green.
| | 07:25 | Again, save the file.
| | 07:27 | So now we are ready to actually
take a look at this using the Media
| | 07:31 | Queries Preview dialog box.
| | 07:33 | In order to do so, we need to work
with index.php from the site root of the
| | 07:38 | WordPress site, so in my files panel,
I'll go down, and double-click on
| | 07:43 | index.php. Switch over to Design View,
and let's just see how it looks in Live
| | 07:49 | View; there is the site.
| | 07:52 | Now let's go ahead and open it up into
Multiscreen, and there are our three designs.
| | 07:57 | Everything is the same, except for the
background color. Of course, with Phone, and
| | 08:03 | Tablet, there are certain things being
moved around, especially with the Phone,
| | 08:07 | because of the smaller size.
| | 08:08 | It looks like we've got our
traffic routing media queries in place.
| | 08:11 | You are ready to move on to
setting up for adaptive images.
| | Collapse this transcript |
| Preparing for adaptive images| 00:00 | I've got good news, and bad news.
| | 00:02 | The good news is that browsers have
gotten much better at rendering images in
| | 00:06 | smaller sizes when the
browser window is reduced.
| | 00:09 | Images are sharper, and there is
much less loss of detail and fuzziness
| | 00:13 | than there used to be.
| | 00:14 | The bad news is that browsers still
download the full size image at the full
| | 00:19 | file size, regardless of screen dimensions,
| | 00:21 | which means slower downloads, increased
bandwidth cost, and wasted device resources.
| | 00:27 | But wait; there's better news.
| | 00:29 | A PHP-based technique has emerged,
called adaptive images, which scales graphics
| | 00:35 | on the fly, and caches them for small screen use.
| | 00:38 | The best news: there is a WordPress
plug-in you can install to put this
| | 00:42 | great technology to use.
| | 00:44 | The adaptive images technique was
developed by Mike Wilcox, whose site,
| | 00:49 | adaptive-images.com, has all of the details,
as well as code you can download and use.
| | 00:54 | Before we look more closely at the
benefits of using adaptive images, let me
| | 00:58 | break down how it works.
| | 01:00 | First, a device requests a site
page where there is adaptive image
| | 01:03 | functionality in place.
| | 01:05 | The application creates a cookie, using
JavaScript, to store the device resolution.
| | 01:10 | The .htaccess file is set up to
redirect image requests to the
| | 01:15 | adaptive-images.php application.
| | 01:18 | The application, in turn, pulls the
resolution from the cookie, looks to see if that
| | 01:23 | image has already been created, and is
stored on the site, and if it's not, it
| | 01:27 | rescales the image
dynamically, and saves it for later use.
| | 01:31 | Then finally, it sends that
image to the user's device.
| | 01:35 | I think it's a sophisticated, well
thought out strategy, but is it overkill?
| | 01:39 | Let's look at some numbers.
| | 01:41 | On the Adaptive Images site, if you
scroll down a bit, you'll see the example in
| | 01:46 | action, and here is what happens
with some of the larger files.
| | 01:50 | So let's assume that your site has a
relatively large image; as you see here,
| | 01:54 | that's 200KB in the RAW, and you can see
the values over on the right-hand side,
| | 01:59 | how much the file weight decreases, all the way
down to 30KB for a smart phone in Landscape mode.
| | 02:05 | Here is another example; while it's
not quite as dramatic, it's still noticeable,
| | 02:11 | going all the way from 82KB down to 14.
| | 02:13 | And then finally, here is a nice
winter scene with a maximum of 138KB, all
| | 02:20 | the way down to 20.
| | 02:22 | While the Adaptive Images application
is not extremely difficult to install in
| | 02:26 | a standard site, it's pretty hairy when it
comes to integrating into a WordPress site.
| | 02:31 | Wonderfully, a developer named Jorgen
Scott has created a plug-in that handles
| | 02:36 | all the coding chores.
| | 02:37 | You can get more info at his site,
wpresolutions.co. While it's still in Beta,
| | 02:43 | I've had very good results from using it.
| | 02:46 | Let's just install the plug-in,
and get ready to put it to work.
| | 02:49 | From the Dashboard, go to Plugins >
Add New, and search for wp resolutions.
| | 03:01 | When the search results return, click
Install Now, under WP Resolutions. Click OK,
| | 03:09 | and then once it's installed, click Activate.
| | 03:12 | Now, you'll notice when you look at
the entry in the Plugins page that there
| | 03:16 | are some settings. Click that link, and here
you see the paths that are set up to Watch.
| | 03:23 | Now, by default, there is an entry
there for your uploads, but what about the
| | 03:27 | graphics themselves that are on the site?
| | 03:29 | Well, we can go ahead and add another path.
| | 03:31 | So I'll put my cursor in the box at
the end, and hit Return, and then enter in
| | 03:37 | the path following the model of /wp-
content/themes/tpa2/images, and then click
| | 03:50 | Save Changes, and it looks like we're good to go.
| | 03:53 | We've covered any images that are
uploaded, and any graphics we have in our design.
| | 03:57 | Now, we won't have a chance to try
out the new plug-in until later, but
| | 04:01 | we're prepped, and ready to
rescale images on the fly, and keep our
| | 04:04 | bandwidth usage under control.
| | Collapse this transcript |
| Working with changes in orientation| 00:00 | Call me silly, but I still get a
little thrill whenever I flip my phone
| | 00:04 | or tablet from portrait to landscape, or
vice versa, and the display smoothly rotates.
| | 00:09 | It's great for the user, but how does a
Web designer handle changes in orientation?
| | 00:15 | Frankly, it's been a bit of a rough road,
but the dust is beginning to settle, and
| | 00:19 | standard techniques are emerging.
| | 00:21 | For a while, designers were relying
on the viewport meta tag, with specific
| | 00:26 | device width values, like 320, or
768, to create proper media queries for
| | 00:33 | changes in orientation.
| | 00:34 | Unfortunately, this approach fails when
certain devices -- namely, the iPhone -- report
| | 00:40 | the same width, regardless of the orientation.
| | 00:42 | What was worse; those same devices
didn't support the orientation keyword.
| | 00:48 | Happily, browsers have stepped up, and
now support for orientation is getting
| | 00:52 | better, although it's
still not totally universal.
| | 00:55 | One approach, other than using the
orientation keyword, is to use a combination of
| | 01:00 | min-width and max-width values, to
specify the dimensions of a landscape device.
| | 01:05 | For example, if we wanted to target a
Smart Phone with the dimensions of 480 by 320
| | 01:10 | in landscape, our link would be like this.
| | 01:13 | This technique has the advantage of
working in Dreamweaver CS5's WebKit
| | 01:17 | rendering engine, as well as
simulators and actual devices.
| | 01:21 | While it's not as elegant as orientation:
| | 01:24 | landscape, it does the trick.
| | 01:27 | So let's incorporate an
orientation aspect to our media queries.
| | 01:31 | While you can create different
stylesheets for orientation, I'm going to go
| | 01:35 | ahead and just use the same ones to
keep life a little simpler for this course.
| | 01:39 | Let's open up our header.php
file to make the changes.
| | 01:43 | So I'll go to the Files panel, and
navigate up to my tpa2 folder, locate
| | 01:50 | header.php, and give it a double-click,
and then go into Code View, where I
| | 01:58 | find by media queries.
| | 01:59 | So let's start with the Phone first.
| | 02:02 | So that's right up at the top; I'm going
to copy that, and then paste it right below.
| | 02:08 | So now I need to alter it
by adding a minimum width.
| | 02:12 | So right after it says media="only
screen, I'll add the logical and, and in
| | 02:18 | parentheses, min-width:321px,
and then close the parentheses.
| | 02:27 | And then I'm going to change my
maximum width value from 320 to 480.
| | 02:32 | Okay, Phone is done; let's do a Tablet now.
| | 02:35 | Now I'll copy the Tablet; paste it in.
| | 02:38 | Now, we already have the min-width and
max-width parameters here, so I only need
| | 02:42 | to change the values.
| | 02:44 | Let's change the minimum width to
769, and then the maximum width to 1024.
| | 02:51 | Now, before we save the file, we're
going to need to reorder the sequence in
| | 02:57 | which these links appear.
| | 02:59 | It's important that the media query driven
stylesheets cascade from largest to smallest.
| | 03:05 | If you don't reorient the code from the way
Dreamweaver writes it, it just won't work.
| | 03:10 | So we're going to take our Desktop
section, and move it to above the Phone.
| | 03:17 | You want to put it below
the default stylesheet, though.
| | 03:20 | And now let's grab Tablet, make sure
you get both of the links, and move that
| | 03:26 | above Phone, and below Desktop.
| | 03:29 | Okay, now are ready to save the style
sheet, and our orientation code is in place.
| | 03:33 | So let's check out all of our orientation
code, and make sure it's working properly.
| | 03:37 | I'll flip over to index.php, and go
down to window sizes, and let's just
| | 03:43 | choose Tablet first.
| | 03:44 | Here is our Tablet, with our
lovely green background, in portrait.
| | 03:49 | Let's go ahead and switch that to
landscape orientation, and the green should
| | 03:53 | stay, and it does, and it
looks like that's working out.
| | 03:57 | Okay, let's check out the Smart Phone.
| | 04:00 | Again, starting off in portrait, with a
very special yellow background, and now
| | 04:06 | landscape; still yellow, looking good.
| | Collapse this transcript |
|
|
4. Styling a Blog for TabletsReducing background overhead| 00:00 | One of the most common mistakes a Web
designer can make when creating a mobile
| | 00:04 | stylesheet for tablets, is to think it's
almost exactly the same screen size as a Desktop.
| | 00:09 | While that's true, what follows: that you can
pretty much leave everything in place, is not.
| | 00:15 | Background images are a somewhat hidden issue.
| | 00:19 | Because bandwidth is generally on the
upswing, it's become common to use really
| | 00:23 | large graphics when creating
backgrounds for Desktop sites.
| | 00:26 | While the screen sizes of tablets and
Desktops are pretty close -- how long ago
| | 00:31 | were you designing for an
800 by 600 screen? Not that long, right?
| | 00:35 | The use of bandwidth is not that close.
| | 00:38 | Don't forget that tablets are mobile,
and thus they are downloading over Wi-Fi,
| | 00:43 | sometimes in remote, heavily shared locations.
| | 00:46 | You need to scale back your
background images as much as possible.
| | 00:50 | Take, for example, our
background for the TPA site.
| | 00:53 | Let me show it to you in Fireworks; my
graphics program of choice. And here you
| | 00:58 | can see, by looking at the file size in
the lower right-hand corner, that it's a
| | 01:02 | pretty large image: almost 2500 pixels
wide. And if I click on Preview, I can see
| | 01:09 | how big the file size is over on the
left; just under 42K. Not enormous, but
| | 01:15 | still pretty sizable.
| | 01:17 | And what's more, not really all that necessary.
| | 01:20 | So think in terms of the tablet background.
| | 01:23 | The width that we'll need; not much more
than a 1024. Let's give it a little bit
| | 01:28 | of extra room, in case tablets grow some.
| | 01:31 | So what I am going to so is reduce this image
to 1200 pixels wide, starting from the center.
| | 01:36 | You can do that easily in Fireworks by
selecting Canvas Size, setting the new
| | 01:41 | horizontal size, which is 1200, and I'm
going to keep the same width, so my anchor
| | 01:47 | can remain in the center, and I will
click OK, and there is my new graphic.
| | 01:53 | Now as you can see by looking at the file
size, it's under 17K; quite a bit of savings.
| | 01:58 | So let's save this image. I'm going to
make sure my Optimize is set to JPEG at a
| | 02:04 | Quality of 60; that's pretty good.
| | 02:07 | And let's export this in the images
folder of the tpa2 theme, which is where I
| | 02:14 | got the original image, and then
I'm just going to append a small.jpg.
| | 02:20 | Click Save, and now let's head back
to Dreamweaver, and we are ready to
| | 02:25 | incorporate that image into our new
CSS rule for the Tablet stylesheet.
| | 02:29 | Now let's go get the CSS rule that is
putting this large image on our Desktop,
| | 02:34 | and that is located in style_desktop.css.
| | 02:38 | So let me copy that body rule, and then
let's flip over to style_tablet.css, and
| | 02:46 | I'm going to insert it above the
outerWrapper, and change the file name, adding my
| | 02:54 | _small that I appended to the file name.
| | 02:56 | And now when we go back to Design View,
and then take a look at Tablet, we will
| | 03:04 | see our background image a little bit
better as we go forth, and adjust the
| | 03:07 | width of the tablet.
| | 03:09 | Okay, it looks beautiful.
| | 03:10 | our cosmos is intact, with no noticeable
shift in the background when we go from
| | 03:15 | Desktop to Tablet, or Tablet to Desktop.
| | 03:18 | You're ready to take on
that layout of the Tablet now.
| | Collapse this transcript |
| Restructuring the layout| 00:00 | The layout is probably among the most
obvious elements of a Web page that need to
| | 00:04 | be modified for tablets, especially if
your Desktop design is a fairly large
| | 00:09 | scale, like this example.
| | 00:10 | In this movie, we will change just a few key
things, but they'll make a ton of difference.
| | 00:15 | So we are going to start from
the outside, and work our way in.
| | 00:19 | One of the common techniques for
working with a Tablet CSS stylesheet is to go
| | 00:24 | to the stylesheet that is currently
being used, locate the rule that you're
| | 00:30 | working with -- in this case, it's
outerWrapper -- there it is, and I will copy that
| | 00:36 | and then head on over to my style_
tablet.css. Let's replace the temporary
| | 00:42 | placeholder outerWrapper with the copied one,
| | 00:46 | and now I am going to make some changes
here. We don't need to modify the margin.
| | 00:50 | We do need to change the max-width,
and I'm going to make that quite a bit
| | 00:55 | smaller, so that it fits into
the tablet better at 36.75ems.
| | 01:02 | I don't need to modify anything else
here, but I am going to add a bit of
| | 01:06 | margin, top and bottom.
| | 01:08 | So let's put in margin 10 pixels,
and then auto to keep it all centered.
| | 01:14 | Next up is the content area.
| | 01:16 | All I really need to do with the
content is change its width area.
| | 01:20 | So let's just enter in content, and put
in a new width. I'm using a fluid grid
| | 01:28 | technique, so all of my widths are in
percentages, and this width percentage will be 65.94.
| | 01:36 | Finally, we are going to change the
width of the widget-area, which is the
| | 01:41 | sidebar, so a similar situation,
where we just need to put in one value.
| | 01:46 | So it is a class of widget-area,
and enter a width of 23%.
| | 01:54 | *
Now, you can get all of these values
mathematically, or you could use trial and
| | 02:01 | error to get a more visual feel to
them. So let me save this stylesheet.
| | 02:05 | Let's go to Design View, and
then let's go into our Tablet mode,
| | 02:11 | and things are beginning to shape up a
little bit better here. If we scroll down, we
| | 02:15 | can see that the two columns are well spaced.
| | 02:19 | But there's an obvious problem with
the navigation, So let's tackle that
| | 02:22 | one next.
| | Collapse this transcript |
| Modifying the header and the navigation| 00:00 | Generally, I've found that I don't
have to do much to bring the header and
| | 00:04 | navigation into proper
focus for a tablet design.
| | 00:06 | Sometimes just the slightest
tweak can make all the difference.
| | 00:09 | Now, looking at the submenu, which is
this section -- that's blast offs, my tickets,
| | 00:14 | docking stations, etc -- you might think
positioning is the problem, or line height.
| | 00:19 | But once you take a closer look at how
this section is styled, which we can do
| | 00:24 | using the CSS Styles panel, and Inspect
mode, and navigate over to this section --
| | 00:32 | one final bit of adjustment here;
let's close Files panel so we can see
| | 00:35 | everything; there we go.
| | 00:37 | Okay, so I'm going to hover over one of
the submenu items, and use my left arrow
| | 00:42 | key to go up the DOM.
| | 00:44 | So the list item look okay;
their height seems to be okay.
| | 00:48 | Looks like the width is at 100%, and if
I go up to nav submenu, I can see that
| | 00:55 | it's absolutely positioned.
| | 00:57 | And I really don't want to have it go up and
down when switching from Desktop to Tablet;
| | 01:02 | I would rather that stay the same,
| | 01:04 | but I think the major
problem here is the font size.
| | 01:08 | You see that it's at 1.25em, so probably a
good solution would be reducing that to 1em.
| | 01:14 | So let's go into our style_tablet.CSS
file, and we will add in that same
| | 01:21 | selector, which was nav#submenu, with a single
property of font-size, making that equal to 1em.
| | 01:32 | Okay, let's take a look at our
page now, and it's looking pretty good.
| | 01:37 | Let me turn off Inspect mode. Everything
is in place, and if I switch back to my
| | 01:43 | Full Size, there is no change of
position, and no tremendous change in size.
| | 01:49 | The simplest of changes, but what a difference!
| | 01:51 | The take away here is that it's best
to find the least that you can do, that
| | 01:56 | has the most impact.
| | Collapse this transcript |
| Restyling content| 00:00 | You may be tempted to just leave the
content styles the same for both Desktop
| | 00:04 | and Tablet, but before you do, take a
close look at the readability and size
| | 00:09 | appropriateness for both platforms.
| | 00:11 | Personally, I tend to go a little big
with my font sizes on the Desktop which I
| | 00:16 | inevitably have to
consider scaling back for tablets.
| | 00:19 | Let's look at our example
site, and see what's warranted.
| | 00:22 | So here we can see the main heading.
| | 00:24 | If I click onto that, we can see
it's an h2; that's pretty sizable.
| | 00:30 | And as I scroll down, it looks like
there's some additional padding here,
| | 00:35 | obviously there is a line height
consideration here that my clear up if we
| | 00:39 | reduce the size of the type.
| | 00:41 | Alright, so it looks like there are
just two things to me. I would first
| | 00:45 | change the h2, and then, I think this
might be padding. Let's turn on Inspect,
| | 00:49 | and yup, it sure is. So when I hover
over the paragraph there, the purple area
| | 00:56 | you see around is padding.
| | 00:58 | An easy mnemonic is, padding is purple.
| | 01:01 | Okay, so let's make a change in the style
_tablet.css. So, let's reduce our h2 tag;
| | 01:08 | it's currently at 1.75em, which I found
using Dreamweaver's Inspect mode, and I
| | 01:16 | am going to reduce it to 1.5em,
so a little bit of a compromise.
| | 01:21 | And then the padding has 1em top
and bottom, and 0 left and right.
| | 01:27 | So let's cut that top and bottom
padding in half, and make it .5em, followed by a
| | 01:35 | zero, and we will close out or paragraph tag.
| | 01:38 | Now let's head on over to Design View, and
I think that's looking a little bit better.
| | 01:43 | Yeah, that looks a lot more suited to
the tablet, and we can see that we can get
| | 01:48 | more on a single line.
| | 01:49 | So not bad. I think overall the
readability on the tablet has improved with
| | 01:54 | the tweaks we've made.
| | 01:55 | So now, you're ready to consider
tablet usability, and how you can improve
| | 02:00 | on that.
| | Collapse this transcript |
| Ensuring touch-screen compatibility| 00:00 | Tablets almost universally
rely on a touchscreen interface.
| | 00:04 | As such, you need to give special
consideration to issues that may arise with
| | 00:09 | navigation and form interaction.
| | 00:11 | On our example site, like many
WordPress sites, the sidebar is link intensive.
| | 00:16 | On the Desktop, there is a
little separation between the links,
| | 00:20 | but it looks to me like it's
kind of tight on the tablet.
| | 00:24 | So let's open that up. In order for me
to find exactly what the selector is, I am
| | 00:28 | going to rely on Inspect mode one more time.
| | 00:31 | And let's take a look here, and I
see I have an anchor tag, and it is
| | 00:36 | within a list item.
| | 00:38 | So if go up the DOM there,
there is the list item.
| | 00:42 | I don't seem to have a
rule that is affecting it;
| | 00:44 | this is a more general rule.
| | 00:46 | So let's go into our tablet stylesheet,
and we'll add a new rule that's targeting
| | 00:52 | the widget-area class; ul li.
| | 00:57 | That's the list item within the
unordered list, that's within the widget-area.
| | 01:02 | So in order to open this up, I am going
to add some padding to the bottom, and I
| | 01:06 | am going to try a value of 7em.
| | 01:10 | Okay, let's go ahead and click over here.
| | 01:12 | Yeah, that does give it a nice
little bit of separation, and makes it a lot
| | 01:16 | easier to distinguish one
link from another, and tap them.
| | 01:19 | Now let's turn our attention to the form
that's in the sidebar; that's the Search box here.
| | 01:25 | When we reduced the size of the
overall page, Search took a hit.
| | 01:30 | Now the submit button wraps to
the next line, which isn't great,
| | 01:34 | but you can't make the field any smaller.
| | 01:36 | Well, if you kept a small, go big.
| | 01:39 | Let's expand the input button to fill the space.
| | 01:43 | This little search form is created
dynamically by a WordPress function.
| | 01:47 | So in order to discover the ID that's
controlling it, we will need to go into
| | 01:52 | Live Code, and then I am going to go
ahead and just click into the form, so I can
| | 01:57 | find my input value there.
| | 01:59 | And there is the label, and let's
look for the form, and there it is.
| | 02:04 | So the form is right here, starting on,
it looks like, the middle of line 78.
| | 02:09 | The important thing is this
ID here; searchform.
| | 02:13 | So I am going to go ahead and just copy
that, drop out of Live Code; head back to
| | 02:18 | my Tablet stylesheet.
| | 02:20 | Now I'm ready to write my selector,
which we'll start with an ID of searchform,
| | 02:24 | and I want to target both
of the inputs that are there:
| | 02:27 | the text field, and the search button.
| | 02:30 | So it's searchform input, I will close
off our CSS rule, and enter a width of 100%.
| | 02:39 | Okay, let's see how that looks; not too shabby.
| | 02:43 | So now the links are more
accessible for the touchscreen user,
| | 02:46 | the search form has a more cohesive feel,
and bonus: the button is easier to tap.
| | Collapse this transcript |
|
|
5. Developing a WordPress Site for PhonesHandling oversized logos| 00:00 | One of the biggest creative challenges you
face on the small screen is how to handle a logo.
| | 00:05 | For many sites, their standard logo
is simply too big for an optimized
| | 00:10 | mobile phone layout.
| | 00:11 | While it can be a bit of chore,
there is often no way around it.
| | 00:15 | With a new, smaller logo in hand,
CSS can take care of the switching,
| | 00:20 | but for that to happen, your logo must
be inserted as a background image, as we
| | 00:24 | have here in this theme.
| | 00:26 | You can see this if I open up the
header.php file, found in my theme. Go into
| | 00:35 | Code, and you scroll down to the header, and
you can see that there are no images there.
| | 00:43 | So this logo is brought in via CSS
that's located in the style.css file.
| | 00:49 | So let's scroll down, and there
you see the logo in the header.
| | 00:55 | Now, for my design I am going to move
it outside of the header, and put it
| | 00:59 | into the outerWrapper.
| | 01:00 | So I am going to need to modify
both the outerWrapper, and the header.
| | 01:03 | I am going to first just grab the
header code here, copy it, because there are a
| | 01:09 | number of properties that I need to modify,
and there is no need to type them all back in.
| | 01:14 | So I will copy that, and
then go to style_phone.css.
| | 01:17 | Let's get rid of our little
placeholder, and paste in our existing code.
| | 01:21 | Now I am going to modify it.
| | 01:24 | In the Desktop version, we have 50
pixels up top and below. I am going to zero
| | 01:28 | that out, so we can
maximize our screen real estate.
| | 01:31 | The max-width part of my fluid grid
design, I am going to bring down from 51.75,
| | 01:37 | all the way down to 14.
| | 01:39 | And then I'm going to get rid of my
padding, as well as the white background, and
| | 01:45 | zero out all of my border-radiuses.
| | 01:52 | Now I'm ready to add in my background image.
| | 01:55 | So I will enter in background, and I
will restore the white background default
| | 02:01 | color, and enter in the URL to my new
small logo, which is located in the images
| | 02:06 | folder, and it is called tpa_logo_small.png.
| | 02:13 | Now, if you don't know the file name
and path to your image, you can always use
| | 02:17 | Dreamweaver's edit stylesheet to open
up the dialog box, where you can click
| | 02:21 | on browse for folder.
| | 02:23 | Okay, let's make this a no-repeat,
and center it, and put it up top. Okay.
| | 02:29 | Now, I also need to modify the header,
so I am going to put in my header rule.
| | 02:35 | In this case, I know that I need to
get rid of the image that's in the
| | 02:38 | background, so I'll type in background: none.
| | 02:42 | And I also want to bring the header
all the way to the top, so let's set
| | 02:47 | padding-top to zero.
| | 02:48 | Now, here is an odd one: in developing
this design, I found that I needed to
| | 02:54 | overstate the width, and set the width to
115% to make it work properly across devices.
| | 03:01 | So that's good; let's go ahead and save it.
| | 03:04 | We'll go back to Design View.
| | 03:06 | So now let's move from
Tablet down to Smart Phone.
| | 03:11 | If your screen does not Refresh properly,
you may find that you need to toggle
| | 03:15 | Live View on and off.
| | 03:17 | So we've got lots of problems with the
page, but you can tell that now I have my
| | 03:22 | new logo in place, and that was
the goal here. Mission accomplished.
| | Collapse this transcript |
| Manipulating content| 00:00 | I really like the idea of making your Web
content more relevant, depending on the situation.
| | 00:05 | For example, when I'm on the go, and I
need to check my flight information, I
| | 00:09 | don't want to wade through a
bunch of sales and specials.
| | 00:12 | I want to be able to click
on a schedule right away.
| | 00:15 | In this movie, we'll move our subnavigation,
which you can see here in Full Size
| | 00:20 | over on the right: Blast Offs,
My Tickets, etc. Front and center.
| | 00:23 | Now, there are a number of navigation
CSS rules to change, so the technique I've
| | 00:28 | found most efficient is to go into my
style.css file, go down to where the
| | 00:34 | navigation is, and I'm looking for
submenu, not the main menu in this case.
| | 00:39 | So I'll place my cursor in front of the
first rule, and then scroll down until I
| | 00:44 | get to the end. That looks like the end
right there; do a Shift+Click, copy that,
| | 00:50 | and now let's go over to style_phone.css.
And after the header, I'm going to go
| | 00:56 | ahead and paste them in, and then let's
go back to the top where it starts, at nav
| | 01:01 | submenu, and start to make our changes.
| | 01:04 | Now, some of the things, we don't need
to change, and those things I can remove
| | 01:09 | from my style_phone.css
sheet, like the font-family.
| | 01:13 | That will stay the same, and cascade
in properly, so let's get rid of that.
| | 01:16 | We are going to need to change the
width, and no longer will it be just a small
| | 01:21 | little version that we see here.
| | 01:23 | We want it to be 100%, because the goal
here is to convert these list items into
| | 01:28 | buttons that span the small phone screen.
| | 01:31 | Let's change the font-size;
drop it down to 1em.
| | 01:35 | We no longer are working with an
absolutely positioned element; instead, it's
| | 01:40 | relative, and because we're not working
with that, we can remove top and right.
| | 01:46 | Now, I have one other adjustment to make,
and honestly, this is from a trial an
| | 01:51 | error situation, where I found that I
needed to put in a margin, where the top
| | 01:55 | margin is -30px right, and
bottom are zero, and left is 30px.
| | 02:02 | Now, nav subMenu ul is next.
| | 02:06 | There is nothing I need to do with this,
so let's remove this selector entirely.
| | 02:11 | That all stays the same.
| | 02:12 | The ul li one, however, we
have some changes to make.
| | 02:17 | We can get rid of the line-height,
because that does not change, but
| | 02:21 | text-alignment does.
| | 02:22 | We want our text to be centered now.
| | 02:25 | I'm going to keep the text
transformation, so we'll let that be inherited.
| | 02:29 | Margin-bottom, I'm going to zero out,
and now I need to add a more button-like
| | 02:35 | appearance, so I'm going to add a gray
background color, and we'll do #666, and I
| | 02:41 | also want to add a border on
the bottom. So border-bottom, Colon.
| | 02:48 | Let's make this kind of broad at 2px.
| | 02:50 | We'll keep the dotted motif, and in
order for it to stand out, I'm going to
| | 02:57 | set it as white. Okay.
| | 03:01 | Next up are the two link states.
| | 03:04 | Here, we just need to modify
the color, and the border-bottom.
| | 03:09 | So we can remove display:
| | 03:11 | block, and text decoration:
| | 03:13 | none, and I'm going to put in a
white color for our standard link color.
| | 03:20 | Now, the border-bottom, I'm going to
go ahead and remove, because I already
| | 03:24 | have one set up here under ul li, and
if I have another one here, you'll get a
| | 03:30 | double border effect.
| | 03:33 | So let's set that border-bottom to none.
| | 03:35 | Finally, we need to change the color here.
| | 03:39 | Instead of a reddish color, I'm
going to make it go blue on hover.
| | 03:43 | And we'll change the background color
to a different gray, so I can give a rid
| | 03:50 | of both of these items, and then
just insert a background-color.
| | 03:59 | Okay, we'll save those changes, and
let's go to Design View, and then
| | 04:05 | switch to Phone size.
| | 04:08 | Looks like we'll need to toggle a Live
View off, and toggle it back on, and there
| | 04:14 | is my moved subnavigation, right under
the logo, so it's much easier to access.
| | 04:20 | And so now it looks like we've got just
what harried space travelers need, where
| | 04:24 | they can access it
immediately from their mobile phones.
| | Collapse this transcript |
| Restructuring navigation| 00:00 | Boy, is this primary navigation a mess.
Let's skip the snazzy intro, and get to
| | 00:04 | work cleaning it up.
| | 00:05 | By the time this is finished, I
want a clean and simple look for my
| | 00:09 | primary navigation.
| | 00:10 | So again, I'm going to go into style.css,
and copy all of the navigation styles
| | 00:16 | that affect the primary navigation.
| | 00:19 | And those are the ones that start at
nav.mainMenu, so I'll put my cursor there,
| | 00:26 | scroll down until we get to the last one,
and then Shift+Select, copy it, head
| | 00:34 | on over to style_phone.css, scroll down
to the bottom, and paste in our new code.
| | 00:43 | Okay, so now we're ready to start up at the
top, where it's nav.mainMenu, here on line 35.
| | 00:51 | And again, there are certain things
we're going to keep, so that we can delete
| | 00:55 | those entries, like font-family.
| | 00:58 | And one of the major things I want to
do here is reverse the color scheme.
| | 01:02 | So instead of white against a blue
background, it's going to be blue against
| | 01:05 | a white background.
| | 01:06 | So let's change the color
white to 00F, which is blue.
| | 01:13 | We'll keep the width at 95%.
| | 01:15 | We're going to shrink down the font-size
pretty heavily, because I see this has
| | 01:21 | just one or two lines of navigation that
goes across, right under the Transporter
| | 01:25 | Hubs, last item there.
| | 01:27 | So I'm going to make it .8em, and
because I have that new element above the
| | 01:32 | navigation, I'm going to
have to increase the top-margin.
| | 01:35 | So let's change that 20 to a 60, and
instead of auto, which will give us 60
| | 01:42 | pixels on the bottom,
let's just zero out the rest.
| | 01:45 | I can get rid of my overflow hidden,
| | 01:48 | and let's change this background-color to white.
| | 01:52 | Finally, I want to get rid
of the border-radius property.
| | 01:55 | Everything is squared off in this new
mobile phone design, and we're ready to
| | 01:59 | move on to the unordered list portion.
| | 02:03 | Basically, all of these styles are fine,
except for the last one, where I've got a
| | 02:07 | left and right padding.
| | 02:09 | Let's get rid of that, so we
can use all of the space we can.
| | 02:12 | So padding is now at zero.
| | 02:14 | Next we'll move on to the list items: the li.
| | 02:18 | We're still going to be floating
left, so let's remove that property.
| | 02:23 | Padding-right, I'm going to
reduce from 35 to 15.
| | 02:27 | That will still give us some
separation, but not too much.
| | 02:31 | And now the alignment, we're
going to change from center to left.
| | 02:37 | Now let's work on the link states. We
can dismiss line-height and display:
| | 02:41 | block, and let's change our color, again, to
the blue, and our background-color to white.
| | 02:52 | We can also remove the text-decoration
link, since that's covered by inheritance.
| | 02:58 | Now, I'm also going to swap these two colors.
| | 03:02 | This D32020 is a dark red, and I'll make
that my text-color on hover, and set the
| | 03:10 | background-color to white.
| | 03:12 | Okay, let's save it. We'll
toggle the Live View off, and back on.
| | 03:18 | Well, that's certainly a relief.
| | 03:21 | Now our primary navigation links are
very easy to read; they don't take up too
| | 03:25 | much valuable screen real estate.
| | 03:27 | Although, I notice that I've got a little bit
of a glitch here, with a little bump leading out.
| | 03:32 | That probably means that my
width is just a little bit too wide.
| | 03:37 | So let me go back in to style_phone.css,
move down to nav.mainMenu, and let me
| | 03:48 | modify this width here; I can try 94%.
| | 03:53 | Not quite right; let's go to 93%.
| | 03:57 | And when I click Back,
everything's looking good.
| | 04:00 | Sometimes it takes a little trial and
error before you can get it nailed down
| | 04:03 | exactly the way you want. Overall, good job.
| | Collapse this transcript |
| Making blog content more accessible| 00:00 | Our final task in creating the
mobile phone stylesheet is to bring the
| | 00:04 | content into proper shape.
| | 00:06 | We will have to work with both structural
elements, and content related tags as well.
| | 00:11 | Let's get started.
| | 00:12 | So again, I note that I have a contentWrap
rule that I need to set the margin to zero.
| | 00:17 | Let's go ahead and do that. I'll open
up style_phone.css, and let's move to
| | 00:22 | the bottom, and we'll put it in a contentWrap,
and make that margin zero; close the rule.
| | 00:33 | By now you remember that there are two
main areas: content, and the widget-area,
| | 00:38 | which is the sidebar.
| | 00:39 | I am going to set both of those to a
width of 100, and get rid of the float
| | 00:44 | that's on the content selector.
| | 00:45 | So let's start with content, and set
that width to 100%, and the float to none.
| | 00:52 | We'll also set the width
for the widget-area to a 100%.
| | 00:57 | Let me save my file, and then toggle
Live View on and off, and we'll take a look
| | 01:10 | at where we are at right now.
| | 01:12 | Well, it looks like everything is
lining up pretty well, from content, down to
| | 01:16 | sidebar, and back up again.
| | 01:18 | It does seem that I've got a little bit of
extra space around the paragraph tags here.
| | 01:24 | So let me go back into style_phone.css,
and as we did with the tablet, we'll
| | 01:32 | add in a paragraph selector, and narrow down
that top and bottom margin from 1em to 0.5.
| | 01:44 | Again, we'll save. Let me toggle it
on and off, and it's subtle, but it's
| | 01:50 | definitely less space there.
Alright; all done!
| | 01:56 | Although we saved the content for last,
it's obviously a critical component in
| | 02:01 | your mobile phone styling.
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | Thanks for taking my Dreamweaver and
WordPress: Building Mobile Sites course.
| | 00:04 | I hope you found it helpful, and are
ready to work on your own WordPress-based
| | 00:08 | mobile sites in Dreamweaver.
| | 00:10 | If you want to dive deeper, check out my
other Dreamweaver and WordPress courses
| | 00:14 | here on Lynda.com in the
Online Training Library.
| | 00:18 | Have a great day.
| | Collapse this transcript |
|
|
