Responsive editing before or after?


I’m working on the responsive features on my app and I wanted to know everyone’s thoughts on best practices. I have no intention for it to be used on anything besides a mobile view. Is it best to preset the page width to the “mobile” option (as pictured below) so that it’s already configured to mobile, or should I leave my index page as is and then make the changes under the “responsive” tab for the mobile view?

Is there any difference? I plan to have this transferred into an actual application on the ios app store if that gives any context.




If you set the page to be mobile width, then it’ll look really narrow on a tablet, laptop, or desktop. Whereas, if you design it for full width and then add responsive settings you can make it look good for each screen size.

Of course, if your users will only be using mobile then taking time to make it look good at the other sizes might be a waste of time. And there are usually instances where certain elements or layouts won’t work well across all sizes so when doing responsive sometimes people end up creating two versions of a section (one for mobile/tablet and one for laptop/desktop) and then use logic to show the correct one. If you don’t need the other one, then it’s certainly faster to skip it.

So, if users are nearly 100% on mobile then mobile size pages works best. If you want to support better experiences for larger pages then you probably want to enable larger pages and use responsive settings so it’ll look good on mobile too.

1 Like

@sridharan.s thank you! I was playing around with the responsive settings, but it was taking way too long to configure for other sizes, which will not necessarily be the best use of time since I’m aiming for 100% mobile.

@sridharan.s if this mobile preset is selected, will this mean that it will look good on all mobile devices?

Makes sense. You may also find it makes sense to have your homepage work well for all devices but the rest of your site is mobile centric. Just an idea - certainly use your judgement to decide what’s best for you and your users.

Selecting “mobile” I believe just sets the page width to a specific number of pixels, and mobile devices come in a variety of screen sizes so it doesn’t inherently make it look good on each. You may still want to play with responsive settings to make it work for a bunch of different width mobile screens.

1 Like

I’m wondering what setting to design it to for mobile phone and tablet (iPad) both in portrait view. Or is it possible to make it look good on both.