ErosBlog: Now More Responsive, More Mobile
I’m delighted to announce the latest major revision of the WordPress theme files that power how ErosBlog appears on your screen. Please let me know how it works for you!
Major changes include:
- Larger fonts everywhere. My original designer, seven years ago, used a then-trendy style of reducing all the font sizes roughly 25% from browser default as controlled by the user. Seven years later, I’m now somewhat wiser about respecting user/client preferences. So, fonts now bigger by default. And if you change them in your browser, stuff should work better, because:
- Flexible spacing. The old design had a lot of fixed-pixel spacing. I haven’t rooted them all out, but now, for the most part, white space expands and contracts depending on the available screen space and the browser-default or user-adjusted font sizing.
- Responsive(ish) design. A major goal of this effort was to make Erosblog less painful to use on phones and tablets and even very large screens. I’ve made feeble efforts in the past, but was hampered by my utter lack of comprehension regarding things like viewports and media queries. Now, as you view ErosBlog on increasingly smaller screen sizes, bits of the layout go away or get smaller and some mobile-friendly nav elements appear. As you move onto bigger screens, things should also look better, due to the fixed-pixel sizing mostly being gone.
Please, please, please let me know if ErosBlog is hopelessly or uselessly borked in any way for you on any device at any screen size. Leave a comment (or email me) with the problem you’re seeing, and don’t forget to mention your device and/or operating system and browser.
I do ask that you be gentle. Coding work like this is rather hard for me; I’m a liberal-arts graduate with no training for it and little understanding (all hard-won). I’m very much of a cargo-cult programmer, building stuff by cutting and pasting bits of other stuff that already works while having imperfect comprehension (or none at all!) of how the stuff fails or why it ever worked in the first place. I’ve probably got fifty hours into this latest revision, and I know how far from done I am. But if I wait to release it until it’s done and perfect, it will never be released. So, here are some major items that I hope to still deal with “later”:
- Fundamental design. Seven years ago my designer flaked with the job half done, and I ended up pasting up a Frankenstein monster consisting of her visuals wrapped around a skeleton of my old table-based structure that I originally wrote for a different content-management system and then ported to Greymatter before porting it again to WordPress. I’d dearly love to start over and write a new template from the ground up, with nothing borrowed from websites I “built” in 2000 by copy-pasting html from other sites. But for a cargo-cult programmer like me, that’s a huge job. Realistically, it may never happen.
- Validation and accessibility. My cargo-cult cut-and-paste CSS is full of errors, kludges (can you find the same-color-as-background periods used for spacing?), and deprecated stuff. There’s an enormous amount of work still to be done in cleaning it up, getting it to validate, and modernizing it so that elements actually relate to function in a good HTML5 sort of way.
- Bandwidth friendliness. ErosBlog was born at a time when slow dialup internet connections were thrashing their final death throes, and it’s always been operated on the assumption that readers are at desktops with large screens and bandwidth that’s too cheap to meter. Now that lots of ISPs have bandwidth caps and most smartphones are on limited data plans, there’s a lot more care that could go into serving content in ways that aren’t so bandwidth-wasteful.
- Visual polish. My only styling concern during this pass was to make sure that nothing broke horribly. There’s a whole lot of minor visual improvements that I plan to be working on for the next few weeks.
So, what was the boot-to-the-ass that finally got me motivated to do this very painful redesign? Simply, this: in the slightly more than two years since I got my first smartphone, I’ve gotten more and more dependent on it. It finally got to be a big enough fraction of my internet use that I began noticing my own aversive reaction whenever I’d accidentally click through onto a site that sucked (or was completely useless) at 320-pixels. And then I realized I had the very same aversive reaction when I landed at ErosBlog and had to try and pinch-zoom the content column large enough to read. And if I myself was having that reaction, how many others must be? Meanwhile, I kept landing with pleasure on mobile-friendly sites that put the content front-and-center and politely vanished most of the huge nav and advertising stuff that fills large screens. Eventually I couldn’t stand it. I want people to feel like that when they land on ErosBlog! So, I dug in and got to work.
Hopefully it’s better now. Do you know anybody who used to read ErosBlog but gave up in disgust because it sucked on their phone? If so, I’d be forever in your debt if you’d ask them to pretty-please have another look. Thanks ever so much.
Similar Sex Blogging:
Shorter URL for sharing: https://www.erosblog.com/?p=9820
Gah. Bad. Shouty. Everything too big.
Your site to do with as you see for of course, but I hate it when sites get optimized for mobile. Invariably it looks worse on the desktop. Information density much lower. Just my opinion, of course, your mileage may vary.
Not to mention, no scrolling to the next article???
Looks pretty good on my smartphone. The larger fonts are particularly appreciated. I know I said I’d only do it till I needed glasses, but apparently I got carried away!
Looks great on my phone, which is what I use to read it. :)
Thanks for the feedback so far!
Alex, I’m sorry you don’t like the larger fonts. But I wonder whether you fully grokked the reason behind the change? By getting rid of the CSS rule which forced all fonts to display at 75% the size of the user’s browser default and nuking fixed positionings that counted on that rule, I’ve restored the ability of folks (including you, if you like) to view the fonts in any size they want. On most Windows browsers you just hold down the control button and scroll your mouse wheel up and down. Ctrl-zero takes you back to default. Firefox (I dunno about other browsers) seems to remember your font size preferences on a site-by-site basis, which makes it reasonably handy to do. The design should be flexible enough now to look decent (or at least OK) at any reasonable font size you like. Step down just one font size and you should be back to something fairly close to the ErosBlog you were used to, albeit with maybe more white space. The idea here was to make it possible to please everybody. Will that succeed? Nah, it never does. But, closer is better.
What sort of article scrolling would you like to see? For this pass, I kept the familiar ErosBlog navigation, with most recent articles available via vertical scroll in the old bloglike way. In individual post views, there have been “next” and “previous” links at the bottom for a long time. Are you suggesting the ability to use horizontal swipe gestures on touchscreen devices to navigate between posts in that view? If so, I agree it’s a good idea and have enjoyed its like in many apps. But I’m starting from zero technically — I don’t have the first idea how to implement it so it may take me awhile bashing my brain against Google. (I literally don’t even know if it’s possible to do with basic HTML and CSS and Javascript, which is where my toolbox ends. Most mobile niftiness seems to use things like Jquery which I only just learned about by accident while Googling to solve CSS problems during this round of redesign.) So please be patient!
It looks really good on my Android phone. My aging, increasingly presbyopic eyes thank you for the larger font.
Last night it seemed to me I could not scroll down with the wheel to previous days entries, but now that appears to be working. Perhaps I was in the commenting screen and didn’t realize it.
“Optimized for mobile” is a pet peeve of mine, the desktop experience invariably suffers when that is done. Windows 8 “modern interface” is a perfect example. Excessive white space (both in traditional publishing and the web) is another thing that annoys me. I’ve gone to the trouble to have this luxurious large high-resolution display, and often so much of it is now empty.
I’ve tinkered with font size here a bit and Firefox does seem to remember it on a per-site basis. We’ll see.
i like it a lot…
Like it a lot.
Now, if only the fifteen other sites I visit would get rid of the CSS rule which forced all fonts to display at 75% the size of my browser default, I could change my browser default back to what it was years ago before I was forced to change it due to the CSS rule.
I especially appreciate the larger font size. As I grow older, my eyes aren’t what they used to be (either).