4 prototyping tips for mobile responsive websites
Make your responsive website consistent across every device with these 4 put-into-practice prototyping tips
Gone are the days when one size would satisfy all. The ubiquity of mobile devices and diversity of size and shape has created an essential standard within website design: mobile responsive websites.
While responsive design is nothing new, taking such an approach means better consistency during the mobile prototyping process.
Looking for a guide to responsive design? Try our Introduction to Responsive.
Mobile responsive design: the new normal
Before responsive web design’s rise in popularity, designers would create custom experiences unique to a specific device.
For example, let’s imagine a company going through a re-brand and in need of a new website. Back in the day, the company might have requested an “iPhone website” or an “iPad website” from the design team to satisfy business needs.
Inevitably, this meant creating multiple versions for different devices. It doesn’t take a genius to understand how unsustainable that method is.
With 55% of web traffic coming from mobile devices, implementing one responsive website that adapts depending on the device makes the most business sense and saves money.
What responsive design does is create unity between the design and the device with one single design that adapts itself accordingly through flexible grids, layouts and images. Responsive design doesn’t penalize the user for their preferred device choice and instead responds to it.
In a world where mobile devices have taken over the traditional desktop, it’s logical to implement a mobile friendly website. And since Google recommends using mobile responsive websites for multi-device support, those sites will be rewarded with the coveted search engine optimization.
Implementing this approach with a prototyping tool means your website will have cross device functionality and look good on any device. Let’s take a look at how to prototype a mobile responsive website and which Justinmind features can help you out.
Download Justinmind and create your responsive website prototype today
Less is more with a mobile responsive website
It can be tempting to design from desktop downward to smaller devices. Knowing how much space you need and working progressively smaller for mobile may have worked in the past when desktop use was more popular.
Slowly cutting elements you don’t need until you have a perfected mobile website only damages the experience and creates inconsistency across devices. Not so perfect after all.
However, a mobile first approach means you already understand your constraints, enabling you to create a perfect user experience within them. Sometimes starting small has big payoffs.
Starting your interactive prototype with a mobile first approach is easily explained in our easy to follow tutorial.
Scale images in your interactive prototype
Responsive websites display content in the best way suited to a device. Since images make up part of the content, your images ought to respond to the device they are displayed on to guarantee an improved user experience.
When creating your website prototype, if you don’t make your images scalable or responsive, it is likely that they will disrupt the browsing experience. Either the images will be too large or won’t resize when you change device.
The solution is simple: using Justinmind, scalable images are made easy with ‘on Window resize’ events.
UI elements and kits create consistency within your app wireframes
In the early stages of defining your prototype, as you begin to create a wireframe, you need to answer questions such as: will the users need to log in? Will they need to select an item? What steps do they need to take to proceed to check-out?
When you have the answers to these important questions, you will eventually understand which elements you will need as your prototype starts to come into fruition.
Now you need to find a UI kit that matches the visual identity you wish to create.
UI elements and kits are made up of an assortment of graphic elements such as buttons, icons, progress bars and many other user interface components that you’ll be familiar with .Justinmind has many familiar iOS and Android UI elements and libraries to drag and drop, as well as a range of easy to use and highly customizable UI widgets so your responsive mobile website will look authentic and will please your team, stakeholders and potential investors.
Responsive websites need responsive typography
You can be forgiven for forgetting about fonts. They’re not at the top of everyone’s mind. But with responsive web design, your typography is easily adaptable too.
When it comes to creating a beautifully designed webpage that is legible, good typography best practices enhance the user experience.
Using a scale for different screen sizes means that not only will your design prototype flow smoothly across devices and generate consistency across multiple devices but your fonts will too.
Image credit: Elliot Jay Stocks
Line spacing, kerning and font choice are crucial when creating an interactive prototype, but it’s important to consider your user when it comes to typography.
On a desktop, there is a lot of real estate to play with so you can use larger type sizes. On a mobile device, however, there is less screen space but the user is closer to the screen. Therefore, the font doesn’t have to be large.
Following from the mobile-first approach, understanding measure (the width of a text block) will give you a better understanding of how comfortable your text is to read. A short measure between 45-75 is a good length for a single column page, according to Robert Bringhurst.
Popular and recognizable fonts from Helvetica to Open Sans are included within Justinmind. The editable default styles mean you can start creating a clear visual hierarchy and progression with the extensive range of typefaces, including Google fonts, so prototyping a responsive website can look and feel as professional as possible.