Join Joseph Lowery for an in-depth discussion in this video Optimizing navigation for phones, part of Dreamweaver and WordPress: Building Mobile Sites.
Continuing from the previous movie, we are going to work on navigation next.…It's important to keep in mind that mobile screens are a pointing-centric…device, not a mouse-centric one, and that fingers are just a tad bigger than…tilted wide arrowheads.…So, in our navigation section -- which I am going to label here, just to make it…easy to find -- if we scroll up to the top of the document, you'll see that that's…one of our major problems: that the nav bar is quite enormous.…
So let's go ahead and bring the nav tag down to 320 pixels,…so I'll set that width at 320.…Now, I want to do a fair amount of styling here.…I want to reverse the colors, so we drop out the heavy blue background, and I also…want to get rid of the rounded corners.…So let's make the background-color white, which is triple f in…hexadecimal, and the color, we'll set to blue.…
Now, I need to bring it down some, so I am going to add a margin-top of 40 pixels,…and then also get rid of all of the border radiuses.…So there are three rules that govern the border radiuses; two browser specific…
- Setting up an existing WordPress site
- Targeting configurable site elements
- Setting up media queries
- Preparing for adaptive images
- Styling a blog for tablets
- Restructuring navigation for different-sized displays
- Developing a WordPress site for phones
Skill Level Intermediate
Dreamweaver and WordPress: Core Conceptswith Joseph Lowery5h 44m Intermediate
1. Preparing Your Site to Go Mobile
Understanding media queries3m 50s
2. Retrofitting for Multiple Screens
3. Implementing a Full Mobile Redesign Strategy
4. Styling a Blog for Tablets
5. Developing a WordPress Site for Phones
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.