Avoiding Design Disasters: 5 Brief Tips

20 Apr Avoiding Design Disasters: 5 Brief Tips

Who doesn’t want to admire his wonderful designs or rather put them up for praises? But, then with a plethora of devices coming in, just imagine your wonderfully designed webpage cracks up and disorients on a particular mobile device. It does happen and you can see choppy animations, unaligned texts and out of screen images. Your fields and forms go haywire by the time you get your answer to the technical solutions behind your development.

I have been through this trauma quite a number of times and it gets all the way more embarrassing when this happens during a client demo. So, I decided to enlist a few ways to ensure that this does not happen. I hope you will find some interesting information in my compiled list.

I would majorly be looking at abrupt font size changes and form design errors. Sometimes, I would just invoke pages in such a way just to replicate the error which helps me configure animations so that they show up well on a wide variety of screens. You can also touch and trigger events that do not register properly, even if there is no error that pops up. So, let’s see what can be detailed about the same.

I am assuming that the reader is already aware of basic responsive web development, but in case you wish to learn more on the same, you could also go through my brief guide.

Abrupt Font size changes

Even when you have configured your webpage to fit a mobile screen beautifully, you might be missing out a small side i.e. when the view switches to landscape. Navigation bars and menus tend to disrupt their locations and text sizes also change. Although, most often a simple page refresh resolves the issues, but who would want their readers to go through this pain-point when you have a solution available. Stop unwanted text size changes by inserting the following code into your CSS.

html {

/* Prevent font scaling in landscape while allowing user zoom */

-webkit-text-size-adjust: 100%;

}

This code just helps reset the page design when your device switches to landscape mode.

Getting your form styles in line

There are default stylesheets available for most devices but these can meddle with your coding and therefore forms and fields get misaligned. Use the code below to fix this issue:

input[type=text], button, select, textarea{

-webkit-appearance: none;

-moz-appearance: none;

border-radius: 0px;

}

You could also experiment and mix and match the form styles that you want to be reset. Let’s say, you would like all input styles to reset, set input[type=text] for an input. This would probably hamper your checkboxes and radio buttons if they are on screen, so take care that they are set in position too.

Not all Emulators are correct

At times, the emulator fails to set its parameters as per the original device and therefore gives you a wrong output. At some other times, you may also see an error on the emulator, even if that error would not occur on the real device. So, an emulator can be your first line of check but do not rely on it 100% all the time.

Trust me, I had to get embarrassed on one occasion when it failed me and I was ready with my design at a client demo. What seemed at first was Google Chrome’s viewport cutting off the view at the bottom. But, originally the scrollbar was out of view which made it impossible to see the rest of the page using the same. The issue was temporarily resolved by opening the same page in a new tab, turning mobile view on and off and then reloading the page. Lucky, that in the end, I could make my design work but it was a pretty sweaty moment for me.

A smooth desktop animation might be nightmarish on a Mobile device

Performance is a key factor to keep in mind while using heavy animations. Browsers technically do have the ability to render animations properly, but a high graphics GIF might be troublesome for a low end mobile device to display properly, just as you would enjoy the same on a desktop of a high end device. Following examples can throw some light on how things might look:

transform: translate(15px, 40px); /* shift left 15px and down 40px */

transform: scale(2); /* scale to 2 times original size */

transform: rotate(30deg); /* rotate 30 degrees */

opacity: 0.5; /* set opacity at 0.5 */

These properties need to be animated in the right way as this is on what the overview layer of the browser sits on. Consider the page as a dining table where animation on the topmost layer is like moving a dish but animating on the layers beneath or on layers out of view is just like dragging the table cloth which kind of disrupts the whole view.

You could use the “-webkit- prefix” on transform properties like:

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

Also, do note that box shadows do render a page slow at times. But, it is completely dependent on other factors as well, like how heavy the page is or what else has been running in the background for the particular device etc. A better case would be to test it out before you feel satisfied with your work.

A touch and a click are never the same

Triggering an action on the co-ordinates of a touch and a click would be same for an Apple device but on an Android, they are pretty different. Touch co-ordinates are obviously available under the event data which you can verify on the device itself, but this check should be performed keeping in mind a better usability point of view.

The trick is that instead of using e.touches[0].pageX, use e.pageX to get the X co-ordinate. Copy the same for Y. Some examples below could help you.

On some devices e.pageX and e.pageY might not work but these would still be available. They would be set to 0 in such cases. Checkout the console on Chrome’s emulator as it shows JavaScript for the same. Look at the code below to get an idea of the way an ontouchstart event executes:

document.ontouchstart = function(e){

console.log(e); // show data from ontouchstart event

}

If it’s a jQuery event, there would be an existing set of data. Check out the differences with the help of the code below:

It does not matter in general if it’s a click or a touch but the best solution is to test things out when you feel uncomfortable with the same.

Conclusion

I tried to cover some common design pitfalls and solutions for the same. There are various new design issues popping up every day as more and more new customized versions of the same OS roll-out. Inconsistencies among devices are the biggest hurdle. So, the best solution is a sleek and clean design. It helps a lot in reducing your extra effort and avoid design disasters.