I Struggle With Responsive Design. Does It Get Any Easier?

HTML-CSS
1

Hey guys,

I really don’t like css styling. It’s hard enough to get things exactly the way I want them to look for a certain screen size. Then I have to do it all over again numerous times for other screen sizes!

I realize that maybe it’s because I’m trying to make the app look the same for mobile as it does for desktop and other screen sizes. Is this unreasonable?

Also, the exact same stylesheet will produce slightly different results in different browsers. Not sure why that is…

I’m not sure how to test the UIs of my apps. I’ve considered making the entire stylesheet in JavaScript (for example, onScreenResize, set a width variable to the current width and set certain element properties to certain values based on that). I feel like that would be complicated and tedious, though.

TL;DR, I have 2 questions:

  1. How many times should I reasonably be expected to style the same element in a fully responsive web application? Any advice on the best way to do this?

  2. How do I make sure the UI looks the way I want it to for all the screen sizes and browsers? Is there any logical way to do this (perhaps with JavaScript), or are media queries the best I’ve got?

Thanks in advance for your advice.

2

I tend to like to use a lot of percentage based widths so things more or less resize themselves. Then I’ll test for any breakpoints by resizing the window in CodePen (or whatever I’m using) to decide when/where I need to strategically place media queries. You may also find front end libraries (I’m thinking of Bootstrap in particular) helpful down the road.

3

Hello, first of all, do not despair like everything in this world with practice, everything becomes easier. As for your questions, in my opinion, one way of not resorting so much to media-queries is to use relative units instead of absolute ones for your elements. For example:

.example-div{
    width: 90vw 
}

This makes the div occupy 90% of the view width on all devices and screen sizes. Here is a bit more concise explanation

https://www.w3schools.com/cssref/css_units.asp

I hope this will be useful.

1 Like
4

I hate this aspect of development.
You can somewhat bypass this using front-end libraries. I think bootstrap can do it.

But to fully do what you want it to do. You gonna need to use @media css and find the common breakpoint used in the industry.

5
6

So how many times would you guys say you restyle a single page to make it responsive?

7

A general approach I saw in tutorials is to first make a fairly simple design for mobile (usually with just one column),
and then make a media querie for a standard computer display (witch probably incorporates grids and flexboxs).

I noticed that even sites like facebook and gmail don’t scale perfectly to sizes like half computer screen… so I guess you don’t have to be a complete perfectionist

8

Hello! There are enought ways to make styling easier and write non-repeatble code. you will learn them later. I like “mobile first” method. I can recommend you to watch some videos on “traversy media” channel. Brad explains things very clearly.
About your second question there are many tools for developers to simulate devices. Here is one of them https://developers.google.com/web/tools/chrome-devtools/device-mode/

9

I think this was the most helpful method overall. Thanks