Today, most websites and apps need to work on various screen sizes, including those of smartphones and tablets. Responsive design is therefore one of the hot topics in UX. With Pidoco you can prototype for multiple devices – all in the same project. All you need to do is to set the desired screen size for your prototype pages. Here’s how to…
1. Web prototypes
When creating a new web prototype, you will start out with a default page size of 960 x 1000 px. To adjust the page size open the page’s context menu (e.g. by clicking on the “Options” icon or by right-clicking on the page) and change the “Width” and/or “Height” values in the Properties tab. Pidoco will automatically remember these settings and apply them to new pages.
Page dimensions of prototypes are easily adjusted via the page’s context menu
Hint: Aside from using the breadcrumb navigation as shown above, you can also access a page’s context menu from several other places, including the Page View, Prototype View or the Screenflow View.
Example of the page context menu as accessed from the Prototype View
2. Mobile prototypes
Mobile prototypes come with a selection of common screen sizes, like smartphone (e.g. for iPhone or Android apps) or different tablet sizes, but of course you can set your own size. When adding a new page, you can select the desired screen size from the “New” dropdown in the toolbar. The default is 320 x 568 px (a smartphone screen in portrait mode). To adjust the page size simply open the page’s context menu and change the “Width” and/or “Height” values in the Properties tab.
Other available pre-defined screen sizes are:
- 7″ tablets (600 x 800 px) in portrait and landscape formats
- 10″ tablets (768 x 1228 px) in portrait and landscape formats
Mobile prototypes offer a range of pre-selected default page dimensions for various devices
That’s it! You have successfully resized your prototype pages!
Do you need help resizing your prototype pages? Just send us a message via support@pidoco.com or Facebook, Twitter or Google+.
Happy Prototyping!
PS: If you are not sure which sizes are best to use, here is a quick overview on the commonly used dimensions of websites. Iteracy.com listed the page widths of widespread websites. For instance Facebook and LinkedIn have a fixed width of 980 px, whereas Bing comes along with 970 px and YouTube with 961 px. In terms of the height, 600 px marks an imaginary line from which on a visitor is likely to begin scrolling. According to w3schools.com and hobo-web.co.uk, optimizing your page for a resolution of 1024 x 768 px will guarantee a trouble-free scrolling for the majority of your visitors.
In terms of mobile devices, this is tricky as there are many different old and new devices out there. Here websitedimensions.com collected some useful information as you can see from the image, and mydevice.io presents a list of the physical and CSS values of various mobile devices, tablets and phablets.
However, when creating a new prototype, use page dimensions you expect most of the visitors to be using. In this case, it is recommended to do some research in advance.