Website Design & Mobile-Friendly Design

[Mcbuzzerr]

This is a really interesting topic!
I find that something that makes "mobile-friendliness" harder is using static measurement units such as pixels.
For a long time after I made this discovery I used exclusively vw and vh. I didn't even know what these units were, I saw them in inspect element, they happened to do what I wanted and I didn't look back.
Well I've looked back now, those units are View Width and View Height respectively, they are the width and height of your users window/screen. (only the latter if they are in fullscreen)
Useful but not for every measurement! As the width and height of the window change it can cause unexpected changes to your site!

Recently I've done something similar with the discovery of rem units, I found them when my IDE autocompleted a line of css with the unit.
I again started using it everywhere because it just felt good everywhere I used it. 1rem padding, 3rem header, 0.5rem spacing. It just worked! I had no clue what this unit was, but it was so perfect!
Ok so "rem" stands for "root em", which apparently means that the value is the font size of the root element.
This by default is 16px in most browsers. So this means rem is mostly static, but can change size depending on browser defaults.

This makes me wonder if rem units are a good or bad unit for a dynamic/mobile-friendly website?

It's stable and doesn't react to resizing the window, but it does react to the default font size being different.
If mobile browsers by default have lower font-sizes this could be very useful, if not then it makes no difference.

This exploration into different dynamic units isn't to say static units like pixels are bad and can't be dynamic though.
That's just a different approach that involves breakpoints and checking the view/screen dimensions and manually setting pixel values accordingly.

Most websites I make I try some attempt at making it mobile friendly (flexbox does a lot of heavy lifting, guess that's why it gets to flex), but for my personal neocities site I said screw it. I didn't want to worry about it.

When it comes to the modern internet you'll hear that mobile friendliness is something that should be addressed. You want to make your website accessible to as many people as possible and *many* people have phones, but also if it's a personal site then that doesn't really matter.

[Guest]

What are your thoughts on optimizing for mobile? Is this something that you consider while working on your site? To what degree? Or do you prefer to design specifically for desktop, or for your personal browsing experience? Maybe it is not something you expect on the retro web? Or something else?

Personally, I think optimizing for mobile is cool! I think it's overall a good thing to do if you want to have the widest reach possible audience for your site. Which is why I tend not to accommodate for it, LOL. As with all creative endeavours, I strive to make something exclusively for me, which means a 1920x1080 desktop screen. I mean, everything works on other resolutions or devices, but for my experience, then yeah, mobile won't look pretty is all.

I can't see myself attempting to make my site fit anything else either, because so long as it looks good for me then that's enough, yknow?

[debleb]

personally i haven’t optimised my main site for mobile. i’m not really sure how i’d go about altering my layout for a vertical screen tbh and on tablets and presumably larger phones it’s still somewhat usable in landscape mode. as others have mentioned there isn’t much in there i feel like you’d really want to see if you’re just scrolling your phone randomly not browsing on a pc and what there is i mostly have up on other sites like ao3.

my dinosaur website which i swear is going to get finished One Of These Days^tm though i’ve made with responsiveness in mind so although it’s not perfect it’s gonna be much more usable on a phone.

[Lyonid]

Every time I work on a new web-based project like my webspace I drag it around like a ragdoll to see if smaller resolutions can look at it fine. It usually works fine but I like checking it on sites that let you look at it in different resolutions. It really isn't that hard and fixed pixel measurements are never a bad idea when working on responsive layouts.  Sometimes it even feels like a riddle! One wouldn't need to calculate viewports and five different media queries for a blog, though.

However, at this point it feels compulsive to me and I certainly dislike knowing how to do it. I would trade all this knowledge away to stick to websites that are not mobile-friendly when they don't have to be. If your site or your vision don't work on mobile, they don't. If your site is a one-page blog on all resolutions, go for it. If you want a patchwork layout full of graphics, animations and odd shapes, you should never feel obligated to make some mobile-friendly version to appeal to mobile users first. I always tell people to not feel pressured to design responsively because it usually puts creative limitations on you before you have even started to have fun with your site. Think about the fun stuff first, and consider making it responsive later. Mobile-first is quite the limiting practice that is only for you if you want to appeal to generic software firms. Nothing more, nothing less.

DOUBLE HOWEVER, I will be mad at everyone using the smallest font size for their sites. I know it looks cute but any attempt at not making people squint is a good attempt. Before thinking about mobile-friendly layouts, think about who you want to welcome in the first place.

[myrrhdoll]

I plan to make my site responsive, firstly cuz I just moved from a big monitor computer to a lil laptop so right now I feel a lot like a visitor of my website and not the actual webmaster lol. Feels bad to not be welcomed, so why not just welcome everyone in the next update? Besides, my website just feels more complete if it had mobile responsive pages. Different screen sizes mean different layouts mean more fun coding time! Making pages fully responsive is not a practiced habit for me right now but I try to make the simple layouts as responsive as I can with just one line of CSS or with a few media query lines when the layout consists of columns that should stack in small screens. Of course, pages with decor graphics are still an issue, and I have not come up with a working solution/convention for myself yet.

[yungwake0]

I like having my website(s) be functional on mobile because I'm still traumatized from Reddit's poor excuse of a mobile presence

But in all seriousness you'd be surprised how many people out there don't have a computer and use their phones exclusively. Considering I know how to make responsive layouts and I'm fine with doing them, I wouldn't feel right excluding a whole group of people from my website just because I personally prefer the computer

I don't have anything against non-responsive websites though (except Reddit ). The Old Roblox shrine on my website is non-responsive; I didn't originally intend for it to be, but I just couldn't make the damn thing work made me realize that if nothing else, having a computer-only page or two can really open up a lot of creative windows

[CytricAcid]

This is something I tried to work on with my website-- but I've found mobile browsers all handle things differently and I really didn't want to try out every different browser renderer. I actually use a non-standard web browser on my phone because it actually scales down desktop sites that refuse to be scaled down so that text doesn't go off screen... because a lot of mobile layouts suck and I end up viewing the desktop version anyway.

One thing that has actually been an issue too is that I now have a 4k screen when I had a 1080p one previously, and I have to make sure it doesn't look weird at 4k either ! Thankfully, accommodating for a larger screen is much easier than a smaller one.

That being said... my site is not too mobile accessible, and I'm not sure how I'd make my site mobile accessible with my 3 column layout. Its certainly serviceable and navigable on my phone, but it looks awful and it kind of breaks certain parts of my layout. But everything that needs to be there is there, and I think that's whats the most important. When we're hand crafting web experiences and not following UI best practices in order to provide a novel experience, it's only natural that it would break on mobile. As long as things can be navigated and read, I think that's the only bar I expect to hit.

[starbreaker]

My website is basically a blog and a self-publishing platform for my fiction, and I never know when somebody might be reading my stuff in the crapper with their phone, so I took a "mobile-first" approach and used progressive enhancement for people visiting with "real computers" (laptops and desktops). One of these days I'll get around to learning enough Flexbox to implement a Holy Grail (three columns with header and footer) layout for reasonably large screens, but it isn't necessary.

[vvinrg]

I'm personally still working out how I want to handle this on my personal site, since it's designed with the assumption that I can lay out 120-column ASCII-art, cause I think it looks cool. I'm trying to make it as accessible as possible(ASCII art/text have ARIA labels so that screen readers can figure out the source text), and that means eventual mobile support. I think I'm going to refactor my current system to something like how Jekyll works, but built with mod_filter and SHTML and stuff like the current site, so that I can on-the-fly swap to 40-column mode for mobile.

[technomage]

Mobile-friendly design is a topic that's close to my heart. I consider having a mobile-friendly site to be a necessity, especially if you're taking accessibility into account. Some people (myself among them) simply can't sit at a computer for extended periods, and end up switching between mobile and desktop. Plus, a lot of the things that make a site mobile-friendly, or at least easy to make that way, are also common accessibility things.

Well-structured, clean code also lends itself quite well to making things easier to make mobile friendly. Order your HTML in the order its intended to be read/seen, typically header, navigation stuff, page content, footer, and then aesthetics-only stuff. Use CSS to position it on the page exactly where you want it. That alone will show you what the important elements of the site are because anything below the footer in your HTML really wouldn't be considered "important content". From there, you can safely hide the aesthetics stuff you don't want to deal with on mobile... And that's the key. You can hide things that aren't essential for getting around your site on mobile. Its common practice to do, even.

I know I'm new around here, but if anyone's ever struggling to get a workable mobile version of their site going, you're free to message me. I love doing this kind of stuff, honestly.
Also, here's some resources. They're all from CSS Tricks, except the grid generator (because grids are confusing and this thing is amazing), and CSS Tricks in general is a top-notch resource for coding:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/squeezy-stretchy-flexbox-nav/
https://css-tricks.com/responsive-data-tables/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://cssgrid-generator.netlify.app

[LittleGr33nIMP]

Personally my opinion on making your site mobile friendly is this.

Just start doing it it'll be easier the longer you do it! I'm not joking it's a great thing to learn even if you don't think your site needs to be! 🤷
It really depends on what your site is for but if its something like writing (articles, stories, blogposts, fiction, etc.) it's best to make it mobile friendly. A lot of people use their phones to view stuff like that. (I can attest to this I use my phone a lot to look at blog posts and articles.)

(Also another thing some people don't have access to computers or laptops. So that's another thing that I keep in mind.)

And as technomage has stated it helps with accessibility to.

(Man that reminds me I need to check my site on my other devices.)

[Guest]

I have never liked "mobile first" design because it almost immediately removes the creative aspect of web design, but if what I am making is supposed to just serve information, I'll go the extra mile to make it look good on mobile.

If it's a personal, creative thing, I only go as far as making it functional for phone and tablet users and hope that if they have access to a computer, they check it out in its full glory later on.

I personally don't mind if old web revival/personal websites aren't responsive because I only ever view them in a browser, and I got the feeling everyone did. It kinda doesn't make sense in my pea brain to browse sites that are a tribute to a time when phones and tablets weren't a thing on a phone or tablet.