Website Design & Mobile-Friendly Design

[wetnoodle]

My site is definetly not optimal on mobile but I got it to be usable by forcing the viewport to device width

Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and then scale all width values by percentage. Not the best but it seems to function the same on most devices.

[garystu]

Mobile design is easy. Change a sidebar to a header, remove some negative space, up the font size.

Its ok to have a "best viewed on" disclaimer but you only need a touch of CSS to make a site useable on mobile. Its not hard to do, and its not profound to not do. I think its good to buy a PC. You should buy a PC. but let's face it nobodys going out and buying a PC because some random personal website looks like ass lol. On the other hand it's all low stakes.

BECIDES 16:9 widescreen kind of looks Bad for websites anyway. its an aspect ratio for TV and gaming not web surfing...

.


posted from my cool and epic phone

[Semper]

I personally really love having a mobile responsive site. I think it's entirely possible to be creative while building a site within the confines of responsiveness. It was the limitations of a responsive design that gave me the inspiration to make my site the way it is, so my viewpoint is that creativity is possible whether on rails or in a sandbox.

I fully agree with people stating that a personal website should be what the webmaster wants it to be, including it being unresponsive. But, From my personal experience, I've found responsive sites to be a lot more fun to hang out on than unresponsive ones.

Some of my reasons for making my site responsive are:

• I have a blog, and a newsletter, and if I want people to read those then I need to make it easy, while still maintaining my artistic vision.
• Making my site responsive has made me pay attention to where I put my code, so I have a much easier time going back and editing things, updating my site's look, and even creating templates for new pages.
• I actually really enjoy looking at my website on my phone while not at my computer, because I am Narcissus at the pond, lol. I love my website and I want to always have it available to put my eyeballs on.
• What more, when I'm out and about and chatting with someone about my coding adventures, it's easier for me to pull up my website on my phone browser and show it off to people.

I also find the argument that "people need to detach from their phones" to be a fairly facile one that doesn't fully take into consideration why people are always on that damn phone.

Phones are a lot more versatile, portable, and cheaper than a computer, and the people who usually own only a phone are those with very little money. Homeless people use smartphones as do a lot of young people. If I am for a free and open internet, then I figure that I should make my arguably free to browse website easy to access for people who have little to no money.

For some young queer people their smartphone is one of the few places where they can afford privacy to look up info and art that matches their personal experiences, especially if they are living with homophobic/transphobic/queerphobic parents (whether this be on the scale of mild to outright dangerous). Taking into consideration my website in particular, I do not see it as an information hub for queer topics, nor do I intend for it to be, but but I understand that young queer people who only have a phone to explore their communities with do want to see queer art and queer stories, which can help some through difficult times.

I also believe homeless and low income people have a right to look at art freely, or read articles, or blogs, or newsletters, or whatever else someone could put on their website.

I have seen past threads on this forum where some members have talked about their site loading speeds, and how it's important that we build websites that can load on slow internet connections and old machines, and I think this drive for accessibility can also be applied to mobile users.

 

[ValyceNegative]

My go to method is having two main "@ media" queries in the CSS for tablet and mobile users: they don't change much (building completely different sites depending on media queries would be an unnecessary chore!), simply shove the side menus behind two trays accessible with buttons and do minor aesthetic fixes on the central column. I like to give priority to the contents of the page so menus take a step back instead of getting pushed either above or below the main text, I'm not a fan of infinite scrolling. I agree with @Lyonid that mentioned dragging the corners of your browser window around to be an immediate way of telling what's wrong with your site in different formats (zooming in and out helps as well, and I think Chrome has a way to emulate various mobile browsers to preview your page on those enviroinments), and with @brisray 's take on minimal HTML pages being the true form of universally accessible designs.

I'm one of those maniacs that browse sites from mobile, especially forums and I got myself used to navigate through desktop-sized pages on the phonescreen; this is because I'm mostly in a writing mood in the early mornings or nights when I'm still/already in bed and I don't want to drag my laptop all the way with me; so, if I stumble upon a site that's not optimized for mobile, I'm aware to be the one at fault here. I don't consider anyone's mobile iteration of their pages to be their primary, intended appeareance (not even mine!) and if I find something I really like to browse in more depth, I take note of the address to check at a more appropriate time.

With that said I still think accessibility and acknowledging the mobile-browsing crowd is important: if not as a way to accept how the Internet experience has changed since Geocities, at least it can be considered a way to entice more users to the web revival culture. I can understand how many replies mentioned being unwilling to change their site's structure to make it mobile friendly, as it's quite the feat trying to do it once the main desktop appeareance is gone and done. What I learned from experience it's that it's best to work on the other way around and have at least a basic structure of the smallzscreen version first that becomes the full-fledged site once the window screen gets large enough; decoration can come later (at that point it's easier to use the same assets for both mobile and desktop).

[Kallistero]

First, I think the question can be largely sidestepped. Most people on mobile are using mobile apps, not browsing websites. Easily at least 80% of mobile Web traffic is happening through an app, not a browser. If someone sees your website on a phone, it's probably because someone linked it on an app like Discord or Twitter or Facebook or a YouTube description. If you're a certain kind of silly, you might share it through flyers or QR codes. If you're expecting traffic from people who make their own Web pages (knock on wood), they probably have a desktop or laptop that they use to develop with, and that can bias especially Neocities & Neocities-adjacent traffic (like on this forum) toward desktop rather than mobile browsing, except in the specific case that you or someone else promotes your site on other platforms that do have mobile apps with embedded browsers.

To entertain the idea, though, "mobile-friendly" design has a lot of unexplored creative space in how people implement it!    The basic problem is typically thought of as making a page collapsible into something viewable in a single column. If the page is already single-column or just composed of a list of sequential items, this problem is trivialized. However, if your page is arranged in a non-rectangular shape like circularly or with elements floating freely, or if its scroll style is horizontally oriented instead of vertically oriented, or if page is just ordered with 3 or more columns, then either you compromise the design, you ignore mobile, or you take it as a design puzzle to make it work without changing your vision for desktop view.

Below is a simple example of a webpage diary I noodled out a couple days ago for one of my personal sites (anonymized because it's sort of private right now). I made it for desktop first, and... well, you see why I wouldn't want to make it into a single-column page on mobile:



If I want to make this page mobile-viewable, I either compromise on the book-like design choice, I don't make it friendly for mobile, or I come up with my own way to make it responsive. Well, here's what I chose:

Spoiler

  →    →
 

[close]

My diary still looks like my diary. This is a super simple example, but you see where I'm going with this. A more horizontally oriented page can have its rows turned into carousels or independently scrollable elements. Floating elements can be made to float somewhere else, or they can be made to float on top of the content (with opacity & pointer-events properties set to keep them from getting in the way), or elements can be made collapsible on mobile using the checkboxes CSS trick we have on the Everyone site homepage. You can even put a button panel at the bottom that can make up for just about anything you feel the mobile experience needs, like I did with these pages:

   

Making a page mobile-friendly can mean different things for different pages. I don't even think I've explored it very much, either; there's gotta be so many more wacky & experimental tricks we can try for this. I've only more recently warmed up to making a page mobile-friendly, just because it becomes a creative challenge on its own to bend a page to work on mobile WITHOUT constraining my vision for the desktop site. I don't really believe mobile-first design is necessary for a mobile-friendly page. Use as many columns as you want, let your elements float free as birds, let the page move in all sorts of different directions, and then, maybe if you feel like it, you can go on to puzzle out how you make it work on mobile! 

I feel that's an approach that can give you the best of every world. It could even be a cool challenge to get mobile-unfriendly pages and share ways we can make them more usable on mobile without removing anything 

[SCLPTURES]

i always try to make everything mobile friendly but i get why people might find it difficult, especially if you have an intricate layout. personally i got a hold of it fast since i started out with a site template that already supported mobile (thx sadgrl)

this bearblog post by pinkvampyr sums up everything, including accessibility in general. it has some strong and opinionated wording but i still suggest giving it a read. it motivated me even more to make my site open for all users, including mobile users, but that was already on the table. accessible design/mobile friendliness shouldn't be seen as "conformity", it opens up the indie web to a wider audience. it's not impossible

[xwindows]

What are your thoughts on optimizing for mobile?

I'm free of espionage slab (1) for several years now. So obviously, when I design a website, I don't do what's so-called "mobile first" design-- which implementations out there usually mean dumbing down the design elements, typesetting, site structure, and navigation so it would be palatable and "frictionless" to unwashed masses fat-fingering and doomscrolling from their couch...

I actually look at such shallow "designs" with derision.

In my designs, I actually consider these so-called "mobile view" a second-class priority. But regardless of what corporate web-destroyers (2) take such priority to mean; I actually mean it will be fully-functional, but not necessarily "extravangant as originally designed", done under least-effort-to-reach-standard basis. I design sites from a theoretical standpoint to be readable without devolving into a sidescroller in such environment, with all navigation and actions reachable and usable:

• The thing will be viewable in plain HTML (i.e. functional when stylesheet and images went kaput), as always.
• Proper viewport metadata will be set (even if it was just a dumb `initial-scale=1`).
• Both traditional CSS 2.0 "mobile" media type and CSS/MovingGoalpost's media query-based styling will be provided.
• Images will be limited to available width, whenever applicable.
• It will be comfortable to use for anyone with 24 KiB/sec download rate or better. (And would still be usable, though not comfortable, at 3 KiB/sec dial-up/sub-GPRS speed)
• No JavaS'creep generally.

In reality, when coding my design for this, I piggyback such mobile accommodations onto my support for retro-browsers running under low-resolution screen (3); which have several elements in common. But by treating mobile accommodations that way, it means:

• No real effort will be made on testing it on such device (since I don't use one).
• No attempt will be made to accommodate anyone who doesn't set his browser's default font size to the one he's comfortable reading.
• No attempt will be made to dumb-down the navigation. (No hamburger menu for you; half-screen list of navigation links is there, take it or leave it)
• No attempt will be made to dumb-down the content into bite-sized chunks. (If you insist to read 20-printed-pages essay on a 4-inch screen, or peeking/pinch-zooming at an A3-sized diagram through such tiny viewport; be my guest)
• No evil act of user-agent sniffing would be committed for such users' sake.

Views on such devices would serve to get the point across for any poor unfortunate souls who get used (4) by such addiction-engineered gadgets; but not much else. If someone with such device still have any problem viewing my pages despite of such accommodations I made, he is welcome to take emergency measure such as disabling stylesheet and/or images. (If he knows how to, and being lucky enough to use a mobile browser which allowed him to do so in the first place)

As the well-known rant says, pages which are viewable in plain HTML don't care if you are reading it from a pricey workstation with 4K display, squinted from a 240x320 screen of a 2G dumbphone, or hammering out its view out on an antique 72 CPL teleprinter.

Nevertheless, on my pages which I feel that their effective "mobile view" doesn't do my original design a justice, I will note somewhere on them that they're "Best viewed on a real computer"; even that the mobile-based viewer didn't actually feel that his view was degraded in any way.


(1) Or in the word of their proponents: smartphone.

(2) I refuse to call most of such people "web developers".

(3) I often accommodate down to 640x480 pixel resolution-- the mainstream screen resolution back when the general public was first exposed to the graphical WWW in the Mosaic days; but I make no accommodation for palettized display however. (And yes, I personally deem retro desktop browsers higher priority than mobile)

(4) I would argue that many of them are not users-- they are rather the used (or use-ee) at this point.