Join Ray Villalobos for an in-depth discussion in this video Redefining the menu CSS for tablets, part of Creating an Adaptive Web Site for Multiple Screens.
Now that things are working well for handheld devices, let's take a look at some adjustments that we have to do on tablets. We do want the tablet layouts to be a little bit different, take advantage of the additional size to display photos a little bit bigger on the menu list, give the user a slightly different experience, because they have all that extra room to work with on tablet. We're going to switch our Simulator to a different device the iPad. We'll load that up. The iPad Simulator runs normally on 50% mode. So just remember that what you're seeing here, it's an actual iPad at 50% size.
If you want to check it out at 100% scale go to the Window menu and select the 100%. If you have a very large screen, or your screen is set up to be rather big, you can see that that is sort of an actual view on this screen where the resolution is set to be a lot lower. It doesn't exactly fit. So this is not a particularly comfortable way of looking at things. So we really have to go to a different scale, I don't even think 75 will quite get everything in there, so the only one that works really well at least for development purposes is 50%.
Sometimes this is one place where maybe a device might be better just because you could see it, although this works pretty well. If you happen to have an actual tablet, here is a place where you might want to take a look at it where it might be more comfortable for you to look at this on a tablet. So you can see right now, it's loading up our site and it still has the menu version of it. We'll need to make some adjustments here. Right now, we don't really have any styles applied. Remember that when we did the styles for the phones, we actually created a whole series of styles for handheld devices and none of those styles are applied to this as well.
So it's back to when the menu just looks like the desktop. You can tell that this is maybe not the best experience for this device, mainly, I think maybe because of the orientation doesn't look good when you just planned this in this fashion. Let's see how we can improve things and we'll see also how we can utilize a lot of the work that we've already done for handhelds in working with tablets. I'll open up my exercise files, look in the Working Folder and we're going to be working with CSS, so I'll open up the underscore folder and the css and we'll open up the tablet.css file and it should be blank right now so there are no styles being applied.
We could definitely go into our styles for our handhelds and just copy and paste everything in here and start customizing this. We could do another approach where maybe we copy and paste all the code and then at the very end because of the cascade we can override some of the existing tags by just repeating the tags afterwards and typing new settings for the new tags. What I want to do is just have the browser, bring in all of the tags from the handheld version into this and I could do that with just a single line of code.
So I don't have my snippets loaded up here, let me just pull them up here really quick. I'll just drag them into my TextWrangler here. We'll scroll down and see that the first line of code here is what we call an @import rule, that just means that you're going to ask the browser before it does anything in this CSS document, you are going to load up a different CSS document on top of this one. So this is a really handy rule because it will save you a lot of time and I am going to just copy that line of code right there and just insert that into our tablet.css and I'll save it, come back to our tablet here and refresh.
Now it's looking exactly like the handheld version, which doesn't look great either, but at least it did things like import our styles for our tabs and other things as well. It brought everything in. So that saves us a little bit of time. Now we can start styling for the tablet itself. We'll copy the rest of this code. You will see that it's not a lot of code because all we're doing is just fixing some of the changes between the handheld version and the tablet version. So when I paste this right here, we'll save it and you'll see that now we have a completely different look right here and essentially, we're just going through the food list and adjusting a few things.
After we import everything from the handheld device, then what we are doing is make sure that we do not display the button at the very bottom that lets you make phone calls and we change the size of the header image because it was set up for tablets, we want it to be a little different here, a little bigger probably. We also want to change the size of the food lists and to make sure that the information also of the food list which is this area right here doesn't display next to the item, it displays underneath.
We've made some changes here to the food lists itself to make sure that they display at the bottom of each element as opposed to next to each element. That's pretty much it for this code. Everything else, it's going to pick up like all these tabs from the previous handheld device and we didn't have to write any of that code which is great because for maintenance purposes you don't want to have the code in two places because then you end up making changes in one and have to remember oh I need to make that change on this other one and it becomes really messy, so it's a good idea to organize your files and make them as efficient as possible to make sure you could be a quick developer.
- Setting up testing servers and emulators
- Creating and formatting a site template
- Using free Google fonts
- Preparing graphics
- Creating style sheets
- Loading external pages with AJAX
- Creating mobile tabs
- Detecting mobile devices
- Testing and debugging site code