Website Design & Mobile-Friendly Design

[Nightdrift]

It goes without saying that mobile device usage is a commonality in this day and age. As someone who still predominantly uses computers over a mobile device, it is a little startling for me to imagine that a lot more people are using their phones to connect to and browse the web. It makes sense, but I also imagine most of this surfing is often used to browse bigger platforms or social media sites with actual web development teams, who do often optimize for a mobile experience.

Designing one's personal website to be friendly or optimized for mobile (from my experience browsing sites on Neocities) seems to be a fairly whimsical and unpredictable topic for a lot of users. Homepage descriptors along the lines of "SITE IS NOT MOBILE FRIENDLY", "SITE DESIGNED ON A ____x____ MONITOR", "BEST VIEWED ON [BROWSER OF CHOICE]", or "I'VE TRIED TO MAKE THIS MOBILE FRIENDLY" are common sights -- sights I'm not at all adverse to seeing, but these sorts of disclaimers did pique my own curiosity about others' experiences with designing their sites.

Speaking personally, I don't worry too much about cleaning my site up for a mobile experience. For a personal site, it is quite nice to have that power of having things be viewed as the webmaster intended, even if that does mean the mobile version might be a bit of a mess. It might be a bit of a selfish act, but I also think it is a nice reminder that one's personal site is one's own, and that one will have the most authentic experience possible. That said, while I have not really considered going all-out with mobile-friendliness, there are definitely a few visual bugs that annoy me sometimes when I do look at my pages on a mobile device. There is also the realization that some people may only own a mobile device to browse the web, and do not have access to a desktop/laptop -- though I think that is an entire discussion in of itself.

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?

[Obspogon]

I used this tutorial and it's been fine since then. Getting the tables to shrink can be a pain.

[Melooon]

Its a good question and always worth a debate, thanks for asking!

So I have metrics on a few of my sites that says what device people use; and what Id say is IT DEPENDS. My personal rule of thumb is that if it works for 80% of users, that's good enough. My main site gets 12% mobile traffic, so that means it works for 88% of users on desktops with no mobile support at all (that said I do try and have SOME mobile support just so its not totally broken).

search.melonking.net gets about 30% mobile traffic, so its more important in my mind to support mobile for that site. I think that's because its a service or utility and people use those more on phones, although that said this forum only get 11% mobile traffic.

I think the biggest question is always, does this info neeeed to be on a phone? A moody music exploration site does not need to be on a phone, and recipe site prob does because people might want to use the phone to read in the kitchen.

[Cy83rPr1mm13]

I think the biggest question is always, does this info neeeed to be on a phone? A moody music exploration site does not need to be on a phone, and recipe site prob does because people might want to use the phone to read in the kitchen.

This is how I feel about it as well, I don't think any of my sites contents would be of interest "on the go" so I don't bother with mobile support; and I think my site looks fine enough on landscape that a mobile user could navigate it anyways.

If I did standard web browsing on my phone I would probably feel differently, but I never really 'got' the point of phone browsing, since I've always had some kind of laptop or desktop available.

[Nightdrift]

As always, thanks for the great responses : D It is always great hearing people's points of view & rationales behind their preferences.

My personal rule of thumb is that if it works for 80% of users, that's good enough. My main site gets 12% mobile traffic, so that means it works for 88% of users on desktops with no mobile support at all (that said I do try and have SOME mobile support just so its not totally broken).

search.melonking.net gets about 30% mobile traffic, so its more important in my mind to support mobile for that site. I think that's because its a service or utility and people use those more on phones, although that said this forum only get 11% mobile traffic.

Basing design off of service/utility makes a lot of sense. I do also like the thought that...it doesn't have to be all or nothing, necessarily, when it comes to said metrics. On the note of forum traffic, I would probably die trying to use a forum on mobile haha...that said, I do use it to keep up with people's responses, but the risk of fat-fingering the post/preview button on a reply...is a risk I personally cannot take!

I don't think any of my sites contents would be of interest "on the go" so I don't bother with mobile support; and I think my site looks fine enough on landscape that a mobile user could navigate it anyways.

I resonate a lot with this thought, Cy83r -- when it comes to "surfing the web" in the context of personal sites, browsing in front of a monitor vs a phone just currently feels more natural. Of course, this could entirely be the opposite for those who prefer to predominantly browse on mobile, and I'd be curious to hear from folks who prefer that camp. But I usually find the desktop experience more immersive.

I used this tutorial and it's been fine since then. Getting the tables to shrink can be a pain.

The results from that tutorial look great -- it's nice that it does not look like it takes much work to get things running better, too.

---
After sleeping on it a bit, I do think I have the bias of wanting a larger "canvas" to play with, which kind of goes back to hoping visitors can "view as it was meant to be viewed". That said, the tinkerer in me does values some degree of mobile navigation...though if it can be done with minimal effort, the better -- I think there is some amount of personal pride, in seeing and knowing your code, with minimal effort, can work on multiple devices & screen sizes. (It is definitely not laziness...no way...)

[m15o]

It's always incredible to think about the amount of device sizes our websites will be seen on. What's also crazy is to think about all the type of browsers. Sometimes, users will visit from low connectivity places, sometimes, they will have javascript off. At times, they won't enable CSS. It's so unpredictable. I think it's more than okay not to have a homepage look good on mobile. In a way, I'd almost expect it. It's part of the charm of a homepage.

On my end, I usually go with mostly text-only content with single or double column that tend to flow naturally on mobile. It's more of a self-imposed constraint than anything. It happens to work on mobile too.

[Melooon]

It's always incredible to think about the amount of device sizes our websites will be seen on.

On that note there is a flip side; Iv heard that some parts of my site (particularly the games) have big issues on ultra wide monitors when people have their browser in full-screen. Apparently when you make some bits very wide, links move up under text and you cant click them anymore. So supporting different widths is an issue whether you go up and down!

[Guest]

i spent two hours just now making libre.town somewhat usable on mobile

It was not that hard, honestly.

[Skykristal]

in my opinion mobile friendliness is not something you need on a personal (none business) website but is great to have. I have my own website optimized for mobile. For me but also for others. I want it to be accessible. It's important to me that if someone only has phone access, that they can easily look at everything and navigate and don't end up clicking away after 2 seconds because the site is literally unusable. ( my commission info is part of my website as well so I of course want it to be as usable as possible, I also advertise on apps sometimes, not just websites & link to it)

I however much prefer desktop design. websites just look much nicer on a big screen rather than on a mobile device which is why I still try to make my mobile version somewhat creative and try to keep as many decorations as possible without ending up with a mess. (overlapping, wrong positioning etc.) mobile friendliness is not too hard to archive, but especially if you like decor and fancy unique layouts it can get a little tricky and might need a lot of restructuring if you code your website with no mobile version in mind.

[brisray]

I don't do web surfing on my phone but my sites are mobile friendly for those that do - about a third of my visitors use mobile devices. As others have said, it's not hard to do, mainly looking for the points where a change in screen size starts making the pages difficult to use, then changing the element size a little or using media queries.

Oddly enough very old pages work better on mobile devices than some newer pages. The reason being they were written top down, one section simply followed another. Mobile devices simply compensated for the pixel size and the only real problem is that some images end up a little bit wider than the screens.

https://brisray.com/bristol/bemmy1.htm - one of my older pages.

At least designing for mobile is a whole bunch easier than writing for non-compliant browsers like IE6 was.

[fLaMEd]

It is often overlooked that HTML is responsive by default. Much to the observation brisray just made.

HTML becomes unresponsive when elements are given fixed sizes and you start fixing positions.

A more interesting topic could be, how do you not make your website unresponsive :P

[Gans]

For site navigation, use more text instead of images. Use some text-based symbols to make a button-like.
[ Section 1 ]
[ Section 2 ]

Looks particularly good in a text-browser too. And as it was mentioned, text scales better than images.

I'd say for testing, just take the browser window size and play around with it. The website should stay intact, no matter the resolution.

  is also very useful, should a word be seperated in an unfortuneate manner. It's a non-breakable space, which denies that space being used as a line break.

[choiyoona]

I need to buckle down and make my website properly mobile-friendly, I'm very forward about my site being built on and tested on firefox, this is mostly out of necessity as I love to edit but I'm not fully informed on coding + have some issues with energy levels that mean that while I can check other browsers, I'm never sure how soon I'll be able to fix some fatal issue on google chrome for example. But, it deserves to be done imo, mobiles deserve to be fed a good-looking version of a site too!

[Nullcasting]

  i know for a fact that my site looks like total crap on mobile. i am not smart enough to fix it.
half of the site was initally made with Adobe Dreamweaver 3, which means that code was made with a tool that existed before smart phones did. I uh. Don't think it'll handle any changes.
I also kind of have a hatred of what mobile-first websites look like - they're all the same! it's so boring, and it looks like crap on desktop (where i spend all of my waking moments). It's hard for me to feel like making my site more accessible on mobile, because i'm worried it'll just end up having to look like all the rest - which is a shame, since i do care about accessibility. I've got alt tags on pretty much everything, and the colors shouuuuldn't be too bad on the eyes? the only thing i'm not sure about accessibility-wise is the flash image gallery (but since it's just like, fake javascript, maybe there's a way... I digress)
IDK. maybe i should just lock some front-end developers in a room with some pizza and my website code and see what they can do. 

[Okato]

My site’s layout is based on an image with absolute-positioned divs and iframes, so it’s not exactly easy to make it mobile friendly. I enjoy reading things on my phone at times, so I decided to put the effort in to do so.

I didn’t want to refactor the entire layout, so I came up with another idea. Have a button that resizes the main iframe to fill the entire screen!

As mentioned earlier, basic HTML is often responsive as is, and a lot of the page content is basic HTML, so it ended up working pretty well.

P.S. I wrote this on my smartphone with the WAP2 version of this site!