I am working on an admin app which can built websites for Mobile, Tablet and desktop.

While creating the website the user who is going to use the admin, will need preview of the website at some point of time. Right now i am showing Iphone preview on right side of the screen. When user clicks on Preview the Pop up opens to accommodate Ipad and desktop. The websites are responsive, so it may change according to different devices. Mainly Desktop, Ipad and Iphone

I am looking for some innovative ways to preview the Devices in the Admin. Right now as a solution i have given a Pop up. It will be nice if you could suggest something interesting. Thanks in advance.

enter image description here enter image description here

  • does preview dynamically change as user changes the coding? I guess what I'm asking is is there a need for user to see changes in real-time in preview? Jul 22 '14 at 22:34
  • Yes since it is "Responsive design" user can actually see how the website will look in the respective device and can actually interact with it in the preview itself i.e. fully functional preview.
    – user51979
    Jul 29 '14 at 15:14
  • I have to show Actual size of the tablet or Mobile in the popup (1:1 scale) as it is responsive design with fully functional preview.
    – user51979
    Jul 29 '14 at 15:20

The admin/building and the preview interfaces will either be displayed and visible simultaneously or alternatively.

Displaying them simultaneously :

  • pros : very user friendly, no need for navigation, possibility to implement a real-time refresh as the user changes something in the admin/building interface
  • cons : smaller interfaces because the interface real estate is limited

Displaying them alternatively gives more room to design interfaces that are pleasant and easy to use. It can be done in various ways :

  • popup : just as you suggest. The cons one can think of are that the user feels they change environments as the popup opens, with a need to close the popup to get back where they were when they are done
  • toggle button : the user's perception is that of seeing different versions of the same data. The impression of navigating is interestingly reduced but the perception is also more abstract
  • tabs : the displayed interface hides the other one(s). The user keeps the impression that they have all available views in front of them (nothing really disappears) because tabs implement an analogy with physical pages with tabs on their (often upper) border.
  • slider : arrows and a horizontal sliding animation allow to slide through the available views. The user also keeps here a perception of having all the views available without changing environments, thanks to the ribbon-like analogy that the slider implements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.