Join Joseph Lowery for an in-depth discussion in this video Working with tablet layouts, part of Layouts with CSS in Dreamweaver.
Tablets are becoming increasingly popular and bringing with them a smaller design footprint. Whereas desktops are moving towards the 3000 pixel wide range tablets are more likely to be 1024x768 when in landscape orientation and just 768 pixels wide in portrait. Let's take a look at someways to refashion a desktop monitor web page to a tablet screen. On the screen is trails.htm. I'm currently in a Live View so you can see the full desktop range.
I want to show you that media query code here we have our desktop link on line 11 and you can see that this is set to trigger whenever there is a minimum width of 321 pixels and a maximum width of 768. So it's sitting right there in between the phone and the desktop. Now the first thing that we're going to do is switch over to the main.css which is the stylesheet that we have for the desktop. I'm going to press Command+A, Ctrl+ A on the PC to select everything and then copy it, move to tablet.css and let's also do a Command+A just to grab that charset rule there.
Now we're going to paste in all of the copied CSS styles. Okay, so now when we go back to Design view if I switch to the same size for the tablet I'm going to take advantage of the CS5.5 feature here under Window Size to go directly to a Tablet. You can see that I now have some styles applied its exact same styles that we have for main.css. And now it's time for us to make the modifications necessary. So that it fits better in this form factor. So let me to expand my panel group and then close off the Insert panel a bit and the Files panel so that we can concentrate on the CSS Styles panel and the first thing we're going to do is change the overall size and that's set by the wrapper tag.
If you click anywhere into your design you can see that the div right before the body is wrapper. So if you select that and have your CSS Styles panel in Current mode you can see that it goes right to the wrapper rule and the width is set at 1100 we're going to bring that down to 768 pixels. And as we do of course the elements get rearranged, because they don't have room to expand. So now we'll start to address those very elements and I'm going to start at the top with the navigation and then work my way down the page.
So I'll select any of the nav elements just to see what rules are applied their and let me move the Properties pane down a bit so I can see more of them. Now I start to see that there is a nav tag here. This is an HTML5 page so it's using a nav tag rather than a div with an ID of nav, but it's the same concept. And here I see in my rule header#mainHeader nav and that's addressing the overall navigation, but what I want to do is first change the font-size here bring that down just a little bit.
So I can look at my summary section and scroll up a bit and see that the font-size is 1.2em and if I hover over that summary rule it will tell me exactly where it's located. So now I need to find that rule and there it is the header#mainHeader ul li a which is targeting the anchor tag. And here I can see my font-size is set up to 1.2ems so I'm going to bring that down just to 1em and that has a bit of an effect is not quite enough.
Now fill the other things I could change our letter-spacing and padding. One of the strategies that you want to follow when you're converting desktop CSS to tablet CSS is to really only make as minimal changes as possible, because you're not reducing that width that radically as you would be when converting to a phone. So rather than try to change the letter-spacing let's change the padding here and I'm going to change the 20 pixels to 15 and that seems to work. Now see if I center my page a little bit yes, it looks like we have a full width there so that looks pretty good.
Now next step is my h1 header that I have here that says Trail Guide. And one of the first things that I want to do is move it up, because you can see there is an awful lot of white space here and I want to trying get both the h1 and h2 your complete biking trail source inline with the Explore California. So the first thing that I want to change with this h1 is the font-size and you can see it's here in shorthand. So let's change that from 6em let's bring that down to 4.5 see how that looks.
All right, we have everything on the same line. However, it's moved up a little bit too high I want to have it in the same line as the bottom of the logo there. So let's increase that margin-top from 0.2 to 0.7. That's not bad; however it looks like we can probably bring down the h2 which is just a little bit too tight. You can see that the biking and trail now are really right on top of each other and if we want to add a little bit more room there I want to look for a margin-top property that affects the h2.
So let me check that and yes here is 1 where the margin-top is set to -25 let's change that to -20. Okay, that looks a lot better. So now let's move onto the main content. Now as you scroll down you can see that the first column is pretty wide and the second column also wide. They're both too wide to fit into this new width. So let's go back to the main content area and I'll put my cursor in there to select it and I see that this is called Trail Info.
It's a section which is an HTML5 tag called Trail Info. So if I select that I could see a couple of properties here and I select the second one and there is my width set at 600. Let's reduce that to 425 that looks like that was a significant reduction. Now let's scroll down to where the second column is and I can see that this is an aside which is HTML5 speak for sidebar. So I'll select that and again I have a couple of rules I don't see the width there so I'll look on the second one and there it is.
Now let's change with that width to 300 pixels and now we have both columns side-by-side and a reduced h1 a tightened up navigation section it's looking pretty good for the tablet. I'm going to go ahead and save tablet.css by going to File>Save All Related Files. So now if we switch to another view of a larger screen let's go to 1280 there and there is our larger view and now we go back to Tablet we can see that the CSS is adapting very nicely.
I think you'll find that while the leap from desktop to tablet screen size is not as significant as the one from desktop to phone, it's large enough that creating a tablet specific presentation should definitely be considered and hopefully the techniques demonstrated in this video will help you make that happen.
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts