Main logo
A minimalistic blog engine for who don't want to RTFM.
Related tags
History
← Easter release
Category Icon  

Mobile Usability

Sat 23rd November 2019   
One thing I never really cared about was the usability of my blog on mobile devices, but apparently this is one of the criterias used by search engined to rank sites.

Time to do something about it

Media Queries

I really did not want to do a massive revamp of the site, so I'm just going to describe what I changed.

Basically the site is using a classical three columns structure, with some navigation tags on the left and right sides, and the actual content in the center.

Page width

I added some @media entry to override the class elements used for the three columns so they get shown vertically instaead of side by side on narrow screens:


/*
On narrow screens (vertical A4 screen), mobile device
we switch to a vertical layout.
*/
@media screen and (max-width : 1080px)
{
.wrapper,
.side-a,
.side-b,
.content
{
width: 100%;
float: none;
margin: 0;
padding: 0;
}
}


This has also an interesting side effect: It makes the blog more comfortable to read on a normal PC screen rotated to be in vertical position.

Font size

The second change was that the font was too small on high dpi screens (like tiny mobile phones or 4k/retina devices), I solved (I hope) that with another simple media query applying some changes on the top container:


/*
Double size font on high density screens
*/
@media (-webkit-min-device-pixel-ratio: 1.5)
{
.wrapper
{
font-size: 200%;
}
}

What's next

Obviously that's not enough, but I'm going to first see if this works sufficiently well on most devices.

The next step is to restyle the tags and other clickable elements so they are more spaced out to be easier to click on with fat fingers.
comments powered by Disqus