I’m wrestling with a new blog template at the moment. It’s kind of mostly working…ish, but there are still a few little issues, such as the main content doesn’t line up with the page header quite right.
But once the quirks have been fixed, the site should look better, particularly on mobile devices such as smart phones and iPads.
It also has a random picture at the top, just for a little variety.
Comments, or issues you might see most welcome! If you see a problem, please let me know the device, browser and version.
One conclusion: I find CSS to be a little like black magic.
Update 16/1/2014: Some more tweaks thanks to feedback. Have made the page wider, allowing bigger images (will now use 800 width Flickr setting). Memo to self: add class=”postpic” to avoid them going out of proportion when seen on smaller screens.
15 replies on “Wrestling with a new blog template”
I’d suggest a darker, high-contrast font. That grey text is difficult to read on an iPad, would be even harder on a phone.
Looks fine on my laptop. Random picture nice.
Thanks Tim, will adjust the main font.
I’ve still got issues with phones. Still making tweaks.
Other comments from people who came, looked, then went back to Twitter to tell me!… https://twitter.com/danielbowen/status/419327368323289088
“I like the random picture in the header, but the text is offset to the right. I am using Firefox if that makes a difference.” – I think this is now fixed, but am yet to check specifically in Firefox.
“Not looking particularly good in Chrome for Android (SGS4)” – yeah there’s an issue with the way phones are handling the header, then resizing everything else to allow for it.
I really like some of the subtle and nifty features and layout, well done!
The top picture/menu bar taking up half the screen is very 1994 though?
@Chris, I can’t claim credit for it – it’s the WordPress 2011 theme, with a few of my tweaks.
I’m undecided about the big picture/menu bar… though in the original theme, it was even worse, as the blog title/description was above the picture, not overlaid on it.
Will keep tweaking it as I get time.
This is your website mate. It is up to you. I do like the changes so far.
I will however say, that I am a great fan of dark backgrounds, and bright foregrounds.
With a Hexadecimal color value,
Text Foreground;I would say use an E to F for at least one of the RGB in the color
Background:never go over 2 or a 3 in any of the RGBs
Borders:No more than a 4 or 5 for at least one.
Once I had used 8 as my border for my websites, however found them being too bright.
@tranzitjim, I disagree about light/bright text on a dark background. It may make your web page stand out from the crowd, but it’s terribly hard for many people to read.
I have a vision disability. I can cope with dark text on light background as long as I enlarge the font sufficiently, but light/bright text on dark background has a visual effect that looks like it’s shaking. Imagine trying to hold up a page of a book and read it while your hands are trembling. That’s what it’s like. Enlarging the font doesn’t help – the result is larger shaking text, and even though I can now work out what it says, it causes a headache if I read it for too long. I’ve spoken about this to other vision-impaired people, and some have said that light-on-dark causes problems for them too.
The only way I can get round the problem is to change my browser’s View settings to NoStyle, which produces plain text on a white background. Occasionally I’ll do this if I want to read the web page badly enough, but the result is vastly inferior: you lose all the graphics and all the neatly placed boxes, and the whole contents just get shoved over to the left.
As well, there’s a degree of resentment at having to do this and still ending up with an inferior version of the website. It makes me wonder: doesn’t the blogger / web page owner WANT people to visit their site? Then why have they designed it in a way that makes it difficult for some people to access, for no good reason? They might as well be saying “Go away. I don’t care about you. I don’t give a damn whether you read my page or not.”
It’s rather like designing a new building with a long flight of steps out the front, and putting up a sign saying that wheelchair users can just use the back entrance. Technically you’re not excluding them, but they have to go out of their way to enter your building, for no reason other than that you wanted to make a grand architectural statement at the front. This is understandable in older buildings where ramps can’t easily be retrofitted, but there’s no excuse for disregarding the needs of the disabled when designing new buildings – and similarly, I would argue, no excuse for disregarding vision-impaired people when designing web pages, either. I’m sure there’s no intention to deliberate exclude them – it’s a matter of web designers not knowing, rather than not caring – which is why I try to spread this message.
I find the use of websites the other way around.
I find white background being way too bright a lot of the time. Bit like staring at the sun. It hurts my eyes in no time at all.
I find it strange how text can look like it is shaking when you reverse the contrast. Sounds more like a software issue to me.
Not a software issue. The text isn’t actually shaking – it’s an optical illusion caused by my vision impairment. I’ve had other people (with normal vision) check the problem websites to make sure. Looks fine to them. It’s just how my eyes and/or brain process light-on-dark for some reason. I can make out what it says if I enlarge the font enough (way more than I need to for dark-on-light blogs such as this one), but the text still seems to be shaking, and causes considerable eyestrain and headaches.
It has been getting worse in the last year or two as my already-poor vision has deteriorated further, and I’ve now reached the point where I mostly don’t bother with such websites. If someone directs me to their blog, or a business directs me to their web page, and I take one look at it and the bulk of the text is light-on-dark, then sorry – they’ve instantly lost me as a reader / customer. Same if there’s not enough of a contrast between text and background, such as light grey on white, or black on dark blue.
I take your point about a white background being too bright for some people (although I don’t have that problem). But there are plenty of other light background colours that aren’t blinding white.
If I’m really really tired then I too can end up with the shaking phenomena (entire vision starts bouncing) – but triggered by a bright screen with dark text, the worst possible contrast to glare at your face.
Oh how I miss the old DOS days of MS Word having the scientifically proven white text on blue background, that was such a pleasant colour scheme. WinWord does have an option buried somewhere to turn on that old option but it’s horrid to work with in a WYSIWYG world.
Thanks kindly to people for their input about screen color(s).
Perhaps what Daniel needs to do is, split the website over different gTLDS. say buy domains which end with .mobi .tv and so on. Have the HTML in each one different, to suit different device types.
You need only have one web hosting, and have the other domains forwarded to their respective landing or homepage, all located in the web hosting of the first or main domain name. Then, you just have access to the same database of information, just that it is displayed differently.
At least that is how I work with my own websites.
Seriously? Back in 1994 maybe :)
All one needs do is create a couple of variations to the CSS that defines the main text regions, allow the user to toggle between the different the style options, and save their preference in a cookie to retrieve on subsequent visits.
Anyone putting formatting within HTML should be squirted with BBQ sauce :)
it might just be me, or maybe you removed it, but the links to the blog topics,
IE – public transport, aren’t there
I thought the old one looked better. This one fits less on the screen so I seem to have to scroll a lot more.
Thanks for the feedback everyone, keep it coming.
Still on my list is fixing the Search.
@declan, the links aren’t there right now, but I do intend to re-instate them.
@Vaughan, I agree, and I’ve widened things so more will fit now without scrolling.