Over the past week I struggled with the decision to maintain my own infrastructure for my website. For now, I have decided to keep the backend the way it is, but I really wanted a much more compact and simple frontend for the site. I was inspired, in part, by some of Tumblr’s offerings and by Andre Torres’s site. It’s not as stripped down as Torres’, but it’s close enough for now. I was especially inspired by his compacting post title and other meta-post information into a single line. It was a great opportunity not only to learn more about CSS, as the whole re-design was, but to learn a bit more about WordPress’s infamous loop. Please let me know what works and what does not. And I am open to suggestions that make the site easier to read or use. (I recognize that my desire for simplicity might make the site harder to use for some.)
The age of the mobile device is upon us. Smart phones, or smartphones, be they iPhones or Blackberries or Droids, are everywhere and making sure our users can access our content in a way that respects the full functionality of their devices and, at the same time, the limitations of their screens is becoming increasingly important. As many web developers already know, the problem is that the browsers on these devices often don’t announce themselves very well, and so you have to guess a bit — or, rather, make it possible for your website to guess a bit.
Here’s the <head> code for guessing the iPhone and sending its browser, Mobile Safari, the right style sheet:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
A good place to begin, as always when it comes to CSS, is A List Apart, which has an article entitled Put Your Content in My Pocket.
With the Christmas holidays here and a little bit of time on my hands, I am feeling in the design mood/mode. With the bathroom repair behind me, I am also in the building mood. I don’t know that an overhaul of the JLX site’s CSS would typically fall under build but it’s too wet to put my furniture-building plans into effect.
There are several articles discussing CSS3 that are prompting this:
- 24ways has an article on making your mockup in mark-up that repeatedly cites the convenience of CSS3′s ability to use gradients, create highlights and shadows, and to specify fonts as a reason to “design in your browser.” (Much of this is in reference to an overwhelming number of web designers doing their mockup in Photoshop.)
- The author of the “Make Your Mockup in Mark-Up” is Megan Fisher who has a nice site of her own which takes advantage of a number of CSS3′s abilities.
- A lot of designer’s now subscribe to the cult of grids. Slammer is a gridding tool that you deploy as an overlay on your Mac — and so it isn’t built into your CSS the way some of the gridding systems are. The interesting thing about Slammer is that it offers you the chance to choose different gridding/design systems: Golden Ratio, Fibonacci, Rule of Thirds, etc.
- One of the cool new things about CSS3 is it’s ability to create alpha effects with color, using the new
rgbaproperty. It uses the following scheme:color: rgba(0-255, 0-255, 0-255, 0-1);. - Tim Brown has a terrific write-up on how to use
@font-face. He also has a great list of web design basics that are worth reading either when getting started or reviewing when you feel the need to revisit the basics.