Mobile first Approach: Tips for Developers and Designers

Mobile first Approach: Tips for Developers and Designers

author By Nilanjana Oct 31, 2014
Submit guest post

Most of these apply to designers as well but there is no harm in suggesting or implementing these on your own.

This is one thing that must be followed. If you see pages with similar designs but different approach then do make an effort to make them consistent. Everyone likes a consistent experience. Inconsistency typically happens with different image styles being on different listing pages. Keep them consistent by using the same styles to save time.

Use font icons
Thus helps save precious hits on the server. Use, and even suggest to the designers that we should use font icons instead of images. They scale well too.

Check fonts before implementing them site wide
Implementation almost always differs from the designs. Ensure that the fonts are checked on mobile devices and approved with designers/client before being implemented site wide. Many non-compliant fonts dither on mobile browsers.

Make use of mobile elements
Use elements of the mobile such as swipes and taps as much as possible for a richer, more integrated experience. jQuery plugins support the same. Use library capabilities to the fullest.

Use fluid elements instead of rigid ones
This will ensure easy usage in both desktop and mobile. For example a carousel can be created using Views Slideshow module and using a jQuery plug in. The latter helps in achieving a listing on desktop and a carousel on mobile with the same HTML. Play smart!

As a Designer

Keep the layout clean and minimal and use space effectively
Less should say more. Add blocks to enhance visual appearance only when assured what you wanted to say has been achieved already.

Use visual cues instead of lengthy text to make sections informative
Use simple visual cues like separate colors for different sections.

Keeping similar sections consistent in design helps developers
Combining this with visual cues is a good practice and can provide a different look to similar pages.

1-3 exit points on a page
Ensure that your user has a way to move forward once he is done with a page. One call to action should always exist. Too many calls to action, however, can confuse the user. Give him/her choices but don’t spoil him with many!

Font sizes and spacing
Correct font sizes and spacing bring about a lot of change in the page readability. Big fonts may seem like a good idea but readability can be brought about by small fonts and correct line heights too.

Think of and define interactions clearly
This can make or break an otherwise good design. For example, consider whether a hover action is needed on the desktop or if the experience can be made consistent throughout devices by eliminating this interaction. When desktop and mobile designs are thought of independently, it usually leads to unnecessary rework for developers.

Understand the sections before designing
A little knowledge of what you are creating your design for is helpful in this scenario. For example, will there be a user's friends on the website? If not, then a section showing friends viewing an article is not a good idea.

These are a few of the most important items I believe we can and should tackle for better designed,  mobile-friendly pages and save effort in the process too.

If you have more, please do leave a comment below.


Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us