Tag Archives: web design

Responsive Design

I’ve been playing around quite a bit with responsive web design the last few days as a result of a recent client requesting their new site be mobile-friendly. I’ve had to read up quite a bit on responsive design, but I’ve learned a lot both about what makes it a powerful tool to have and also about the various frustrations and pitfalls that come with designing a site that’s mobile-friendly. Not all themes make good candidates for responsive design, as I quickly discovered.

Responsive design is something I haven’t been altogether concerned about with my own sites since I was more or less content to default to the Jetpack mobile theme that comes bundled with that plugin. Building this design for my client, I realized how nice it would be if my own site was more mobile-friendly and customized to match my current style. So, yesterday, I rolled out version 2.1 of my theme.

responsive

If you’re viewing this on your mobile device, you should see a layout similar to the one above. This version of my site also got a couple of simple tweaks to its layout. I put a new social media bar at the top of the page for those links as well as for the search form, which frees up some real estate in my nav menu and sidebar. Everything else is built with relative dimensions, so the site should scale well on most mobile devices. The desktop and smartphone layouts work pretty seamlessly; some tablets may see a bit of jankiness. As it turns out, building a layout that accounts for every viewport size on every device is a large and daunting task. I’m not entirely convinced I’ve got everything in the middle quite right. If you see something odd on your device, I’d appreciate it if you could shoot me an email with a screenshot and the device you’re using so I can try to correct any issues.

That said, I’m chuffed about the updates to the mobile feature set of my site. Responsiveness is something I’ve had way in the back of my mind for a little while, but I honestly thought it was going to be more difficult to implement (i.e. building a whole separate theme; I didn’t even know media queries existed until this week) than it actually ended up being.

Next iteration of the site will be almost completely behind-the-scenes: shifting my stylesheet to SASS.

Designing with SASS

This past week, I ported the stylesheet for a web design project I’m currently working on from the traditional stylesheet to one formatted with SASS. And holy crap, y’all, how have I not started doing this sooner?

I’d heard about CSS preprocessors a little while back, and shortly after that WordPress added support for both SASS and LESS. Since I wasn’t working on any design projects at the time, I didn’t devote any attention to learning more about them. But I did read a couple of brief overviews, and a couple of items piqued my interest. The first was the ability to use variables to set a value once, use it multiple locations in your stylesheet, and then be able to change all the values at once simply by adjusting the value of the variable. This is a particularly handy tool with colors, since many elements in a site design use the same color values. Where before you might have:

.example {
     color: #ffffff;
     }

With SASS, you can create a variable called $font-color: #ffffff; and use it in place of your color value, thusly:

.example {
     color: $font-color;
     }

Now you can use the $font-color variable on any element that will use the same color in your design, and if you decide later that a different color will work better, just swap the value in the variable and the preprocessor will apply it to every element. Huge timesaver, that.

Another thing I appreciate about preprocessors is the ability to nest styles. Child elements in the nest automatically receive the parent classes, selectors, or identifiers in the rendered output. This eliminates the need to type those identifiers repeatedly the way you would in traditional CSS and makes your stylesheet easier to read. Instead of:

.main-navigation {
     margin-top: 5px;
     }

     .main-naviation ul.nav-menu, .main-navigation div.nav-menu > ul {
          border: 0;
          }
	
     .main-nvaigation li {
          font-size: 1.5rem;
          }

You can nest your elements like so:

.main-navigation {
     margin-top: 5px;
	
     ul.nav-menu, div.nav-menu > ul {
          border: 0;
          }
	
     li {
          font-size: 1.5rem;
          }
     }

The preprocessor then renders the output like this:

.main-navigation {
    margin-top: 5px; }
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
      border: 0; }
    .main-navigation li {
      font-size: 1.5rem; }	

Again a huge timesaver.

One of my other favorite features is the ability to split the stylesheet out into individual files, which the preprocessor then builds during processing. There’s still only the one HTTP request, and so any overhead normally incurred from the @import call is eliminated. For my project, I broke my stylesheet in six smaller files — one each for my variables, site body, header, content area, sidebar, and footer. Breaking my stylesheet down this way accomplished two things: 1) it made my stylesheet more manageable by reducing the amount of scrolling I needed to do, and 2) it made it easier to organize the elements for each individual section. At the final result, my based stylesheet ended up looking like this:

/*
 Theme Name: New theme
 Theme URI: newtheme
 Description: Twenty Twelve child theme
 Author: Jim Stitzel
 Author URI: http://jimstitzel.com
 Template: twentytwelve
 Version: 1.0
*/

@import url("../twentytwelve/style.css");

@import 'variables';

@mixin search-border-radius($radius) {
	-webkit-border-radius: $radius;
	   -moz-border-radius: $radius;
	    -ms-border-radius: $radius;
	        border-radius: $radius;
	}


@import 'body';
@import 'header';
@import 'content';
@import 'sidebar';
@import 'footer';

Technically, I could have split off the mixin into its own file, as well, but since there’s only the one, I opted to leave it where it was.

As I said above, WordPress now includes preprocessor support for both SASS and LESS inside its Jetpack plugin. You can also use a desktop preprocessor, like Koala, to do all the heavy lifting and then just upload the final stylesheet to your site.

I’m very pleased and happy with the result of my first experience with SASS. It has already saved me a lot of time and effort, and I plan to use it for every design I do in the future. If you want to read more about either SASS or LESS, I highly recommend you check out their respective sites. It’ll change the way you design.

Of Search Bars and Series Links

Ok, kids, Basic Web Design 101. First, if you’re going to run a blog-type website, it needs to have a search bar — that works! If you neglect to include a way for readers to easily search for and locate content on your site, then don’t be too disappointed when they can’t search for and find content on your site. Second, if you’re going to write a series of posts on a particular topic, each post in that series needs to include a link to every other post in the series (or, at the very least, links to scroll through the series in sequence). It’s just basic courtesy so your readers aren’t forced to do a search (with a form that may or may not exist) to find the rest of the parts in the series. Make it as easy as possible for readers to find the content they’re looking for, otherwise you risk losing traffic you might otherwise be able to keep.

Don’t Hide Your Webcomic

I saw this tweet from Nate Piekos (of Blambot) the other day and immediately cheered (at least, in my head):

I’ve noticed lately that a few of the webcomics I follow have redesigned their websites so that the comic no longer appears on the front page. Indeed, you have to click on a button to dig down a level to read it. What’s worse is that, in a couple of cases, that button actually gets lost in the design itself, making it that much harder to find.

Why would any webcomic author take the content that is their livelihood and not make sure it’s the very first thing visitors see? As Nate says in the Tweet above, that’s the reason people are there. Making it harder to find is going to turn off a lot of new readers — and probably a few diehards, as well.

One of my primary philosophies with web design is that content is king. Whatever the focus of your website, you want that information to be the first thing visitors see. This is especially true for webcomics. Your whole site needs to focus on and center around your art. If you have multiple projects going on simultaneously that you want people to see, then make your site’s design reflective of that — but make sure your comic is part of that presentation. Don’t bury it one (or more) levels down. Don’t make your readers have to go hunting for it. That’s only going to hurt you in the long-run.

Welcome to v2.0!

Welcome to my newly designed and relaunched website. I have long felt that it was time for a clean slate, so to speak, and what you see before you is the beginning of that. I’m hoping that this new site will prove to be a launching point for some of my professional web design projects, writing experiments, photography, and more. You can still find my previous writings and musings over at Shamus Writes.

Webcomic Site Designs

I’ve been perusing the archives for a variety of webcomics in the last couple of weeks, and I’ve seen a wide range of site designs for these comics ranging from abysmal to superb. There are two things I’ve come across that annoy the bejeebers out of me:

  1. ‘About’ pages that don’t actually tell you anything _about_ either the comic or the artist. One of the things mentioned in _How to Write Webcomics_ is that a webcomic site should have an ‘About’ page that should tell you a little something about the artist behind the work and possibly even a little something about the comic (like its inspiration, evolution, etc.). In two or three separate instances, I’ve clicked on the ‘About’ page for a comic I enjoyed in order to find out a little more about the philosophy behind the comic and in order to learn a little something about the artist, only to find one or two sentences that contain no useful information other than an email address. There’s one I’m reading right now that’s a little bit bent and contains an off-kilter brand of humor that I find rather enjoyable. The thing about it, though, is that I think it would be even more enjoyable if the artist would set the whole comic into some sort of personal context. I can interpret the comics he writes from my own point of view, but I can almost certainly guarantee that it’s going to be different from the artist’s POV, and there are certain of his comics that simply go right over my head because I don’t understand his POV. A more complete and comprehensive ‘About’ page would go a long way to remedying this situation.
  2. Useful archive links in prominent locations on the page. One thing that I hate is reading a the current comic in a webcomic, enjoying it enough to want to peruse the archives from the first one through to the present one, only to find that a) there are no archive links, or b) I have to click into the archives in order to get to the first comic, or c) there is simply no way, even by going into the archives, to get to the first comic. Any good webcomic should four links placed prominently on the front page either directly above or below (or both) the current comic – first, previous, next, last. New readers, such as myself, find those eminently useful in catching up on what’s gone on in the past, and without those links, we are more likely to surf away and never come back. Even having to click into the archives first before being able to click through to the first comic is frustrating. The more clicks you require your readers to go through in order to dig into your comics increases the chances that your readers are going to get frustrated by the experience and leave without ever becoming fans.

I’d say that about half of the site designs I’ve seen for various webcomics are extremely well-done. About half of the remaining comics could use a little tweaking and smoothing out of trouble areas, and the remaining quarter would greatly benefit from a ground-up redesign to make them more reader-friendly. Webcomics should be fun and easy to navigate, and good design is the way to make that happen.

They Came To Me

Ok, this is a first – I just received an email from a company that was interested in purchasing advertising on my website. I didn’t realize I was generating enough traffic to catch the attention of an advertising company. Best guess is that my Reclaimer comic is the thing doing it, between 900 and 1500 hits three times a week.

For those of you who might be worried that I sold out – don’t. I like keeping my little corner of the web ad-free.