How to work properly with responsive design?

[Zara_z]

I’m learning about responsive design but things don’t work out as well as I expected, there are certain points where design works well and in others I don’t, many when testing the design at any kind of resolution (while shrinking the screen) everything goes perfectly, but in my case it’s not like that.

What are good practices and how to work properly with reponsive design?

[Martyr2]

Responsive design can be a tedious endeavor. It requires a lot of testing and a bit of letting things go (aka not being an absolute perfectionist… which is hard for some people to do. I always get a chuckle in job postings that say “pixel perfect design”).

What I always suggest people new to responsive design is three things…

1. Learn a responsive framework. For example bootstrap. I say learn it, not rely on it. Understand what it is doing and why, but also use it to make things easier at first.
2. Start thinking about the smallest screen and scaling up rather than designing for the desktop and scaling down.
3. Test test test and that means making sure your test cycle is tight. You will often see tutorial videos and stuff use things like “live update” where when you change something, it automatically updates a browser window with the change. If it takes you even 10 seconds to make a change, recompile it, reload it into a browser, that is about 7 seconds too long PER CHANGE. So try to get your process down to where if you make a change, you see instant results. This will save you a ton of time!

I know, number 2 sounds a bit backwards for anyone who has been web designing for a while. But keeping a “mobile first” mindset will save you a lot of problems in the long run. It is often easier to think “Oh this will be a single column… but for desktops I can just make this column into 3 which is pretty easy” than to think “I have 3 columns, how do I cut this down to 1?”

I hope these tips help.

[Pepster64]

Responsive design is pretty simple if you take the mobile first approach and learn CSS using media queries without any framework. Frameworks are meant to help you do HTML/CSS they shouldn’t be used a crutch. I would also suggest using Grids and Flex as it will make responsive design so much easier and keep CSS code down in size.

[Zara_z]

Thanks so much

[nikostzounakos]

Yes basically as Pepster64 suggested, the best way to help you learn Responsive design is using plain code and CSS Media Queries.

CSS Grid and Flexbox are the most common way of doing and the have huge flexibility on how you could use them.

You can try starting from a Mobile version of the website and scale up to Desktop, or vice versa.

The thing that I learned as I was coding and helped me tremendously, is that there is no specific break point for each website. You could try resizing the website and check the point that your layout breaks and it is the point that you could add a media queries to adjust it.
With this way it will work on all devices that it will use it.

That’s way frameworks and not always the best solution, because the have premade-break points like 768px for tablet etc.