Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:49 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 A Simple, but Flawed, Approach

Welcome to the first lesson of this course. Before we start solving problems, we’ll take a look at a very simple approach to the desktop to mobile situation, one that a lot of people use. I’ll show you what that is and why it’s best to avoid it.

Let’s begin.

1.2 A Simple, but Flawed, Approach

Welcome to the first lesson of this short course. In this lesson we're gonna have to look at a very simple approach to our desktop to mobile navigation problem. And this is something that a lot of people will probably. So I'll show you what it is and why it's best to avoid it. So I've prepared a very simple example here, this is a typical navigation menu that you would find in a website, it has some top level elements that also contain sub menus, some of them even two levels deep. So when we go to a smaller screen size like this a lot of people will prefer to just stack the logo and the navigation on let's say medium size screens. And going further down to an even smaller screen size, they would prefer to just hide those submenus completely. Because if they don't hide them, they're gonna have problems with the very short, or very small width of the screen. Those drop downs would overlap with these menu items, which are stacked and that will just create problems. While it is a very simple to do this, so you just write a few lines of CSS, changing a couple of things, for example stocking the net bar and the logo. What else? Just aligning the text to the center and just hiding certain bits. It's not really a recommended approach. So why is that? Well, first of all, if you have more than four menu items, like I do here. You're gonna have quite a long list of items right here in the navigation. So that's just gonna take up a lot of screen real estate which in a mobile device is really precious. Second of all, it's a bad practice because you don't have access to the sub-menus anymore and maybe those are important, even on a mobile device. Another reason is that these links in their current format sometimes are hard to get the right one tapping on a mobile device with a mouse on a desktop sure, it's really easy because you have that cursor but on a mobile device you might find the whole situation a bit problematic when you're trying to tap on a specific link. Instead of doing this, in this course we're going to explore five different approaches to basically transform this menu from this desktop to a more mobile friendly one. And we are going to cover two cases. The first case is when we have simple menus with no submenus and very few list items, like we have here. And the second case is when we have more complex menus, like those with submenus or with a multitude of menu items. So we're gonna start exploring those patterns, those options, those methods, if you want, in the next lesson, where we're gonna build a simple slide down menu. So thank you for watching this lesson, I'll see you in the next one.

Back to the top