Today it’s more common to find a skilled web artisan who understands desktop support over mobile. This appears to be a symptom of building on the desktop browser for decades as opposed to other screens. Yet there is a growing case to argue that mobile development is the best place to start on new-age websites.
In this article I’d like to discuss a few key points in this argument. Namely that starting on mobile first will give you insight into how the design layout can unfold on larger screens. Prioritizing mobile isn’t always the best solution, but on today’s Internet it appears smartphone usage is growing at an alarming rate. Any web designer truly interested in building semantic layouts will jump at the idea of coding websites for mobile first.
Simplify all Page Elements
A solid approach is to consider limiting your website to only key elements. When you can strip down a design idea into bare essentials it makes the process of building on mobile screens all the more easier. But why would you want to start in the mobile realm?
Well, it allows you to approach each project with a clearer perspective on goals and user objectives. You have to ask yourself What do I want my users to be doing? What do my users want to do? Mobile screen real estate is much pricier than monitors or laptop screens. You have to utilize the space you’re given to fit all components neatly in place.
If you can put together such a layout on mobile then it will be much easier transitioning into the desktop environment. There is an old concept that placing limits on your design work will actually help you achieve a more narrow focus. I absolutely feel this holds true for mobile web design which gives all the more reason to prioritize smartphones first.
Understanding User Needs
The requirements of your visitors will change drastically from person to person. Whether you’re building a personal project or working freelance it’s crucial to spend a bit of time thinking about activities on the site.
Are visitors mostly coming into the site via Google searches or social media? Think about what are the most popular features in the layout (search, page navigation, login/logout).
With these ideas in mind you can prepare a much more complementary mobile web design. And prioritizing this first means you’ll have a bit of knowledge when moving into desktop web development. Considering websites are built for the user experience you should spend as much time as needed to plan out these features. Test run a couple of different layout ideas in plain HTML to see how they feel in a mobile browser.
Discussing the mobile web would not be complete without a bit on tablets. The new iPad 3 announcement will only increase hype for users looking to make the transition. And browsing a website on your laptop can appear much different than on a touch screen device.
Yet obviously most tablets do not have the same limitations as you’ll find on mobile phones. The iPad 2 screen resolution is limited at most by 1024×768 which should display modern layouts just fine. If you choose to work with a focus on all mobile devices you’ll need to plan ahead for each resolution setting.
I recommend starting with the smallest possible screen size and working your way up. This can be accomplished with CSS3 media queries by including different stylesheets based on the device width. Yet there is also the option of building a single layout with responsive capabilities.
Coding Responsive Layouts
Possibly the simplest solution for supporting all mobile devices is to build your layout with responsive properties. This means the whole website and inner content will re-form itself to fit the particular screen resolution – even as the user resizes their browser window.
If we place a priority on mobile design then building a responsive website makes a lot of sense. You don’t need to include particular stylesheets for different devices since the same HTML markup works on all screens. This also provides the perfect reason to start with mobile first. Once you know that your layout renders properly in mobile screens it’s simpler to fix bugs related to desktop browsers.
The best way to jump into this topic is by looking at similar examples. You must understand how responsive websites perform on a mobile phone vs. a desktop and how you can code these features. I highly recommend our gallery of 40 responsive websites to get you started on the right path.
Shifting the Navigation
Typical desktop browsers and even tablets may support more convoluted link hierarchies. You can use jQuery to enhance navigation with dropdown menus or slideout effects. This is all well and good if you have space on the screen to interact.
Yet touch screen devices do not support mice, and even worse it’s difficult to port over jQuery menus onto mobile. Whether you’re building responsive or coding a separate mobile layout, either way will require some finesse to move around your page navigation. But understand there is no “right” or “wrong” placement for nav links.
I find that building block sections of the page to cascade down is the simplest solution. You can even still use simple jQuery effects to slide open hidden sub-menus if needed. Keep in mind there isn’t a lot of room for links so you’ll have to stick with the most popular root items in your navigation.
Alternatively you could push all these links to the bottom of your page and include a hash anchor such as
#btmnav. This alleviates room at the top of your layout once the website loads. But it can be confusing if visitors don’t know where to find the navigation items.
Handling Image Content
In-page media can be the trickiest to work around on mobile screens. If you’re considering building for mobile first then it’s difficult to gauge just how large your photos should be.
With the CSS property max-width: 100% you can setup all images to contract and expand up to their maximum point. This is the best way to respond with users on a mobile screen while also supporting full-sized images on desktops. And the best part is that all forms of media(including HTML5 video) will support this property as well.
Now the alternative solution is to build a set of images targeted towards mobile screens and another set for standard displays. This is trickier since you need to support Android and iOS devices while iPhone also requires retina images at double the standard resolution. To learn more about this method check out Ben Frain’s awesome article on how to serve high-resolution images for retina displays.
There are plenty of reasons to focus on mobile web development from the get-go. It’s a realm of technology which has been widely ignored for a long time. Thankfully advancements in mobile web browsing have forced designers to consider this ever-growing form of screen media. If you have similar ideas for building on mobile first you can share with us in the post discussion area.
You may also like…
40 Dribbble Shots for Mobile and UI App Design Inspiration →
Creating Pixel-Perfect UI for iPhone Applications →
Getting Started Building iPhone Apps in Xcode 4.2 →
Android App Developers GUI Kits, Icons, Fonts and Tools →
iPhone Development GUI Kits, Wireframe Stencils and Icons →
40 Professional and Detailed Web Layout PSD Templates →
A Collection of Useful Web Design Wireframing Resources →
A Useful Selection of Android Developer Tools and Resources →
Illustrator Template Toolbox for Web, Mobile and App Developers →