Join Ray Villalobos for an in-depth discussion in this video Making footer-like buttons for a handheld device, part of Creating an Adaptive Web Site for Multiple Screens.
One of the great advantages of CSS is that you can take something that looks just like text and make it look a lot more graphical. So if you pull up our web site, you go to the very bottom of the page you can see that on navigation at the bottom in the footer is just a bunch of text elements separated with a vertical text bar. We want to make those look more like iPhone buttons, so we're going to take care of the CSS to handle that. Open up your exercise files, and then your Working Folder and you'll remember that we have a special folder called the icons where we've designed some icons for use on our application.
So we're going to add those to these buttons and make these buttons to look how normal buttons look on IOS devices, so let's open up our handheld CSS and we're go to our codesnippets and copy this. This is going to be a lot of code, a lot of it is just taking care of different browser platforms here and we'll go back to handheld and paste that code and I am going to save this go back to the simulator and just refresh the page. So now you can see that our buttons look a lot more like icon buttons, lets see how that's done with CSS.
So here is on footer, first thing we did is we set the position of the footer element the entire footer element to be fixed that means that when you scroll it on browsers it'll stay put at the bottom of the page. Right now, our simulator is running iOS 5 which is a newer version of the operative system. Let's take a look at how this would look on version iOS 4 and so I have an actual device a phone here to show you what the difference would be. So let's pull this up on our phone, so if I scroll this up you'll see that the menu actually moves with the rest of the page, that's because fixed positioning on iOS 4 is not properly handled by the phone.
One of them is CSS3 Please! where you can go and type in the colors of your gradients, but for gradients a better one to use is the ultimate CSS Gradient Generator which is right here. It has a lot of presets and it's a lot more visual. It also allows you create Color Stops which are sort of difficult to do in CSS3 Please!. Some additional adjustments to the footer navigation itself, the navigation is the actual list of buttons remember just before we apply the style it just looks like a bunch of text links.
So we need to clean that up as well and make sure that the margins and padding were set up properly for this device and that the links are also working like they should. So we've got a little bit of spacing on some of the buttons to make sure that they are wide enough. Our font is now a lot smaller, it's floating each one of these elements to the left before we had the floating to inline; remember that when you are setting a width of an element it needs to be displayed as a block element not an inline element. And we've done some other slight adjustments to the color and some of the borders notice I have a double border here, a border to the right and then a border to the left, just to give that slight embossed that look you can see on most iOS buttons.
And then finally here I need to make sure that I reset the first-child of each list item to make sure we don't have a border on this side and the last-child of each item to make sure we don't have a border right here at the end, and then I go through and I load up a background icon which is what these things are the icons actually appear at the top of these buttons are loaded by just applying a background to each id Element that I created early in the index file. Let's take a look at the index files so we can see where that is. So you might have been wondering why I gave each one of the buttons an individual id most of the time you don't do that.
In this case I wanted to make sure that I could apply a background icon to each one of these items, so I need to identify them individually in my CSS and that's what I am doing right here. Just calling each one of these icons, and then I want to make sure that the background doesn't repeat, remember backgrounds in CSS normally repeat over and over. So you just want to make sure that it only appears once, and then I am centering the button within the element which is why I gave those anchor tags a white width over here.
Now if you've noticed we've got this call us button that looks like a normal iOS button and it was something that didn't show up on the desktop version, but it shows up on the handheld version and we're not going to wanted to show it on the tablet version, but it shows up right here. The purpose of this button is to make sure that users can directly call the restaurant. Most of the time when you're visiting a food web site that's really what you want, you want to be able to call the place and place a reservations, so we added this button on handheld devices and if you click on this button on the iOS simulator, you're going to get an error that says cannot open page.
Safari cannot open the page because the address is invalid and it's not recognizing this link that we created here as a button, you can see the link, so in the index file and at the very end, we've this formatted as a telephone link right here. If you go to an actual iOS device, you'll see the button at the bottom of the page and when you tap on that button the phone will try to call the restaurant directly. So that's a link that you're not going to be able to see on the iOS simulator, but it'll work just fine you still want to test it on your device.
- 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