Build Responsive Pages In The Most Effective Way In XTOPIA - Stories

Always find it not so simple to ensure responsive pages look as neat and consistent throughout your website development journey? Perhaps you can focus on just a few tips first before you dive in deeper.

1. First, Take Care of DESKTOP View
Make sure everything looks good in Desktop view before you proceed to clean up for Tablet and Mobile view. Why so?

XTOPIA works in a way as you adjust the settings in Desktop, it'll automatically adjust for Tablet and Mobile which we call it "Responsive", but not applicable the other way round. Therefore, it's important to ensure most of the settings are done properly in Desktop view first.

Of course, there's no perfection, you can always go back and adjust little little things that you feel it's not right later on.

2. Use Your IMAGINATION
While you're designing your website in Desktop view use your imagination to visualise how it should look like in Mobile and whether it's do-able. Poor imagination?

No worries, you can always build part-by-part and check how it really looks like in Tablet and Mobile view. Besides, you can also adjust how you want it to actually look like in Tablet without affecting Desktop design; in Mobile without affecting Tablet and Desktop design.

3. Ensure CONSISTENCY
Padding and margin to be consistent in Desktop view. What do we mean by consistency in this case?

The gap between objects (button, text, line, etc.) or between sections to be the same, so that you don't have to re-adjust in Tablet and Mobile unless if it's necessary. This is also to ensure consistency throughout the website if there're any updates in future.

4. PADDING on the Left and Right
Always put some padding on the left and right to avoid content sticking to the edge of your device screen. This is necessary as you won't be able to know exactly what device screen size your user will be using.

NOTE: 10-20px of padding to be ideal.

5. Use MASTERPAGE Wisely
If you know specific settings will be fixed throughout multiple pages/website and it most probably won't be changing, you can always just set it in Masterpage. For instance, the padding on the left and right that we mentioned earlier in point 4.

This will also ensure consistency throughout the website and lessen repetitive effort to set the same settings in every single page.

NOTE: This is only applicable to pages that uses the same Masterpage.

6. Final Checking on REAL Devices
While XTOPIA’s different device view helps users to visualise how it’ll look like in Tablet and Mobile, it’s just an ideal viewport. There are too many devices of different screen sizes in the market that you need to take into considerations, thus it’s advisable to perform a final check on real devices

"Everything may not seem to be as difficult as you think it is once you are able to master the tips and tricks."

This article is contributed by Wee Shean, Project Executive of XIMNET Malaysia.