Tweaking the Theme

I’ve made a few small tweaks to the site theme.

When I first switched to this custom theme, responsive design was in its infancy, and neither the parent Twenty Twelve theme or my custom adaptation were designed for phones.

When I started using Jetpack on the site, it came with a mobile theme that I enabled. It looked very generic, but it also looked more presentable on mobile than the main theme… until a week or so ago.

Jetpack has given notice that they are retiring their mobile theme, so I decided to turn it off, to see how bad it was without it. Pretty bad. So I decided to turn Jetpack’s theme back on until I found time to deal with it… and found I couldn’t re-enable it. Oops. So, I’ve been chipping away at the issues for the past week or so, and now it’s pretty presentable on mobile.

The first thing I did was to override the fixed width on the content container. Here, I simply added a max-width to it, so that it wouldn’t get wider than the viewport. Next, I changed the way the background images are delivered — by default, the page only has background colors, and the “words” background image is only loaded for larger sizes. Next, I adjusted the positioning and sizing of the search field on mobile. Now, it’s small by default, then expands to cover the whole masthead. Finally, I adjusted the padding of the nav items so they all fit on a small screen.

I’ve also replaced a couple of the gradient images with linear gradients. I was using repeating background images for a couple of the gradients, to work around IE issues, and I really don’t care about IE anymore. I’ve also stripped out some vendor prefixes on some styles.

Update 2/29/2020

I’ve replaced the repeating “words” background image on the body element, so that I could also have a retina version for retina users. The words are mostly the same, in the interest of providing a text alternative, here they are:

<html> <head> <body> <nav> <img> <heading> <section> <div> <div> <span>


reading motorcycling New England diving photography kayaking Boston Charles River gardening bicycling Star Trek


document window Angular Observable function Array Event prototype Class string


aperture shutter lens ISO depth of field motion blur histogram exposure focal length strobe SLR f/stop


padding margin box-sizing flex color text-decoration background border top left

I’m not sure this theme is “worth” this effort. It’s just over 8 years old, which is ancient in web terms, but frankly, I still like the way it looks. And now, it looks like itself on mobile, too.

Stupid Spammer

I may not get a lot of actual comments here, but I do get my fair share of comment spam. The point usually is to be able to place a link to some other site here in order to raise their search engine ranking. They don’t really care about this site, or conversation about it; they’re just using it to increase their PageRank. Others use the comment queue to send me messages, mostly about scummy ways to improve my own search engine standings*.

Some of them are just blatant about it, but others are a little more… circumspect? …devious? They consist of a couple of sentences of very generic comments, that often sound complimentary, but don’t really have any relationship to the subject at hand, in hopes that the spam will be accepted as an actual comment.

I moderate every comment. I get an email for every comment that the system doesn’t recognize as spam, read it, and either release it or mark it as spam. In addition, I look at my comment spam from time to time, and if I recognize patterns, I add them to the block list, which will automatically mark the comments as spam. From time to time I check the spam folder, and see something that the system marked automatically. I just saw a lulu.

This comment is a pipe-delimited list of generic comments – the spammer robot was supposed to only post one per comment, but pooped the whole thing into one posting. Here is is (stripped of the links they were trying to plant)

I’ve been browsing online more than 2 hours today,
yet I never found any interesting article like yours.
It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the net will be a
lot more useful than ever before.|
I couldn’t refrain from commenting. Very well written!|
I will immediately take hold of your rss feed as I can’t in finding your e-mail subscription link or newsletter service.
Do you have any? Please let me recognise in order that
I could subscribe. Thanks.|
It’s perfect time to make some plans for the
future and it is time to be happy. I have read this post and if I could I
want to suggest you some interesting things or advice.

Maybe you can write next articles referring to this article.
I want to read even more things about it!|
It’s appropriate time to make some plans for the longer term and it
is time to be happy. I’ve learn this put up and if I
could I want to recommend you some fascinating issues or
advice. Maybe you can write subsequent articles referring to this article.

I wish to learn even more issues approximately it!|
I have been browsing on-line more than three hours lately, but I never found any fascinating article like yours.

It’s beautiful price sufficient for me. In my opinion, if all site
owners and bloggers made excellent content material as you did,
the net might be much more helpful than ever before.|
Ahaa, its pleasant conversation on the topic of this
paragraph here at this weblog, I have read all that, so now me also commenting at
this place.|
I am sure this piece of writing has touched all
the internet viewers, its really really fastidious post on building up new website.|
Wow, this post is fastidious, my younger sister is analyzing these kinds of things, so I am
going to tell her.|
Saved as a favorite, I like your website!|
Way cool! Some very valid points! I appreciate you penning this post plus the rest of the site is extremely good.|
Hi, I do believe this is a great web site. I stumbledupon it 😉
I am going to return yet again since i have saved as a favorite it.
Money and freedom is the best way to change,
may you be rich and continue to help other people.|
Woah! I’m really digging the template/theme of
this site. It’s simple, yet effective. A lot of times it’s very difficult to get that
“perfect balance” between usability and visual appearance.

I must say you have done a amazing job with this.
In addition, the blog loads super fast for me on Opera.
Excellent Blog!|
These are genuinely impressive ideas in regarding blogging.
You have touched some nice points here. Any way keep up wrinting.|
I really like what you guys are usually up too.
Such clever work and coverage! Keep up the good works guys I’ve
added you guys to our blogroll.|
Hi there! Someone in my Myspace group shared this site with us so
I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers!
Terrific blog and brilliant style and design.|
I really like what you guys tend to be up too.
This type of clever work and exposure! Keep up the good works guys I’ve included you guys to our
blogroll.|
Hey would you mind stating which blog platform
you’re working with? I’m going to start my own blog soon but I’m having a hard time
selecting between BlogEngine/Wordpress/B2evolution and
Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique.
P.S Apologies for getting off-topic but I had to ask!|
Hi would you mind letting me know which hosting company
you’re working with? I’ve loaded your blog in 3 completely different
internet browsers and I must say this blog loads a lot faster then most.
Can you recommend a good internet hosting provider at a reasonable
price? Thanks a lot, I appreciate it!|
Everyone loves it when people come together and
share thoughts. Great website, continue the good work!|
Thank you for the auspicious writeup. It in fact was a amusement account it.
Look advanced to more added agreeable from you!
By the way, how could we communicate?|
Hello just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Safari.
I’m not sure if this is a format issue or something to do with browser compatibility but I thought I’d post to let you know.
The design look great though! Hope you get the issue fixed
soon. Thanks|
This is a topic which is near to my heart… Take care!
Where are your contact details though?|
It’s very easy to find out any matter on net as compared to books,
as I found this article at this website.|
Does your blog have a contact page? I’m having
a tough time locating it but, I’d like to send you an e-mail.
I’ve got some ideas for your blog you might be interested in hearing.

Either way, great website and I look forward to seeing it
improve over time.|
Hola! I’ve been reading your site for a long time now
and finally got the bravery to go ahead and give you a
shout out from Humble Tx! Just wanted to tell
you keep up the fantastic job!|
Greetings from Los angeles! I’m bored at work so I decided to browse your site on my iphone during lunch break.
I really like the knowledge you provide here and can’t wait to take a look when I get home.
I’m surprised at how quick your blog loaded on my phone ..
I’m not even using WIFI, just 3G .. Anyways, great blog!|
Its such as you learn my mind! You seem to understand a lot about this,
like you wrote the e book in it or something. I think that you simply
can do with a few percent to drive the message home a bit, however instead of that, that is
excellent blog. A fantastic read. I will definitely
be back.|
I visited many blogs however the audio quality for audio songs present at this web site
is really superb.|
Hi there, i read your blog from time to time and i own a similar one and i was just wondering if you get a
lot of spam comments? If so how do you protect against it, any
plugin or anything you can advise? I get so much lately it’s driving me insane so any help is very much appreciated.|
Greetings! Very useful advice within this article!
It’s the little changes that will make the biggest changes.
Thanks for sharing!|
I really love your blog.. Very nice colors & theme.

Did you make this amazing site yourself? Please reply back as I’m trying to create my own personal blog and would like to learn where you got this from or just what the theme is called.
Thank you!|
Hello there! This blog post couldn’t be written much better!
Looking through this article reminds me of my previous roommate!
He constantly kept preaching about this. I’ll send this information to him.
Pretty sure he’ll have a good read. Many thanks for sharing!|
Incredible! This blog looks exactly like my old one!
It’s on a completely different topic but it has pretty much the same
layout and design. Great choice of colors!|
There’s certainly a great deal to learn about this issue.
I really like all the points you have made.|
You made some really good points there. I checked on the
internet for more information about the issue and found
most people will go along with your views on this website.|
Hi there, I check your new stuff like every week.
Your humoristic style is witty, keep up the good work!|
I just couldn’t go away your site before suggesting that I actually enjoyed the standard info an individual
supply for your guests? Is going to be back continuously to check out new posts|
I need to to thank you for this good read!! I certainly loved
every bit of it. I have got you book marked to look at new things you post…|
Hello, just wanted to tell you, I loved this blog post. It was practical.

Keep on posting!|
Hi there, I enjoy reading all of your article post.

I like to write a little comment to support you.|
I constantly spent my half an hour to read this web site’s articles
or reviews all the time along with a cup of coffee.|
I constantly emailed this webpage post page to all my contacts, since if like to read it then my links will too.|
My coder is trying to persuade me to move to .net from PHP.
I have always disliked the idea because of the expenses.
But he’s tryiong none the less. I’ve been using Movable-type
on several websites for about a year and am
worried about switching to another platform. I have heard fantastic things about
blogengine.net. Is there a way I can transfer all
my wordpress content into it? Any kind of help would
be really appreciated!|
Good day! I could have sworn I’ve visited your blog before but after browsing
through some of the posts I realized it’s new to me.
Nonetheless, I’m certainly delighted I stumbled upon it and I’ll be book-marking it and checking back
often!|
Terrific work! This is the kind of info that are supposed to be shared across the net.
Shame on the search engines for no longer positioning this post upper!
Come on over and consult with my web site .
Thanks =)|
Heya i’m for the first time here. I found this
board and I find It really useful & it helped me
out a lot. I hope to give something back and help others like you aided
me.|
Hello, I believe your site could possibly be having internet browser compatibility issues.
Whenever I take a look at your web site in Safari, it looks fine however, when opening in Internet
Explorer, it’s got some overlapping issues.
I just wanted to provide you with a quick heads up! Besides that, fantastic website!|
A person necessarily help to make seriously articles I’d state.
This is the first time I frequented your website page and up
to now? I amazed with the research you made to create this actual
post incredible. Excellent process!|
Heya i am for the primary time here. I came across this board and I in finding It really helpful & it helped me out
much. I’m hoping to offer something back and aid others such as you aided me.|
Hi there! I just would like to offer you a huge thumbs up for the excellent information you have here on this post.
I will be returning to your website for more soon.|
I every time used to study paragraph in news papers but now as I am a user of net thus from
now I am using net for articles or reviews, thanks to web.|
Your method of telling all in this paragraph is genuinely nice,
every one can easily be aware of it, Thanks a
lot.|
Hello there, I found your site by way of Google even as searching for a comparable matter,
your website got here up, it seems good.

I have bookmarked it in my google bookmarks.
Hi there, simply turned into alert to your weblog via Google, and located that it is truly informative.
I’m gonna be careful for brussels. I will be grateful for
those who proceed this in future. Lots of other folks shall be benefited out of your
writing. Cheers!|
I’m curious to find out what blog platform you happen to
be working with? I’m having some small security issues with my latest
website and I’d like to find something more safe.
Do you have any solutions?|
I am really impressed with your writing skills as well as with the
layout on your blog. Is this a paid theme or did you modify
it yourself? Either way keep up the excellent quality writing, it’s
rare to see a great blog like this one these days.|
I am extremely inspired with your writing talents and also
with the structure on your weblog. Is this a paid subject
matter or did you customize it yourself? Either way stay up the nice quality writing, it is uncommon to
look a great blog like this one these days..|
Hello, Neat post. There is a problem along with your site in web explorer, might test this?
IE nonetheless is the marketplace chief and a huge element of
folks will pass over your wonderful writing because of this problem.|
I’m not sure where you are getting your info, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for excellent info I was looking for this info
for my mission.|
Hi, i think that i saw you visited my website so i came to
“return the favor”.I am attempting to find things
to enhance my site!I suppose its ok to use
a few of your ideas!\

*Note to spammers selling SEO services: I don’t give a rat’s ass about my search engine rankings. If my content isn’t good enough for the search engines to find it, it doesn’t deserve to be found.

New Year, New Look

Just in time for the new year, I’ve revamped the appearance of the site. This is something I’ve been wanting to do since I first set up the site, but I had the notion that I needed to create a whole new theme, and was very slowly working my way through a WordPress book.

As it turns out, that wasn’t necessary. WordPress supports child themes–it isn’t necessary to create a whole new theme, you can simply override the parts of an existing theme that you want to. In this case, I’m basing my theme on the default TwentyEleven theme I was already using.

I’d fallen in love with the theme’s header image feature, and had already created some really nice banners from some of my pictures. But I wanted more color, I wanted to play with web fonts, and I wanted an appearance that was mine.

Typography

The fonts I’m now using are Museo Slab for the titles and Museo Sans for the main body text. Right now, I’m using TypeKit to provide them. One thing I’m less than crazy about is that you need to add a script to bring them in, and they’re hosted by TypeKit. I need to look into self-hosting them.

Backgrounds

The main blue background is a PNG gradient applied to the HTML (root) element, with the “words” as a repeating PNG image applied to the BODY element. I’m of two minds about this background, from an accessibility standpoint. On the one hand, they’re meant to denote some of my interests, which would indicate that that some programmatically determinable method should be available. On the other hand, they’re meant to be decorative and kind of subliminal, and not to be really read. They’re not in a meaningful order, and in fact, you can’t see them all. They’re almost just texture. In the end, this is the line of thought I’ve followed.

The other gradients are created via CSS, using code based on ColorZilla’s Ultimate CSS Gradient Generator.

HTML Changes

Most of the generated HTML is still straight TwentyEleven. During development, I had to replace the stylesheet link with a hard coded link to my development site– WordPress is absolutely bloody-minded about using absolute links, which makes things needlessly complicated when you’re developing on a development domain. The one HTML change I’ve made so far is to add a little markup to facilitate the “posted on” calendar, which I implemented via a filter in my child theme.

One other change I want to implement in the future (hopefully, near future) is to provide alternative text for the header image. Surprisingly, the stock theme only provides an empty alt attribute with no easy way to add alternative text, and from what little I saw on the support forums last night, this was a design decision–I gather the feeling is that they regard the header image as being strictly decorative, and want to head off keyword stuffing. I can see that, but I can also see a site creating header images that include text, which would need alternative text. In my case, I’d like to add alternative text indicating what the header is a picture of, and it would even be nice to add a little visible caption with that information.

Browser Support

The site looks great in Safari, Opera, Chrome, and current Mozilla browsers like Firefox or Camino. I’ve looked at it in IE 7 and 8, and it looks good in those browsers too, though it’s missing some of the niceties like text embossing and rounded corners.  I haven’t seen it yet in IE 9. I am aware of an issue in older Mozilla browsers — the typography is missing, as is the gray background at the top, due to a bug in the way those browsers dealt with unknown elements. (The site uses some of the new HTML 5 features). The site is still readable, though, and the work-around– serving the site to Mozilla as text/xml– is risky, since one misplaced entity or malformed comment or post would blow the page out of the water. In the end, I’ve decided to accept that older Gecko based browsers won’t see as nice a presentation of the site. Fortunately, usage of these browsers is well under 1%.

Update 1/4/12:

I’ve now seen it in IE 9, and of course, IE Is Being IE. Earlier versions of Internet Explorer don’t support rounded corners, but IE 9 does. Unfortunately, since I was using an IE filter style to provide the top gray gradient, there were square corners poking out of the header. Apparently, it can’t clip the rounded corners when using older filter styles. I’ve replaced that gradient with an image; which took care of the problem.

Future Plans

As I stated above, I’d like to add alternative text/captioning to the header images, and I may add a little control to the home page enabling the user so rotate through the images without reloading the page. I also need to look into a widget to display tweets (I’m @ShutterAperture on Twitter). I will be adding an About page, and uploading and providing links to some of my older static pages that I was hosting either on Comcast when I was using them, or MobileMe. And in two weeks, I’ll be heading to Bonaire for a week of diving, and am looking forward to blogging about that.

Happy New Year, everyone.

 

Puttering Around

I’m finally starting to get some ideas of how I want this thing to look. I started messing around some in Photoshop and BBEdit tonight to play with an idea I had for the look of the site, which is rather different from the way I normally put a site together at work.

At work, I’m almost always handed a finished Photoshop document, and asked to make the site look as close to the Photoshop document as I can. With a static site, I can generally come pretty close, and do my best to execute the design as closely as I can. With a dynamic site, I do what I can, but the software often places constraints on what you can do– if the HTML structure output by the software, which is pre-written– doesn’t match the design, there’s not much you can do. It’s also been my experience that some designers include features that the software doesn’t support.

For this site, I’m starting to get a sense of what I want to look like, and I’m mocking it up statically on my local machine. Instead of creating the whole design in Photoshop, I’m just creating bits and bobs, then trying out the CSS directly in BBEdit, locally. There’s nothing here on the site to see yet.

The other consideration is making the thing work with WordPress. I have a lot of experience at work, skinning dynamic systems, but that has been on systems that I did a lot of work on myself, and in ColdFusion. I’m going to have to learn how to do things The WordPress Way, and I’m going to have to pick up a little PHP too. And part of the process is going to be to find out what kinds of goodies I have to play around with in this environment. But that’s part of the attraction too.