The Ultima Codex Has a New Look
So, as most of you probably noticed around two days ago, the Ultima Codex got a bit of a facelift. I was more than a bit humbled at the quick and generous responses I received to support the continued operation of the site, and also took some of the feedback from the comments to that post to heart. Indeed, I took them so readily to heart that instead of sleeping like I probably should have, I worked late into the evening a few nights ago throwing together the new look for the site.
Key features: it’s a responsive theme, which means that it tailors its own appearance depending on whether you’re viewing it on a desktop screen or a mobile device. Even elements like the news slider will automatically adjust in this way. As well, it’s a nicer look — many people complained about the 2×2 feature columns on the previous theme, and so I’ve reverted the site to a more basic layout that shows each article in order, and only in order. I even threw together some custom CSS to make the sidebar menu work just so!
Oh, and the background image…what do you all think? It combines the paper map for Ultima Forever with some runic writing (which, yes, reads “The Ultima Codex”), and I think it looks quite smart if I do say so myself.
Anyhow, enjoy the new look! Here’s hoping that the friendlier layout encourages more of the comment activity that Old Aiera enjoyed so much of.
Oh, by the way: I’ve had to unpublish the forum for a spell, pending the working of some additional CSS magic to make it play nice with the new theme. This might have to wait until I get back from New Jersey; we shall see.
Looks good on ipad – don’t know whether that shows an adapted view or not, though. Probably adapted since I only see a very small part of the background – just the runes with a small part of the map. And it looks abit odd when you scroll down and the background stops.
If you’re seeing the background, you’re probably seeing the non-adapted view. If the site looks like all one column, that’s the adapted view.
Odd that the background scroll is working (it’s supposed to be fixed; only the site content should scroll), but I can set the backdrop to tile vertically I suppose.
The background doesn’t scroll for me. The runes are a nice touch, too.
Looking better now, I guess you tiled it now
On the iphone it performs horribly. Scrolling is a pain, and it loads stuff for ages. Another oddity on both ipad and iphone: when you write a comment and you have to correct something and you move the cursor to the place where you want to correct sth, the only key that is working is backspace. You have to press done and then start editing again and even then you can only add stuff and not correct where you’ve written before 🙁
Okay, let’s test this from the iPhone. I note that the comments text field is a tad wide, although the text wraps to the next line mostly appropriately. And I was able to jump back just now and insert the word “mostly” without losing keyboard functionality. Ditto after jumping back to add “to the next line”.
So…I can’t seem to replicate the errors you’ve mentioned. I’ll try again from other mobile devices I have to hand and see if an issue crops up.
Loading speed…that’s something I’ll have to test for when I get back to Canada and can hop onto 3G and LTE again.
This is better. Still not as good as Aiera was for comments, though. You could really see everything that was going on the site there, with the way the posts were tiled horizontally as well as vertically.
I’ll look into it.
If I may ask, why must there be so much unused space to the sides? Is there a rule stating that the page must be so narrow? Most people use widescreen monitors these days, so the current layout (like previous ones) causes a lot of wasted screen space.
No, no rule. I could probably push it wider. I’ll look into that. It might allow me to set up the double-column look that Infinitron misses.
As I mentioned on Twitter, it looks a whole lot cleaner and friendlier to move around. You did a great job, and I appreciate all the effort you put into bringing us all great Ultima-related content.
Now testing on an old iphone 3g. With that I have no problem (except for long loading times on wlan). The newer iphone (4) and the ipad (3rd Gen) are both on newest iOS (6.1) while the 3g one is stuck at ios 4.x. So is your device on ios 6.1?
Yeah, it’s an iPhone 5 running 6.1, and it seems to work fine.
I will see if I can do something about that admin bar, though…that should go. And I think I can do something about the banner content…I can probably tell some of those DIVs to “display: none” to render their content invisible to mobiles.
You might also consider making the font that displays the number of comments bolder/easier to read at a glance, so that it’s easier for people to notice that it has changed since their last visit.
Hmm…I’ll see if I can re-add that neat little icon that broadcasts the number of comments. That work?
Why doesn’t the “number of comments” icon appear for any post above this one?
That is a very good question, one I will have to look in to.
I think part if the scrolling problem is the WP bar that tries to follow up down when logged in. Maybe logged in is also what screws the editor. Also the lower part of the page with every banner and menu available in the full version crammed in there is really excessive. A mobile version should come without all that cr… Sorry… stuff
About the comment field editing issue:
When you are not logged in – no problem editing the stuff in the comment field.
When you are logged in -> the problems I described.
For testing this I needed to grab the phone of my gf since there is no logout option in the mobile version (if possible the login item in the menu should be a logout item when you are logged in).
Ok, I’ll look into it some more. Good suggestion on the login/logout flip…I will see if I can do anything with CSS to make that happen. That’s the real catch here…anything I do needs to be in pure CSS, else I risk breaking the mobile layout.
I did edit the admin bar CSS; when the site flips to its mobile layout, the admin bar should disappear. And I should be able to do the same for the sidebar divs as well.
Okay, so I’ve added login/logout links to BOTH menus using a custom function. It’s not quite as elegant a solution as I would have hoped for, and I may try and tune the function so that it only adds the link to one menu or the other…but hey, the links are there now.
And yes, using a custom function is evidently the only way to make just such a link appear in a menu in WordPress at present. Feh.
Next up: testing comment-posting from mobile when logged in.
Okay, let’s test this again. And again. And now I’ll go back and add a second “And again” to that. Ah, okay, there’s the error. That is bizarre. Now I’ll look up a fix, if one exists.
Okay, apart from the fact that there’s an odd spell-checker link getting in the way of the pretty…let’s see if turning off the Jetpack comments module thingy does anything. Apart from making the text field very wide…wider than the iPhone can comfortably display.
But can I go back and insert text when logged in? Why yes, yes I can.
Dom? Please to test?
Seems to work ok now. Scrolling is now unjerky as well since the adminbar went away. But yeah the text field is big now 😉
Getting rid of more banners would be next I think, on wlan it’s ok but truly mobile could do with less.
Yup, I’ve figured out how to kill the banners. Just need to write the CSS.
Edit: That was easier than I thought; a single line of CSS took care of it.
It almost seems to be a quirk of the iPhone itself…it wants to zoom in on the text input when it becomes highlighted. Zooming out slightly with a reverse pinch seems to bring the whole text area back into view — and it’s quite usable — and selecting an earlier piece of text to edit doesn’t seem to reset the zoom.
So…manual fix, sadly, but also something I can’t do anything about. No amount of CSS can tell iOS to stop zooming browsers in on text fields.
The issue seems not to crop up in landscape mode, however. The iPhone still zooms in, but the text field width doesn’t exceed the screen width at that orientation.
Now I only have to little problems left:
– notify of follow-ups by email
– notify of new posts by email
When you are registered and logged in, IMHO, the checked option for the follow-ups shouldn’t send a confirmation mail.
And the notify of new posts by email is “dangerous” as it will spam one’s email account. And since it sits there so conveniently it is too easy to accidently check it 😉
Hmmn…let me dig into the subscription settings.