First I will start by explaining that I’m not going to talk about Mobile App Development today; instead, I’ll be breaking down some of the nuances of Mobile Web Development and how it differs from Desktop Web Development. The difference between good and bad web design hinges on your ability to create a user experience that's effective for both mobile and desktop users.
Many of our new prospects come to us with outdated or completely non-responsive websites and the end goal is to help bring them forward into the current times. Our interactive team performs a GDD analysis of their current site and how visitors behave on said site. That data is then used to design a better performing and more intuitive website for us to develop. Part of the design strategy is to preemptively see how certain elements will work when viewed on mobile devices. As this report from comScore shows, mobile's share of total digital media time went up +12 points to 65%; meanwhile, digital media time spent on desktop slid back -12 points down to 35%. These numbers shouldn't be surprising and show the increased importance of considering mobile web development in the design process.
Click to tweet: Digital media time spent on desktop slid back -12 points down to 35%
Step 1 - Focus on Breakpoints
Some design elements – while amazing on desktop – simply do not make for good UX when screen sizes get below a certain threshold (i.e. less than 800px). What are some of the items you should examine?
The main ones are obvious (font sizes, etc.) while others can come as a surprise. (Remember those awesome pictures of frogs that your team used to replace all bullets on the menu list? Yes, those frogs…well they don’t look as cute on this iPhone SE in portrait) No matter how carefully a design is created, we sometimes don’t know that an element will not work responsively until it is implemented in real code. This means we have to have an extensive QA process to make sure that screens are accounted for before the page/s go live.
Most testing should look for breakpoints in the design. Breakpoints are screen sizes where the content no longer looks as in the design or where the content “breaks.” Instead of only looking at common viewport sizes, testing should find sizes where the content needs adjusting, regardless of whether the screen is 768px (a common viewport size) or 780px (not as common.) The methodology behind this is that the web is fluid and we should deal with changes in the same fashion since technology is changing daily every second. The moment a new phone with a different screen comes out to the market your media queries could be obsolete.
Step 2 - Prioritize Elements
Once you have the breakpoints, it is time to decide what parts are necessary and which parts might not be. In the lower resolutions, we have often chosen to remove certain images completely. We cannot become attached to any aspect of a design if we want it to be responsive. Sometimes the only solution is to remove the culprit element completely.
Is that image rendering weird? Remove it. Does that title text in the gorgeous font look overly gaudy and like extra text? Take it out!
Step 3 - Remove Unecessary Items
The trick here is to use one of the following CSS properties: display or visibility. With the “display” and “visibility” properties we can tell browsers if and how we want an element to be shown. If you want to pretend like an element does not exist at all on the page then you would set your display to display: none; however, if you want the element to go away but still take up space, then you would want to use visibility: hidden;.
Step 4 - Make Sure Everything Is In the Right Place
Another common issue is the order of items that have to become stacked. On your desktop design the text is on the right while the image takes the left half of the screen; then, whamo! On mobile, the image makes no sense without the context of the text, which means it should go first. What to do!?
Well, the answer can be found under the float CSS property. In this case, we are going to tell the elements to switch place when it is in the larger sizes and then they can go back to their original positions in mobile screens (OR vice versa whichever makes the most sense to your layout.)
Go ahead and test out what I mean by resizing this window and looking at the code below.
Once your screen gets to the specified width, the content and colors will switch places.
Lessons
Here at Revenue River, we always promote the importance of testing and during that time is when you will find the issues. Treat each size like a completely different device and don't stay rigid on your design or breakpoints. If you find that your business needs a little guidance in figuring out how to make your website responsive, we would love to help. Simply contact us by leaving a comment below or give us a call.
