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