Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Designing for mobile

Monday, November 3rd, 2014 by Servage

Designing for MobileWe are living in a world of smartphones, tablets and now the wearable smart-appliances, and sensor-connected devices in coming days. Therefore, tracing the right design-path is an absolute necessity. This post is throwing light on some critical design related misconceptions we might have developed over time.

We have been designing in Photoshop, Illustrator etc. for some decades now. Earlier our canvas was for print media, later for rather large desktop-like devices. Mobiles or hand-held devices came at a later stage – and have taken a central position for all designing done today. With this evolution, we have developed habits of painting using a digital canvas, where shapes, vectors, pixels, colors, various effects, different filters and concepts have evolved in our mind. We have developed a mindset of a digital canvas where we can draw anything – and enjoy the creativity in new and innovative ways. However, mobile devices have disturbed the innate creative conceptions when it comes to web-design, because of their changed screen sizes and smaller physical form factors. We have to adjust or design tools and procedures to suit these new kinds of devices better. There are still too many sites online, which perform poorly – or not at all – on small screens.

Misconception No. 1: Designing for screens

Many are using Photoshop to design screens for mobile applications by simply thinking UIs and their elements. We are not thinking of transitions of screens and their elements. We are not ready to take help of live and interactive prototype designing software. However, we know that we are designing for highly intricate interactions where touch experiences are prime needs. There are tons of HTML, CSS, JavaScript, jQuery, and Media Query based software available at affordable rates. You can take advantage of them and simulate the exact dynamic interactions you wish in your app, you can test and survey user experiences with real devices or simulators – including touch gestures, body gestures, voice command, eye pupil commands, etc. Just remember, you are no longer just designing for a traditional screen operated by mouse and keyboard.

Misconception No. 2: Designing for fragmentation

It was a golden time for Microsoft companies to spread its software over similar devices within the desktop and laptop era. However, for years already, the mobile ecosystem is quite different in aspect, and introduced vast diversity in device manufacturers, operating systems, developers and applications. Since the beginning Apple has grabbed for the lead, but today the market is highly fragmented, and this poses a real challenge to web developers. If we want to design and program for the various devices, we need to learn how to deal with them and their differences in designing, coding, and testing. Some cloud- services understand this challenge and offer testing facilities with virtual devices or crowd sourcing.

Misconception No. 3: Continue to use same methods

We have changed the landscape from large devices to small devices, but often haven’t changed our tools. It’s important to understand that the tools we use have a direct impact on the quality we can deliver. Software like Photoshop is still suitable to solve various graphical challenges, but just remember that we are no longer working with just a two dimensional problem of moving something that looks good in a design template onto a web canvas. We have far bigger challenges with all the devices, and therefore there is a whole new step, which is a much bigger challenge today, than it ever was: optimizing for individual devices and screen sizes. Remember this, when you prioritize and time-plan for your project. There is a need to optimize development processes to reflect this requirement better.

More Reading

What Does it Take to be a Mobile Designer Today?

Designing for mobile, 4.5 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.