With an ever increasing number of devices and operating systems on the market it has become virtually impossible to design device-specific content. Responsive design, especially the device agnosticism, has therefore become the de-facto standard of today’s sites. It’s all about the content of a page and that content needs to look great on any device.
But where should designer start? While the razor-sharp focus of mobile sites has lead many to advocate a mobile first approach, the reality for many businesses still is desktop first, influenced by a variety of factors, such as existing site structures or the majority of revenue still coming from desktop users. Focusing on the mobile experience, usually means that content will be much more compact and simplified, concentrating on the main functions and core features. The desktop version then is an expansion of the mobile experience. Starting from a desktop version, on the other hand, allows designers to think more conceptually and design for a full screen experience without having to consider so many limitations. Turning a more complex site into a mobile version later, however, can often be more challenging. The final decision should be based on an indepth understanding of the target audience and their needs based on the most common use cases.
Whatever your decision, Pidoco allows you to do both: With the latest release, Pidoco makes designing for multiple devices even easier, allowing you to design responsive experiences in one single project. Here is how it goes …
1. Create a new project
Let’s start by generating a new project. To do so, just click the “+ New project” button and the Project View will open up in a new tab.
Step 1: Creating a new project
2. Create the desktop page
In this simple example I want to take the desktop first approach. Of course, you can start with mobile as well. To design the desktop version of your site, select a desktop screen type for the first page from the device dialog, such as the web browser. This will create a new page with typical desktop dimensions (1366px by 660px).
Step 2: Selecting a device-specific screen to start your new project
3. Design the desktop page
Now we can start designing the desktop version by adding content to our desktop page from the stencil palette. The web browser displayed around the canvas helps keeping the context in mind. (Hint: You can hide the frame using the “Hide frame” option above the canvas.)
Step 3: Designing a page for the desktop version
4. Create the mobile page
Once we have designed the desktop version, the next step is to design the mobile version. So let’s create the corresponding mobile page. To save time and make use of the work we have already done, simply duplicate the desktop page using the context menu. (Hint: Rename the page to avoid mixing the two versions up.)
Step 4: Duplicating the desktop page as basis for the mobile version and…
You will now see an exact copy of the desktop page that we want to turn into our mobile version. To do so open the device dialog by clicking the device icon at the top of the canvas and change the screen type to smartphone. This will change the size of the canvas, but leave all elements in their original position. Now you can rearrange the content and resize or reduce it where necessary to fit the mobile screen size.
Step 4: …changing the screen type to smartphone
5. Design the mobile page
The final step is to adjust the design of the page by rearranging and where necessary also removing elements. To do so, simply move the elements to their new positions and resize them. Of course, you should also consider consolidating navigation options, using for example the (in)famous hamburger menu or even weed out the options that your target audience will not be using on mobile devices. (Hint: You should also take a look at the interactions in your prototype to make sure they are optimal in each context of use, e.g. you might think about replacing click interactions with swipe gestures for the mobile version.)
Step 5: Adjusting the desktop design to create a mobile version
Finally, in the Simulation View you can check out both the mobile and desktop versions. That’s it! You have successfully created a project for multiple devices!
Do you need help working with different devices and screen sizes? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!