Click on any phrase to play the video from that point.
Hi. I'm Greg Rewis, Principal Evangelist at Adobe.
And I'd like to talk to you about Creative Suite Web Premium 5.5,
and specifically Dreamweaver® CS5.5 and how it can help us
address a problem that's growing on the Web.
Well, actually, it's more growing in our pockets and in our purses,
and that is the mobile Web.
And how do we present content to those mobile devices?
Now, I'm here in Dreamweaver® CS5.5, and you can see that we've got a page
that looks great for our browser-based viewers.
In other words, those guys that are visiting our site on a desktop browser.
It's going to be great. We've used HTML5 and CSS3, but if we go to look at this page
on a mobile device such as an iPad or a mobile phone,
we're going to see that the experience is not quite as optimum
as it is in our browser.
Here on my iPad, the page actually looks quite good.
In fact, it looks exactly like the page did over inside of Dreamweaver®.
But the problem is, I'm still going to be pinching and zooming
in order to read the content, and it's a constant move around and move around,
panning and zooming.
And that's on an iPad, a nice big screen.
When we get smaller, on my Motorola Atrix™, we can see that
wow, I can't even read the text there, so I'm definitely going to be
zooming a lot and tapping to reformat and tapping to move back out.
It's just not a great experience
when CSS3 provides the capabilities for delivering
a specific type of presentation to these devices. It's called Media Queries.
Let's go back to Dreamweaver® CS5.5.
And notice that in Dreamweaver® CS5.5, we have a multiscreen preview button.
Now when I click the multiscreen preview button, I'm actually going to see my page
divided up into three sections here in the preview
for display on the phone, on the tablet, and on the desktop.
And as we can see, it's actually the exact same layout, same content
that we are already seeing back over on these mobile devices.
But I want to change that presentation, but just when you're on one of these types of devices.
So I'm going to use the Media Queries button.
Now when I click up on my Media Queries button, I have the option of specifying
a CSS file for either this document or site-wide.
If I'm going to be using a lot of different pages or laying out a lot of different pages,
this would probably be my option. But for right now, for the purpose of this demonstration,
I'm just going to add these media queries to this document only.
Now, additionally, devices out there in the mobile landscape vary
from platform to platform and even from browser to browser on the various platforms,
and for this reason I'm actually going to have Dreamweaver® write a little piece
of metadata to actually tell the browsing device to report its true size.
Now, to get started quickly, I've got a default preset button
that I can simply click, and that's going to lay out three different
types of CSS files--one for the phone, one for the tablet, and one for the desktop.
Of course, we can change the names of these and the attributes themselves.
So I'm going to start with my phone, and maybe just for purposes of demonstration
I'll just call this "Mobile" instead, and I want it to specify exactly what the width and height
values are for that particular phone or device that I am going to be viewing on.
And one of the things that I want to make sure of is that, again, we don't
go beyond the specified parameters.
So I have a max width value here that I'm going to change.
I'm going to say that the maximum width would be 400 pixels.
In other words, I don't want any device that is larger than 400 pixels
to read this particular file.
Again, if I was doing this all from scratch I would begin by creating
a new CSS file. But for the purposes of demonstration,
I've actually got an existing file that I'm going to link to.
So let's go into our CSS folder here, and notice that I have
a Mobile CSS file.
I'm going to say, "Well, I'd like to link to that Mobile.css file,
and then for my tablet I'll do the same.
Now I'm going to then specify a minimum and a maximum width
so that they do not overlap.
Since I had a minimum [maximum] width of 400 pixels on the phone,
I'm going to say 401 as my minimum here, and then I'm going to say
800 for the maximum. That way I'm targeting any device that is
between those two value ranges.
Now, again, I'll just simply link over to my Tablet.css file.
And then finally, for my desktop--that's my large screen, let's call that.
I'm going to say anything that is beyond that maximum range
that we had for the tablet--in other words, that was 800 pixels,
so I'm going to say 801--I want to use my desktop or my large existing file.
So we'll just ask for the large file.
And now we've set up three different profiles.
Again, I can keep adding. Those were just my defaults.
But if I click my plus button, I can add a fourth, a fifth, a sixth,
to specify all of the specific devices that I am wanting to target.
Now once I've done all of this, I'll go ahead and click OK.
And we'll see that immediately things change.
Here in my preview I'm actually seeing--wow, something definitely did happen here
in this phone and tablet view.
Now, down in my desktop view it still looks exactly the same
as it did before.
But in the tablet view, if I begin to scroll down we'll notice that, wow.
I've definitely got some changes that have happened right here.
These changes, of course, are reflected in that CSS file going to my phone--
just scroll over just a little bit. Oops, and I've got a little bit of a redraw issue here,
but we'll see in just a moment that my phone is actually changed as well.
Now let me go ahead and close this window here.
Going back into Dreamweaver®, I've set these values up,
I've set these layouts up, but here in Dreamweaver® I'm only seeing
my desktop view.
So what if I wanted to make some alterations to my phone or my tablet view
to fix any of the problems that I might have on those devices?
I don't know how to do that, but Dreamweaver® CS5.5 comes to the rescue once again.
Now first, let me just go ahead and go into split view just so you can see something--
Oh, wow! Did you see that? Did you see it happen?
Let me go back out into design view one more time.
Now go into split view. Now watch the layout happening here
as I go into split view. Something has definitely happened here.
Yep. Something has definitely happened, and what has happened?
Dreamweaver® is reacting to the width of the design view window.
Let's go ahead and sort of scroll back out just a little bit
and see if we can get beyond that size, and of course it's probably going to make me
go all the way--ahh, there we go.
When we reach that--whatever that was--800-pixel level, it switched over
to become that view.
Now, of course, makes it sort of hard to type in this small of a source code window.
That's why, of course, you don't have to do this.
You also have the option of going down to our media manager, our windows size manager
and saying, hey, I'm going to be working on a 320 x 480 smartphone.
I want to be--have that view.
Or I'm going to be working on a tablet, and I'll go ahead and switch to that view.
And you can see that now Dreamweaver® is actually displaying that,
but it was doing that before, so let's switch to the phone view.
And there we have the phone view being displayed.
Now, I've obviously got some changes here that I need to make
in order to--to satisfy my viewers on these devices.
I've already done that, just like any good cooking show,
so let me go ahead and show you that finished file.
So here's my finished file, and I'll turn on Live view for you so that you can see that
here again is the default view that we have inside of our browser experience.
And then if we switch down to our Tablet view, again, that other experience.
Now, every now and then you might need to hit the refresh button
just in order to get the page to refresh to exactly the way the browser would see it,
because, of course, your browser, your iPad is not going to be changing sizes
like we are doing here inside of Dreamweaver®.
So I'm going to go on down to my Phone view,
and you can see here we have our phone view
optimized for that particular experience.
And, again, the proof would be in the pudding.
So let's actually go and take a look over on our devices to see that that experience
has now been applied across all three.
Starting here on our desktop with our full-size browser experience,
and then moving over into our iPad, where you can see
this page looks completely different on my iPad.
We can scroll down a little bit further to see that the entire page has been stacked
from three columns down into a single, very wide column.
Now, of course, we know that on touch screen devices, hitting things can be very difficult.
So for my mobile experience, I've actually taken my navigation
and made it have much larger buttons that will be much easier for me to hit.
A much better experience and, of course, again still seeing the other content
scrolling down below just as we did on the iPad.
Use media queries, we can deliver content;
we can present the same content in a different way across multiple screens.
And we're doing it all inside of Dreamweaver® CS5.5.
[Adobe TV - tvadobe.com]
