Best ways to check for responsiveness

I’ve been going back over my responsive web design projects in an attempt to improve their look, and have a couple questions:

  1. Does the Codepen header mess up how it looks in the browser? I’ve noticed that I can’t scroll quite all the way to the bottom on mobile. If I use somewhere else to host my pages, will that take care of the problem?

  2. To check responsiveness on my iPhone 8, is it a good idea to download Firefox and Chrome for ios in addition to checking on Safari? Or do people usually just use Safari for iPhones or Chrome for Android?

For your second question, I would not worry too much about checking for responsiveness on specific devices with specific browsers. If you are developing your page on a desktop then do the following:

  • Use a ‘narrow-first’ approach. Narrow your browser (doesn’t matter which one) as narrow as it will go. Style your page to look good in this narrow width (no horizontal scroll bar unless absolutely necessary). This will be your base CSS.
  • After you have completed the initial narrow styling then slowly widen your browser until you feel you have enough horizontal space to rearrange some of the elements on your page for a wider view port. Make this your first CSS break point and add additional styling under that break point. For the break point use min-width and em values. To calculate the em value just divide the pixel width by 16. Using em values for your break points makes your page responsive not only to changes in the view port width but also to changes in the text size (which a lot of people overlook but is a very important accessibility issue).
  • Continue on slowly widening your browser and adding further CSS break points as needed (again, using min-width and em values).

If you follow this approach then your page will automatically be responsive in whatever browser you use and on whatever device you are using.

You can manually test text size responsiveness with Firefox. Go to the ‘View -> Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Since you are using em values for the break points they will trigger as you increase/decrease the text size.

This doesn’t mean you don’t have to test your application on different devices/browsers. There may be other issues that are specific to a particular browser/device. But for responsiveness, you can really do all of your development in the desktop browser as outlined above and make your page responsive on any device.

2 Likes

Are the source files (.html, .js, .css) saved on your local machine? If so, you can open the html file with a web browser and change window size to check responsiveness.

In Chrome you can also change the type of device (ipad and various versions of iphone and Android devices) that you want to view the page with.

Edit: or what @bbsmooth said

1 Like

320px (iphone5)

unless designing for mobile watch or something similar

If you use em for any widths you need to set then you should be just fine with a view port that small. My FF narrows down to 27.5em (440px). If it looks good at that width then it should look good at 20em (320px). I might possibly get a horizontal scroll bar at very narrow widths if I have a very long word in a header or something similar, but overall it should scale downward just fine.

I created my drum machine using this approach and it scales just fine all the way down to about 140px.

1 Like

hi @cherylm

i learned that by default the elements page that rendered inside the body element is responsive.

for example, if the page have p element with many text in it, say 10.000 words, it would be responsive by default, to the browser screen width you opened it.

the only messed thing up is, when set the fixed width or height for the p element, say 400px both. this mean that the element doesn`t responsive anymore. it would overflow in x and y in smaller screen less than 400, and only take 400px on larger screen.

but thing would be different if it set to the percentage of it parent. say the body width is 100%, and the p is 80% of the body width. it would be still responsive. as p would always take 80% of it parent at any screen width.

not sure if explained this good enough in english. sorry i still need to learning english a lot.

regards

Thank you all for your helpful answers. I got some useful pointers.

On Codepen you can also look at the page in Debug mode (Change View > Debug mode), which will give you a page without the Codepen UI.

1 Like

Hey you can also click inspect on chrome and on the top left of the console navigator there are 2 clickable elements, click the second one which allows you to check for responsiveness by setting the screen pixelage. It also has preset screen sizes

In case you didn’t catch what some of the others said, here is a screen shot showing how to use the DevTools inspector.

right click mouse -> Inspect -> Icon

Also note that once you’ve done that, up at the top bar you will have the option to pick different emulations of mobile devices.!

device_changer|690x431

Personally, I never use the individual devices, I just choose “Responsive” and then narrow it down as far as I want to go.