The growth of mobile devices has impacted website design. Smaller screen sizes and touch interfaces just scratch the outside of designing for mobile. In the event you don’t have a mobile version or app of your site, there hasn’t ever been a more pressing time to develop it. Whether you’re planning a mobile-specific site, responsive design, or mobile app, listed below are six tips about designing for mobile.

This piece can not address CSS and HTML topics. Instead, I’ll concentrate on the fundamental visual elements of mobile development. Use the following tips in developing a brand new mobile-friendly site or app, or review your current mobile solution for design areas you have overlooked.

1. Design for Thumbs

Arguably the foremost thing to keep in mind when designing for mobile is that users won’t interact along with your site using the pixel-precision of a mouse cursor. Instead, users is often using their thumb or index finger to click, scroll, and highlight. This suggests your call-to-action buttons, menu items, and links must be sufficiently big for users to simply press using their finger or thumb.

Many mobile sites understand the will for giant buttons, but often neglect large menu items and links. Small links are especially frustrating when displayed in groups — as is frequently done with sidebar menus — as it is simple to incidentally click the incorrect link. Counting on a user’s Internet connection, this could trigger a several second load time before the user can click the link they intended to click within the first place.

Make all actionable items big enough that users can easily tap them and include adequate space around actionable items to prevent users hitting the incorrect item. It can be difficult to pin down a particular minimum dimension due to the varying size and resolutions of other mobile devices. It really is where you could have got to employ responsive design to make sure your links and buttons are easy to make use of. Extensive testing on mobile devices should provide you with a transparent idea of even if your buttons and links are mobile friendly. Remember, it’s not only call-to-action buttons that must be sufficiently big for thumbs. It’s every important clickable item to your site.

2. Avoid Using Long Forms

Filling out forms on mobile devices is tedious for several reasons. First, many sites don’t “design for thumbs” on the subject of forms. This makes choosing the right or required field difficult. Second, selecting a text field prompts the on-screen keyboard to pop-up, hiding the underside section of the screen and making it difficult to head directly to the subsequent text field within the form. Because many mobile keyboards don’t have a “tab” button, users are forced to cover the on-screen keyboard and manually select the subsequent field for every field within the form. Finally, failing to fill out any required field will either reset the tedious process or force users to go looking for the empty field while managing the pop-up keyboard.

Because of those issues, keep forms on mobile sites as short as possible. Make fields big enough that they’re easy to make a choice using a thumb, but not so large that the on-screen keyboard will hide all subsequent fields. That is especially important for corporations accepting shipping or payment information through web forms on a mobile site.

3. Make Text Readable

Readable text would appear like an obvious element of the mobile design process. Unfortunately, many mobile sites still use small text. Moreover, small text means small links, that are difficult for smaller touch screens. Pinch zooming can cause other site elements to display incorrectly, supplying you with less control over the design of the positioning.

The ability to embed fonts into websites using Google Fonts or another font solution means you will discover an easily readable font that appears good on mobile devices. Again, it really is where you’re able to have to use a responsive design strategy to make sure the text is readable across multiple mobile devices.

4. Consider Drop-Down Navigation

If you will want many navigation items, think about using a drop-down list. This allows you to save precious mobile screen space and simply make menu items big enough for users to access without hitting the incorrect link. In case your site or app only has three or four links, large buttons or icons will be better fitted to your design.

5. Use a Linear Site Layout

Large displays do well with multi-column layouts. Mobile devices, however, don’t. Rather than having a multi-column layout in your mobile design, stack all of your content right into a single, scrollable column. Not just does this permit you to easily prioritize your content in an ordered hierarchy, it also prevents users from needing to side-scroll to view more. This protects users time and permits them to consider your content within the order you’d like.

When designing a single-column, linear layout, don’t hide content. It will frustrate users who came out of your full site on your mobile site only to be unable to locate what they were previously viewing.

6. App Styling

If you’re designing a mobile site, emulating app design delivers convenience and familiarity for users. App style icons and buttons in your mobile site could make users feel more at home on their mobile device. Etsy does this well, using four large app-style icons for menu navigation on the top of its single column layout.

Free mobile graphic elements and icons are available. UICloud provides over thousands of user interface elements available as PSD, AI, HTML, and CSS files; many are free.