Adapting your site to mobile resolution is an integral part of creating a fully responsive website.
If you head to your site's mobile resolution, you'll be asked to choose between these two options:
- Upload a separate mobile design
- Adjust desktop design manually to fit mobile
This guide explains the two different ways you can adapt your site to mobile resolution - which is an important step in creating a fully responsive website.
Adjusting desktop design to Mobile:
The 'Adjust desktop to mobile' tool automatically scales your site’s elements and shrinks them to fit the mobile screen width.
Using this method, you can adjust your design to fit mobile resolutions manually, by placing and changing the size of elements as you wish.
However, it is important to emphasize: the tool does not automatically make your design ‘mobile responsive’ but instead shrinks your desktop design to fit mobile resolution, so it will be easier to manually adjust.
After using the tool, it's time to adjust your site's layout to fit mobile resolution. Keep in mind that mobile resolutions are much smaller than desktop. Because of this, a mobile design commonly looks different, with vertical order and much larger elements.
Uploading a separate design file for mobile version:
Using this option allows you to upload a separate design file for mobile resolution - simply drag and drop a PSD/Sketch file into RapidUI after setting your project to the mobile resolution size.
- Set mobile resolution
- Select 'Upload a separate file for mobile version'
- Click 'Browse' and select your design OR simply drag and drop your mobile design onto the platform
You can upload a mobile design file at any given moment, even if you didn't pick the mobile file option. Simply drag and drop your file at any given moment.