18
Fix Your Overflows (fractalvoid.codeberg.page)
submitted 1 month ago by to c/webdev@programming.dev
14 comments fedilink hide all child comments
 

Many websites don't bother to fix this thing which significantly improves the UX when browsing websites on small screens (smartphones, etc.). Overflows cause the webpage to drift when attempting to scroll down, and it can be a frustrating experience (at least, for me, especially when I have to re-adjust because the initial size of the text is small because somewhere down the page there is a long string of monospace text or code piece in a tag).

you are viewing a single comment's thread
view the rest of the comments
[–] 3 points 1 month ago (3 children)

Woah, that's very generous of you. I have a question tho. I have a dual screen setup. What is in your opinion the best DX to develop for both mobile and desktop at the same time? My current approach is having an editor + docs + devtool on one screen, the website on the other with full screen. When I need to check how it looks on mobile I turn on the mobile mode thingy but I always felt it is kinda jank

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 6 child comments
    •
  • [–] [S] 3 points 1 month ago* (last edited 1 month ago) (1 child)

    That's a matter of preference, what you're already used to. But the way that I personally do things when it comes to the design part is first do the "desktop version", then the "mobile version", i.e. I don't do those things simultaneously. If you have a dual screen setup, it sounds useful to have the DevTools on one screen and the browser on another, is all I can tell.

    Here's the reasoning behind "first desktop, then mobile": first, I start with the problem, and it takes a lot of time to get things straight; then, I try to build a mockup of how the product (website) should look like considering all of its features (elements); then, I write the HTML/CSS. Here, I am only focusing on the desktop, because my focus is turning the mockup into a reality, into the finished product. And everything else that is related to "mobile" or "tablet" or whatever smaller-screen-view comes with the use of CSS media queries. So that's not the main problem, should not be the main concern.

    Once I am done with the "desktop mode", my goal becomes making that to be responsive and adaptive. Responsive, in this case, means some elements are stretchable/can shrink upon resizing. Adaptive means that layout changes depending on the size of the screen. And I am absolutely using the mobile mode from DevTools, it is not a "jank", it is actually very useful, because I can choose from the dropdown what screen I want to emulate, including toggling the touch mode, or adding some throttling (also an underrated feature, because most people don't really care about performance), etc.

    Hope this answers your question!

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 2 points 1 month ago (1 child)

    Thanks a lot. One follow up tho if I may. How do you determine the markup and styling if the layout changes significantly from browser to desktop? Do you ship 2 different versions of the HTML and style them accordingly? My struggle is often about how to make the HTML and CSS so I don't repeat anything if possible. One example is having a list of navigation links in HTML once should be enough and show correctly on desktop and mobile via CSS only. But that is how a lot of UI frameworks usually do it. They have 2 different navigation markup. One for mobile as a drawer and one for desktop as a navbar. Only one is active at a time. The navigation link list is usually defined as a JS object but I don't feel like that's the way to do it properly.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] [S] 3 points 1 month ago* (last edited 1 month ago) (1 child)

    I see what you mean. Ignore learning from frameworks. They are bad. They are messy, chaotic, and they are not tailored for your website, they are generalized for any use case, so things are awkward, bloated, etc.

    So, try to avoid duplicating things. The rule of thumb is: if you want to duplicate something, then something is not right. And your feelings about it are on point. I will show an example of how I do things below. What I also try to avoid is using JavaScript when the same exact thing is possible to achieve with pure HTML+CSS (think of cases when someone has JS off). CSS is powerful enough for you to be able to create a DOOM-like game.

    Good news is, you don't need JavaScript to create such a navbar. And many people still don't know how to properly create navbars, e.g. they are using lists (ul,li) or might still use tables. SO, it all comes to your knowledge of CSS and how to "refer" to elements (e.g. your knowledge of ">" and "~").

    Suppose we have an HTML where I define a header with a navbar:

    <header>
    <div class="logo"></div>

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

    Notice how it does not use any lists, the links are not items--those are simply links, and I am also using semantically-correct tags (even though you can still use div class="navbar"). Then, in CSS:

    header {
    display: flex;
    justify-content: space-between;
}

.logo {
    background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
    width: 32px;
    height: 32px;
    background-size: 32px;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
}

    I want you to also notice how I have this "logical progression" in how CSS reflects exactly the flow of HTML elements, to keep it clean and intuitive (sounds like something very obvious, but from my experience it's still rare). This is me doing to for "desktop", the next concern would be making it "mobile-friendly". This is done using a "trick" where you add an invisible checkbox and make it look like a button, and once you click on it, it triggers the navbar. But I will post the full thing below, to not turn it into a full blown tutorial, I don't know if there are character limits here.

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
		}

		.logo {
			background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
			width: 32px;
			height: 32px;
			background-size: 32px;
		}

		nav {
			display: flex;
			gap: 20px;
		}

		header input, header label {
			display: none;
			cursor: pointer;
		}

		@media only screen and (max-width:500px) {
			header {
				position: relative;
			}

			nav {
				display: none;
				position: absolute;
				top: 100%;
				right: 0;
				flex-direction: column;
				background: #fff;
				box-shadow: 0 4px 12px rgba(0,0,0,.15);
			}
			nav a {
				padding: 20px;
			}

			header label {
				display: block;
				width: 20px;
				height: 20px;
				background-image: url("https://www.svgrepo.com/show/94793/menu-button-of-three-horizontal-lines.svg");
				background-size: 20px;
			}

			#menu_toggle:checked ~ nav {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
		}

	</style>
</head>
<body>

	<header>
		<div class="logo"></div>

		<input id="menu_toggle" type="checkbox">
		<label for="menu_toggle"></label>

		<nav>
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</nav>
	</header>

</body>
</html>

    I don't want to assume things you know or don't know, but I want to still point out some things like how I start my CSS with resetting certain values, like margins and paddings, and also setting box-sizing. It's an absolute must-have (believe me, back in a day I spent lots of hours trying to understand what is wrong when the reason was all because of box-sizing).

    [Edit]: Also, one thing with positioning the nav menu is that in header you have to specify "relative", and the menu (nav) should be "absolute". That's because the "absolute" is being set relative to the header, so the element's properties are going to be relative to the header, i.e. if you do not set the "relative", it will assume it's relative to the body and navbar will appear at the bottom of the page. This is also one of the concepts that at first might be confusing and annoying, but once you get a grasp of it, you'll be more confident with writing vanilla CSS and not touching frameworks ever again.

    Anyways, try not to overthink and always keep in mind that things should not be complicated and the best way to do something is the simplest way.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 3 points 1 month ago (1 child)

    Whoa. Thanks a lot for the in depth explanation! I really appreciate it. I do come from a time when HTML didn't even have a semantic tag and CSS was still having difficulty of styling combo box across browser. Good ol times of PHP "SSR" as the modern development calls it. I moved to more backend development stuff with occasional hardware/firmware so that's why I am so rusty when it comes to web front end stuff. However, I am now opening my own company and I want to understand the technology that I will actually use even if I will hand it off to a front end person eventually.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] [S] 2 points 1 month ago

    hand it off to a front end person eventually

    This is what's sad about the current situation in the industry: some things are being preferred not because it's better for quality and performance, but to reduce the friction in learning. So, if you're using a framework that everyone does, you'd expect your next hire/whoever is going to use it next to be familiar with it.

    I don't want to give you a bad advice telling you to go against whatever the industry agreed upon. I am personally doing things the way I think is the best, without caring who is going to use it next, because usually there's no next. It's either my stuff or work I do for someone else who just wants things to work.

    Yeah, I remember when semantics were not a thing, and people would do everything using tables, and when the Grid was introduced, I was a bit skeptical because I thought, while it is useful, it might not be compatible with most browsers used at the time. Today, though? Most of the people are on browsers that support flexbox, Grid, semantics (which is also important for accessibility), etc.

  • permalink
  • fedilink
  • source
  • parent
  • [–] 3 points 1 month ago (1 child)

    I second that monitor setup is a personal preference. Personally, I prefer alt+tabbing (repeatedly) over using multiple monitors. No need to rotate my head, to seek with my eyes. My colleagues seem to prefer using multiple monitors. One colleague has an ultra-wide. For me. a single 1440p is best.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] [S] 2 points 1 month ago

    Huge screen and DevTools being docked (either left or right). I am currently on a laptop, there's no other choice than to alt-tab. If it's a small desktop screen, then having a second monitor would be nice, but then if already got used to alt-tabbing, second monitor would be useful for some white noise TV. I once tried that dual screen setup, and the second monitor was small, and using it as DevTools was not that bad. But huge screen would've been better.

  • permalink
  • fedilink
  • source
  • parent
  • [–] 1 point 1 month ago (1 child)

    @bitfucker @hikosan

    There is also an app named polypane for this specific problem. Never try it myself but maybe it is for you.

    https://polypane.app/

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] [S] 1 point 1 month ago

    How do you know it's for this specific problem without ever trying it yourself? Plus, that website is bloated, crazy slow (1min+), and keeps downloading data even after the page has fully loaded. It is a perfect example of why the modern web is terrible. On the other hand, this post shows how to solve the problem, and it could perhaps aid in boosting your CSS skills for free.

  • permalink
  • fedilink
  • source
  • parent