While a lot of layout in a website can be done with your grids, you don’t want to necessarily use grids to display tabular data. Therefore, you want to use a table. Bootstrap has given us several CSS classes that we can use to easier layout our tables. For basic styling, you will only want…
Bootstrap sets the fonts and typography as part of its layout. However, they’ve added several classes to help you out. Headings For example, they have classes that mimic your heading tags. So if you need a large size text, like an H1, but it’s not appropriate to add an H1 tag, you can apply the…
You can build a normal webpage and put it into a jQuery Mobile site. It works, however, it doesn’t give you all the effects of a regular jQuery Mobile Look and Feel. To add that mobile feel, you will want to add some classes to an existing website – to give the full enhancement, and…
Unlike working with Navigation in the mobile environment, forms input will be more about styling and proper use of HTML tags/attributes. Because of the size of the screen, we need to find good ways that we can overcome the small space. This means providing an easy and clear way for users to enter information into…
Coming up with a good navigation structure is important in mobile web design. We’ve already looked at some issues when dealing with navigation in mobile devices. Now we are going to look at some ideas on over coming these problems. Problem Recap Just to recap some of the problems we may experience: Taking up too…
The process for designing for a mobile webpage isn’t that conceptually different from a desktop. It just requires you to use some extra steps. For example you will normally follow a basic formula of: Receive Project Requirements Sketch out/mock-up designs Build HTML Test in various browsers Modify as necessary Repeat testing The core difference is…
Designing for Mobile brings in some interesting problems. Some of these problems are true regardless of if you are trying to develop via a fixed or a flexible size page. We’ll look at overcoming a couple of common problems, and then building a basic template to use. Auto Scaling of Web Pages For example, most…
Previously we’ve talked about network limitations for mobile devices, and limitations in the mobile device itself. Now we will look at the limitations of the user/design aspect. No Hover State The hover state allows users to know where they are going to click. It provides a very simple method to give visual feedback to the…
