Pictures: from mobile to desktop

October 13, 2017

 

Most of websites nowadays are made due to the "mobile first" concept, which means that you firstly create a mobile version of a site, and only then get to a desktop one. But the pictures you use in a mobile version may not look so well on a big screen.


What problems can you have transferring pictures from mobile to desktop and how do you solve them? Let's find out!


Problem #1: Disproportionate scaling
Sometimes when trying to transfer a picture from a mobile version to a desktop one, designers simply enlarge width and height, so the picture would fit the size of the screen. But in this case elements of the picture can become disproportionate towards headers, buttons and other parts of a website.


Problem #2: Crop images
Another mistake would be to crop images by enlarging only width. This way you leave much more space for other objects and don't disturb users too much, but if cropped wrong, a picture can lose its meaning.


Problem #3: Position change
While enlarging, some pictures may change their relations to other elements of the design, which can badly affect a whole concept.

 


So, what can you do to solve these problems?


Scale and crop
Combine these actions to perfectly fin a picture into a big screen without loosing important elements.


Use universal pictures
There are pictures which can automatically be transformed for different screen sizes without loosing their meaning. Try to find such pictures! Imagine them cropped differently and make sure in still looks OK.


Use different pictures for mobile and desktop
If you can't change a picture so it would look well on a desktop, just choose another picture! Sometimes different versions of a site work even better.

 

Use this advice and create perfect design! 
Remember that Impressive plugins for Wix are always there to help you.

Share on Facebook
Share on Twitter
Please reload

Featured Posts

Impressive Site Menu: Creating a Multilingual Sidebar Menu

1/10
Please reload

Recent Posts
Please reload

Search By Tags
Please reload

Excellent usability for your website. Part 6.

November 6, 2018

1/10