Report Blog Entry
A smartphone and a tablet showing Vladim! the website / Photo by Vladim
Today I successfully finished the last feature of my website: its adaptiveness to screens smaller than my 1080p screen. While passing-by web designers would snicker at me making a fuss about such mundane feature in the age, when people are more likely to browse the Web on their phones than on computers, I believe it's important to share my opinion on doing it in the first place.
In fact this post is not as much for programmers, for whom making a mobile-accessible website is a dynamic piece of a script-heavy cake, as it is for folks like me. The people who make static websites and host them on Neocities or Nekoweb. So if you're interested in this topic or seeking guidance, then enjoy the writing!
What people think and how they do it
When you search for posts on how do you make your website adaptive to smaller screens, you usually get links to articles on some business-centric publication, where the opening statements are about how this feature is an "essential necessity" that could cost you engagement and visitors. In fact, some big platforms that dictate the rules of the Internet of today, explicitly demand your website to be mobile-friendly. Google has an article for advertisers, where they quickly point out about how mobile-friendly websites appear higher in their search results. The same article mentions unfortunate truth: a lot of people browse the Web through phones, and they won't stand a website that is not adapted for small screens.
As the result webmasters face the dilemma of how they approach this problem. Usual sentiment, which is echoed in aforementioned articles, is embracing minimalist and responsive design. No more side blocks full of content, all the menus are bound to be hidden behind "burger" buttons. Fans of tables-as-layout would need to give up their last hope, as their futuristic designs made out of carefully cut images (for example, made by effectica in mid-2000s) simply crumble from being squished into dimensions of portrait mode.
Infamous website builder Squarespace provides all kinds of minimalist and responsive designs for businesses / Screenshot by unknown person
In the end the websites end up looking like modern art spaces or pretentious restaraunts: monochrome-painted walls with some artisticly-picked imagery and text, which is savory to uncomfortable degree, because there is nothing else to feast your eyes on. This is the peak mobile-accessible design, where you wouldn't have to worry about something not fitting into small screen experience or being too much for climate change (even though the backend is still a script beast that eats plenty of power). What a dull sight, yet it's perfect for big platforms that end up being today user's only destination on the Web.
What about the websites that are out of today user's range? The personal web? The culture of the Web Revival usually avoids thinking about mobile-friendly design. Whenever you enter one of Neocities websites, there's a chance that greeting text will have something along the lines of "it won't look good on a phone, I'll deal with it later / I don't care / ignore that". If a webmaster does care about adapting their website, they'd be likely to pull the 2000s trick of creating a made-for-push-button-Nokia kind of mobile version that hopefully will satisfy those with phones, that should ditch them anyway and join everyone else through "proper" computers.
What I think and how I did it
Of course, I faced this dilemma too. While I'm arguably more of a PC user than a phone one, who enjoys clacking on a physical keyboard, rather than on a small virtual one with confused preditictive text feature, I think that we should not ignore mobile users. In the time of big platforms imploding and newest generations being curious about exploring the Internet "beyond", it's the best to remember that we're living in 2025, the time when, as the choir of statisticians wails, "over half our time online being spent on mobile phones". Your website is more likely to be visited from a device smaller than your computer's screen with each year, and you need to understand how to make your website flexible for such situations.
My observations in this post have not been really unique, as a lot of other people also think that mobile-friendly design is the one devoid of life and complex layout. This view is what makes them dismiss the idea of trying to find a way to adapt their websites. In reality you don't need to give up your freedom of laying out your online place as a grid of random menus. You don't need to take down your animated graphics wall to make way for a main block of content, or paint everything mildly gray. The true essence of mobile-accessible design is flexibility and nothing else.
The front page of my website collapses into a more portable-looking page, partially thanks to these lines of CSS code / Screenshot by Vladim
The key is to treat your website like a modular building. By carefully putting block and inline elements together, in a way that it'd take just few value adjustments to put everything in its place, you can create a superb layout that would still fit your vision for cool and unique web design, and would not fall apart from tighter width of the screen. This modular approach also opens doors for easier HTML editing and design change, no matter how radical it could be.
Perhaps the most useful tool in reaching peak flexibility is @media rule written into your website's CSS-powered style sheet. Its "screen" media type allows selectors to change properties' values based on the device's screen width or height. Now you don't need to worry about something being too big or too small or sliding out of its place, when observed by a phone user.
Turning a side menu into a "burger" one needs scripts, and this one was my inelegant attempt / Screenshot by Vladim
By following these principles you can also avoid needing to add scripts. If your website is not a sprawling complicated system that has to be automated for comfortable maintenance... Or you managed to lay out menus in the way that they don't need to be shoved into "burgers", then careful HTML structures and CSS tricks are enough to get the job done. Simplicity is still a key after all, even when it's not about minimalism.
Last thoughts
In conclusion mobile design matters. It's a controversial topic that ties into the trend of the Web getting more complicated and automated, while corporate-minded people become its rulers, yet the topic is the result of technological advances that can't be ignored. Don't be fooled by Sillicon Valley entrepreneurs' idea of mobile website being a beige space with not much furniture; your website can still look rad and be accessible on any handheld device.
This is my first attempt at writing a proper blog post, although it's one big stream of conciousness that I tried to make coherent and helpful. If you got complaints, make sure to leave them in the comment section or send them through contacts on my website.
Comments
Displaying 0 of 0 comments ( View all | Add Comment )