How To … Adjust the Screen Size of your Prototypes

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

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.

Adjust the page dimensions of web prototypes via the Page View and the breadcrumb navigation

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


Adjust the page dimensions of mobile prototypes (via the Page View)

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 or FacebookTwitter 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. 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 and, 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 collected some useful information as you can see from the image, and 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.

Speak up! Let us know what you think.