Towards a Responsive Design

I am not sure I had really paid attention to the term responsive design when I started the redesign for this site. I just knew I wanted something that would be as readable on an iPhone as it was on my large desktop monitor. I made some conscious decisions to remove a bunch of extraneous elements not for the mobile viewing, but I simply wanted to focus attention on what ever it was I was writing about. Sidebars full of links, tweets, buttons and badges might have been novel 6 years ago when I started this site, but not so important to me now.

I also wanted to learn more about HTML5 and CSS3. For my own site, I’m completely not interested in supporting old browsers, save for using a HTML5 polyfill for < IE 9. If someone is using IE 6, they probably don’t have much interest in what I’m sharing anyway. So I played with some max-widths and widths based on percentage until I found something that worked for me. Perhaps that’s not the best way to approach it, as the site really should be about those visiting, but I guess I made an assumption my browsers/screen resolutions/mobile devices were common enough that if it looked OK to me, it should look OK to visitors. Up until today, I was fairly happy with what I had come up with, save for the Youtube videos I’ve been posting. I have been experimenting with using the HTML5 iframe wrapper Youtube offers, and choosing a very large version of the video. Which wasn’t working out for smaller screens.

But as I’m studying more about the advanced concepts of responsive design and using media queries, I ran across Ethan Marcotte’s fluid images post. Lo and behold, I set

iframe {max-width: 100%}

and my video posts scale along with the surrounding content.

I’m not sure I will mess with this site anytime soon code or design wise, but I do intend to experiment with using the Less Framework and possibly the intriguing context aware responsive images script over on my cooking site, which is a blueprint based grid design spun off of the markup of this site. I don’t think it would take much to convert the grid to the Less Framework. I may think about a design that’s not quite as similar to this in the process.

Regardless of the direction, I’d like to thank Kevin Zurawel for his WordCamp Miami session on responsive design and piquing my interest on the subject even more.

Excellent Design Bookmarklet Suite

Lately I’ve been contemplating switching to Safari, as Firefox still seems to be a memory hog, especially since I tend to leave my desktop on for days at a time. With the improvements to the developer tools in Safari 4, there’s less and less reason for me to hang on to Firefox. Couple that with this bookmarklet suite of design/development tools I just discovered, and the excuse of having to use Firefox for it’s superior developer tools flies right out the window.

The suite includes a configurable grid overlay, a ruler overlay, a measurement tool to determine distance between two points, and a cursor crosshair tool (I’ve not found how to use this one effectively, but it could be useful for figuring placement when using position: absolute).

I can’t speak to how Firebug and the Safari tools compare regarding javascript, as I don’t do much with javascript, save using various jquery plugins.

Color of the Year

In doing some research for design trends in 2009, I stumbled upon Pantone’s 2009 color of the year. PANTONE® 14-0848 Mimosa, a “warm, engaging yellow…no other color expresses hope and reassurance more than yellow”. Interestingly enough, COLOURlovers has relatively few palettes tagged mimosa, and of those few are inspiring.

I’ll admit color and color theory aren’t my strong suit, I tend to rely on Color Schemer Studio and sites like COLOURlovers. I did put together this palatte based on mimosa.

mimosa palette

Redesign

I’m working on a new theme, another open source design port. Being the impatient person I am, I’ve got a few tweaks still, so pardon any glitches while I finish up the tweaking. Certainly interested in any comments, I’ll post another more formal outline of the port when I’m done. This will be available for download when it’s done.

Live Designing

In the true spirit of blog design, I’m doing it live on the site, vs working offline. Not that anyone really ventures to this domain yet anyway. If you have stumbled in, thanks, and hopefully things will be functioning normal by the end of the weekend.

Humbling Attention

As I’ve had this site for a while, I’ve become less and less of a stats whore, but at least a few times a month I check my referrer logs. The past month or so, I’ve been linked to by two separate design showcase sites. The first, Liquid Designs, showcases sites that use liquid width design. A lot of this site is based on that concept, and it’s something I’m learning more about. The second, and more recent is from Design Melt Down, part of their “Beautiful Blogs” section.
I did put a lot of time into this past springs CSSReboot for the site, and have tried to maintain the site despite the lapses in content. However I would have never expected ANY type of recognition for the work. So to the operators of the site, and those that have clicked over, thanks.

Well, It’s a Start

I’ve managed to go through my first 140 or so posts and add tags via the Ultimate Tag Warrior plugin, so the concept of “categories” is now all but moot here at Mindless Ramblings. Hence the tag “cloud” in the middle. I’ve recently purchased a new camera phone with the hopes of moblogging some, but the flickr gallery plugin I’m trying to use is beta, maybe more like alpha, but hopefully I’ll get it to work, until then, don’t click the gallery link. I did do a little modification to the squible default style.css, but aside from a different image on the lead post and some colors changes, it’s straight out of the box. It’s such a different theme, that until I work through it more, it’s kinda hard to start changing things. Again, stay out of the gallery please, it’s not quite ready, but I may need it live to help trouble shoot the install.

Pardon the dust

In an attempt to get back to blogging, and fishing, and just about anything else healthy I can do to avoid hanging out late at night drinking Jagermeister and sitting in a smoky room, I’m going to change themes, and try to focus on the laptop and online more. So if things go wacky or seem odd, just contact me with a heads up. Oh, and if you see anything new you like, you can always comment on that also.

“Blank” WordPress Theme

I’m offering up an updated, beta version here.

So, as I’ve begun designing WordPress themes, I found the tutorial over at Urban Giraffe invaluable. They walk you through the dissection of the default Kubrick theme, how to strip it down to bare bones, and start with a blank style sheet. Now that I’ve done that a couple of times, I decided it would be nice to have all the work done, and be able to have all the template files cleaned, as well as a style sheet with all the divs and classes there, simply without the style.
Continue reading ““Blank” WordPress Theme”

"Blank" WordPress Theme

I’m offering up an updated, beta version here.

So, as I’ve begun designing WordPress themes, I found the tutorial over at Urban Giraffe invaluable. They walk you through the dissection of the default Kubrick theme, how to strip it down to bare bones, and start with a blank style sheet. Now that I’ve done that a couple of times, I decided it would be nice to have all the work done, and be able to have all the template files cleaned, as well as a style sheet with all the divs and classes there, simply without the style.
Continue reading “"Blank" WordPress Theme”