Mobile-friendly Personal Websites

mobile-friendly personal websites

@agentreynard wanted to hear more about how I made my website mobile friendly, so here's what I did:

First, crucially, I already had a one-column website that used css to style the HTML.

My website as viewed on a widescreen monitor. It has a hot pink background and a central column of text on a white background. The central column has a width of 70% of the screen.

This made it easy to adapt to smaller screens...as soon as I learned the following three things thanks to Christopher Heng's How to Make a Mobile-Friendly Website: Responsive Design in CSS:

1. You need this magical incantation in the HEAD section of every page:

HTML: <meta name="viewport" content="width=device-width, initial-scale=1">

2. You need to tell your images to simmer down and not be stretching out the screen by being as wide as they want. They can be 100% wide and no more!! Add this to the css:

CSS: img {
width: auto ;
max-width: 100% ;
height: auto ;}

3. And then you'll probably need to give the page special instructions on how to act if it's being displayed on a small screen. This is the fiddly bit. What you put in here will be specific to your website, but it'll all go at the end of your css, tucked inside one of these:

CSS: @media screen and (max-width:320px) {
/* CSS for screens that are 320 pixels or less will be put in this section */}

That's what's known as a media query and it can take a variety of forms. This one says that if a screen is 320px wide or smaller, these rules apply. You can also use "min-width" if you want to tell it what to do if a screen is larger than a set number, and you can put whatever numbers in there you want.

Mine looks like this:

CSS: @media screen and (max-width: 45em) {
#punk {width: 98%;}
.arrow {margin-left: 0px}
.img {padding-left: 0px;}
.indent {margin-left: 10px; margin-right: 10px}
.pod {margin-left: 15px}
}

Those were all classes I used for the original layout, only now I want them to display differently on smaller screens. So I shrunk all the margins to remove white (and pink) space and now that same page looks something like this on mobile:

Screengrab of same webpage as before, only as viewed on a much narrower screen, like that of a smartphone. The pink background shows as only a thin border around the central column of text, which now fills nearly all of the screen.

I did the same thing for the story files themselves, shrinking the margins so there's more room for text, but that took a different set of rules because they've got a different structure. I also added "back to top" links to the bottom of all my navigational pages.

Now, this is clearly not a foolproof or comprehensive plan. Everything I know about HTML and CSS I learned through trial and error, so I am barely qualified to say even this much. But these were the three things I needed to know before I could stick my hands in there and really shove stuff around.

More Posts from Zephiris and Others

zephiris

9 months ago

You, a human, can also do this! It’s surprisingly comfortable. Try it at your local treebranch today!

Yknow the thing where red pandas just lay down on a branch and let their legs hang and they’re just like vibing

230K notes View Post

zephiris

1 year ago

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

6 notes View Post

zephiris

1 year ago

Who says you can’t have femboys and eat their cake too

3 notes View Post

zephiris

1 year ago

the truth is, i do not think that it is useful nor helpful to treat rape and sexual abuse of any kind as singularly evil things that will damage and destroy victims forever and leaves them unworthy of life, and whose perpetrators are also singularly evil people who were born evil and need to be erased from society in order to get rid of rape existing at all. i do not think it is helpful to anybody including victims to tell them that rape and sexual abuse has damaged them permanently and that they have less worth as a human being for having been through that specific kind of abuse/assault. i do not think it is useful to treat sexual violence as completely different from other forms of violence, something that must remain taboo and that has no link to any other form of abuse and violence that might be perpetrated. it is especially not helpful when the very existence of transgender women is treated as sexual violence and a violation to protect cisgender women and children from. it is not helpful when victims of sexual violence are treated as damaged goods, when the sexual violence they've been through is either/both so taboo it cannot be spoken out loud, or something that marks them out as a potential perpetrator of said violence bc they have been forever broken by it.

2K notes View Post

zephiris

8 months ago