Creating Mobile Responsiveness with Prototypes

Prototyping is a key and sought-after feature in product or User experience design. It presents an opportunity to demo a product as it is intended for user journey, application and website behavior, micro-interactions, animations and other experiences. 

Prototyping can also be used for user testing purposes in proposals and presentations to stakeholders and development teams, to ensure that everyone agrees on certain features. 

There are a ton of prototyping tools available - some built solely for that purpose, while others are built in as part of a design software or package. They all come with varying capabilities, feature sets and learning curves. 

However, what they all have in common is that, in the end, they are all just prototypes and cannot function as fully fledged products, such as a fully developed website and coded mobile apps. Also, features like mobile responsiveness for websites and landing page designs cannot be implemented using such softwares. 

I got some feedback on a prototyped design of my portfolio I shared recently, about how it was not an ideal method of presenting design portfolios, mainly because it doesn't adapt to different screen sizes. Being someone that has spent most of my time developing various design skill-set including UI/UX and being rather unable to code, I had to come up with a resourceful way to manage the feedback. 

I had just created the desktop version design, and was creating the mobile versions (just in case I wanted to develop it with code eventually). After getting both versions ready, I had to find a way to present the design on both versions in the meantime. 

Then it hit me, what if there was a way to ask what device the user was viewing the portfolio design with, and then have them select the compatible version for their device? 

Of course it had to be easy, intuitive and require as simple as one step, to get the user viewing the right versions for them. 

These are the steps I implemented to achieve this: 

Note: This is not a prototyping tutorial so I’m assuming as a UI/UX designer, you have a basic knowledge of how to create prototypes for your designs. 

We will be using Figma’s “prototype-sharing” feature for this illustration, and also the “text-linking” feature (for embedding a URL in texts) to get this process done. 

1. After creating both desktop and mobile versions of the design, move their screens to separate pages of the same document, ie all mobile screens (ie artboards or frames) moved to “Mobile Screens” page and desktop screens moved to “Desktop Screens” page. Then a “Welcome” screen which will be the first page users will arrive at where they select their device type.

2. Next, link the screens of the designs (mobile and desktop) in their individual pages and then click on the “Preview” button to view each of them in prototype mode. Be sure to place the zoom mode at “Scale down to fit width” . This ensures that parts of the design does bleed out, no matter the screen resolution of the device being used. 

3. Click the “Share Prototype“ button and then “Copy link” from both designs (Mobile and Desktop view) and paste it somewhere for safekeeping.

4.  On the “Welcome” page, go ahead and create an A4 frame and make a simple design with a brief Welcome Message and instruction. The texts should be bold for readability on both big and small screens, so do not go below font size 20. 

Then create 2 buttons that are large enough to be easily tapped on any device (mine are about 60px in height). Label those buttons “Mobile Phone” and “Desktop/Laptop” those will be the Call-To-Action that the users will use to navigate appropriately.

5. Highlight the text on the “Mobile Phone” button and select the “Create Link” button. Copy and paste the URL of the mobile view prototype into the embedding field and tap “Enter” to save changes. 

6. Repeat the same step above for the Desktop view of your design. 

7. Run the prototype of the “Welcome” page, click on “Share prototype”and copy the link to that prototype (refer to step 3 above) making sure that the zoom mode is in “Zoom to width” as well. 

8. Test your responsive prototype: Copy and paste the link from your “Welcome screen” and enter it in a browser. Then select the appropriate device and watch it open a new tab with your selected prototype. You can then interact with the page as you please. 

You can check out my portfolio prototype here created with the steps above to see how it displays on both mobile and desktop views. 

A prototype however, still cannot compare to a fully developed product, website or app, as these have been coded to be lighter, load more efficiently and present a whole range of in-app features and services that a prototype simply cannot do. 

There are a couple of products and services out there you can use to implement your product or web designs using tools that make the development process easier and intuitive for you if you can’t code. A prototype is mainly created for and can be used for presentation, demo or testing purposes not as an actual product. But you can be sure we’ll come as close as we can to making it responsive.

Hope this helps you with creating a responsive prototype that you can share with teams and stakeholders without having to worry about their device compatibility.