Testing Responsive Design: Simulating Mobile Views in VSCode

1

I’m currently working on my first fullstack app and have made some progress:

  • Initialized a new React.js project using Vite.
  • Structured my project directory in an organized manner for better clarity.
  • Outlined the design and layout of each screen, focusing on user experience and usability.

However, I’m uncertain about the best mobile view to start with when I launch the app in VScode. Would it be wise to begin with the iPhone 12 Pro size and then employ media queries to fine-tune the layout for other screen sizes?

Additionally, I’m seeking advice on establishing a solid CSS foundation for my app. Is it common to begin with a template like this:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

Any insights or suggestions are greatly appreciated, thanks!

2
  • its your call mostly, but if you look at chrome “responsive mobile view options” you will see its ranging from “iphone-SE”

happy coding :slight_smile:

3

Hello!

Unless the client/ project asks for a certain phone model, just add a few mobile phones of your choice from the device list to test responsiveness.

I usually have two I Phones, two Samsung Galaxys and a Google Pixel in my collection, enough to cover most of the current phone market

Then three tablets of different sizes to run my pages on. With tablets check if your app gets displayed correct in both landscape and portrait mode, tablets can get annoying in this regard.

Then finally I test on four laptop and monitor sizes. Include very large monitors (2000+ pixels width) in your testing/ media queries. They often get overlooked.

Your CSS rules look solid for a start. With growing experience you will add more options to them like CSS variables, dark and light mode etc.

4

To be truly accessible (and compliant with WCAG) your page needs to properly “reflow” (the term WCAG uses for responsiveness) down to a width of 320px. So regardless of what mobile device width you want to design for by default, you should be using the dev tools responsive design mode in your browser to narrow the page down to 320px to make sure it still displays all content, and functions properly at that width.

WCAG 2.1 SC 1.4.10 Reflow (Level AA)

5

So just to clarify, I shouldn’t choose a specific phone view like iphoneSE or iphone 12 Pro? Instead, I should choose the responsive option and set the width to 320px and make sure my app looks good in that view? Then once everything looks good in that view I would start checking how it looks on different devices? (iphoneSE, iphoneXR, iphone 12 Pro, Pixel 5, Samsung Galaxy S8+, Samsung Galaxy S20 Ultra, ipad Air, ipad Mini, stopping there because it’s an app and I don’t intend for it to be accessible on a laptop or desktop)

But ultmately, my starting point is this? :

Screen Shot 2023-08-11 at 2.13.07 PM
Screen Shot 2023-08-11 at 2.13.07 PM1106×1650 17.7 KB

6

Yes, that is the minimum width your app must function in to be accessible.

I just generally start widening the view port manually and make sure everything looks good as I widen it, so I don’t necessarily worry about specific mobile device widths. But if you want to test for specific mobile devices go ahead. There’s just so many to choose from :slightly_smiling_face:

So is this going to be a “web app” served from a web server? Or is this really a native “app”? Your description makes it seem like this is a web app but I could be wrong.

7

That’s smart, I will do the same. Start at 320px width and keep widening the view checking the responsiveness. Thanks for the tip!

You’ve understood correctly. The project I’m developing is a web app, accessible through web browsers and hosted on a web server. While it won’t be a native app directly installed on devices, it will offer a smooth and responsive user experience across various platforms, such as smartphones and tablets. It’s important to note that I’m also focusing on making the app responsive for laptops and desktops, ensuring a consistent experience for users regardless of their device choice. I apologize if my previous explanation caused any confusion.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.