RapidUI allows full control over how your website looks in every display resolution.
You can view your site in every resolution and create completely responsive designs with RapidUI's responsive tools:
- Create and manage breakpoints in order to make custom changes in different resolutions, without affecting other resolutions.
- Use the 'scale to fit' tool to create almost automatic responsive designs in different resolutions (read full guide).
- Upload separate PSD/Sketch files in different resolutions.
Manage and create breakpoints:
Responsive Breakpoints (CSS media queries) are used to control your site's design in different resolutions.
Breakpoints separate between your different page widths (in pixels) and create different object styling rules for separate breakpoints (read full styling guide).
Every breakpoint is marked with a unique color, that appears on the resolution bar to indicate at which breakpoint you are currently working.
Go to the RESPONSIVE panel to create and manage breakpoints.
- Click 'Add breakpoint'.
- Choose where (in pixels) you wish to add a breakpoint to your page.
Manage or delete breakpoints:
- Click on the number input to change your breakpoint's location.
- Click trash icon to delete breakpoint (merge the breakpoints before and after the deleted breakpoint).
Remember - once you have created breakpoints, you will have to make changes in every breakpoint separately. It is better to create breakpoints after you have completed all of the other steps of creating your live site such as styling, rapid elements, animating, etc.
Try to use as few breakpoints as possible, so you will only make necessary changes in various resolutions.
Upload PSD/Sketch files to separate breakpoints:
You can upload separate PSD/Sketch files to different breakpoints if you want to create responsive designs in Photoshop/Sketch (mainly used to design unique mobile versions).
Simply drag and drop a PSD/Sketch file inside your site while in the desired breakpoint.
Pick your mobile layout:
When changing to mobile resolution, you will be asked to pick between one of the two different options:
Upload a separate file for the mobile version - when selecting this option you're allowed to upload a separate design file for mobile resolution - by simply dragging and dropping a PSD/Sketch file onto your mobile site.
Adjust desktop design manually to fit mobile - when clicking this options, RapidUI will automatically shrink your site's proportions to fit mobile resolutions (including all actions made on elements - animations, slider, forms etc.). You can then change your mobile site's layout by resizing and relocating your different sections and elements within them (full guide can be found here).