Bosss Battle: Resonsive Design

04.10.2025 - 8:00 pm

My logo proposal
for Responsive Design

I would describe myself as a very good programmer who can keep track of complex things and find solutions to problems. Who likes to optimize databases, import them from any other format, do wild things via terminal and command line, and do other crude things.

But pretty, eye-friendly design is not really my thing. Never have been and I will probably never learn, this kind of creativity is always a difficult task for me.

All the private websites that I have built myself in my life looked adequate at most, nothing really nice ever came around.

Since you recently have to prepare a website not only for use on a PC with a large monitor, the emotive word Responsive Design is also added, which only makes the whole thing worse.

Simply cutting everything in half is not a solution

Responsive design is the process of adapting the appearance of a website so that it looks the same on all possible devices or according to the screen size. Whether on the small mobile phone in portrait format, the wider tablet, or as usual for the large monitor.

Theoretically, the matter is actually quite simple. It uses a set of CSS settings as a base, and changes are made to it depending on the width of the screen. On the monitor, things are usually arranged next to each other and the space is used, on the mobile phone rather under each other.

<style>
	div {
		/* side by side */
		display:	inline-block;
		border:		1px solid black;
		width:		50%;
	}
	/* New definitions if width smaller 700 px */
	@media screen and (max-width: 700px) {
		div {
			/* one above the other */
			display:	block;
			width:		auto;
		}
	}
</style>

<div>Text left</div>
<div>Text right</div>

But the devil is in the details. If it looks comfortable on the PC, it hangs on the mobile phone. As soon as the narrow output has been adjusted, it looks strange again on the large monitor. If both were trimmed under compromises, the tablet causes problems. Viewed with a different browser or even a different operating system, there is another surprise.

Then there are also various HTML tags such as <a> und <pre>, which by default do not want to wrap content, which leads to horizontal scroll bars on the mobile phone. How long I spent looking for the CSS settings responsible for this alone, I will never even hint at anywhere. And no, simply using word-wrap, white-space or overwrap does not help!

Real designers may have better strategies and/or tools than I do, but for me it was sometimes a very annoying Sisyphean task.

Banging the table or talking to the monitor helps zero point zero, that's for sure.

Let there be light ...

Anyway. With today's update, at least the grossest blunders should be removed. There is always room for improvement, but it doesn't look really bad on any device anymore.
(I hope)

Accordingly, I deserve a break.

Martin

PS:
The next Boss is sure to come.
I'd rather not even look around.

About