john bollwitt blog

Delicious recently did an overhaul of their site design about three weeks ago, and many folks have already weighed in on what they thought about it.

For me, I have to use something for a while before I really give my full sense of how a redesign like this actually affects my work flow because I use their service so much.

For me, it’s way too hard for me to grasp the concept of writing it as “Delicious”. For so long, it’s been “Del.icio.us.com”, and I think that’s a large, geeky reason that I liked the site. In this redesign, they also did a rebranding and dropped the extra dots. It’s a small thing, and I’m getting over it. I always loved the clever use of the .us domain.

Otherwise, I love the new Delicious. The redesign has long been needed, and it finally matches up with how much I like the service.

For me, I read a variety of RSS feeds. Using Google Reader and Firefox, I can use their browser plugin to quickly bookmark items to either share with others or come back to later. This method might not work for everyone, but it works very well for me. Bouncing between computers at home or work, I can tag something that I find interesting.

Mostly it’s the design that has taken a little time to get used to before I could really decide what I thought. Visually, it works better than it previously did. Sure, it looks prettier, but you can make anything look good and not have function. Delicious seemed to step up to this notion of the K.I.S.S. principle that I’m a big fan of.

If you would like to see the things I tag, feel free to check out my Delicious page.

I designed a WordPress site for my friend Andy at No Boundaries.org some months ago, and the final version that we settled on really pushed my personal boundaries of knowledge in terms of PHP and CSS to get some of the things to work that he was wishing for. Never wanting to let a good friend down, I got something to work that came up tonight at WordCamp Fraser Valley.

I’m not sure what the original question was, but my design for No Boundaries had custom drop down menus added to the header so that Andy could easily add and remove pages from where ever he was in the world and have them show up in those menus.

And to be honest, I can’t really tell you how I got it all to work because it was that long ago. However, Stu Nicholls made a great blog post about how to do this with simple CSS. I used this post to hack together my concept for Andy’s site, and the final design turned out to be what he wanted.

Now doing a quick Google search to find this resource again, I came across this WordPress plugin, Wordpress CSS Drop-down Menu, that could do this for you without getting into all the code. I have no experience using it, but the author makes reference to the same blog post that I just did, so it might be worth checking out first before you get into the code.

Rebecca recently made a post about using the AddQuickTags plugin for WordPress to display captions on photos in her blog posts, I would elaborate on the CSS styling it takes to get this. The WordPress plugin makes this easier, but I thought it would be useful to share how you can do this with some simple CSS, especially if you don’t have WordPress at your disposal.

First, how do you get this…

Photo credit: duane storey on Flickr

to work?

To start with, you need your image and then link it to its origin or creator to attribute credit to. This is just good practice and makes the original author happy. We’ll have to peak at some quick HTML to get a sense of what’s going on here because we don’t like using visual editors. Code might be tough to work with for some, but it’s second nature to us.

<a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a>

Your HTML might look different, but the premise should be the same. It’s a linked image, but how do you get the “Photo by:” tag underneath the image? Let’s start by adding some code to your CSS.

.captioncentered {
display: block;
text-align: center; /*centers text & image*/
margin: 10px auto; /*centers the whole div*/
padding-bottom: 1px; /*this depends of your design*/
font-size: 0.85em;
color: #ccc;
}

This will make like somewhat simple for you in the long run because this will set the design of your blog to work for all posts you use this styling for. So now what do you do with it?

You just setup a “class” to use in the “div” tag. It works like this.

<div class="captioncentered"><a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a></div>

That centers the image, so now you need to add a little more HTML to this in order to get the credit where it deserves to be. This just requires some text and then linking the words you want linked. However, this extra text must be inside the div tags in order for this to work!

<div class="captioncentered"><a href="http://website.com"><img src="http://photosharingsite.com/photo/image.jpg" /></a>
<br />Photo by: <a href="http://website.com" />author</a> on PhotoSharingSite.com</div>

Once you have this, you are able to to display an image, such as a photo from Flickr, with proper attribution. Why? Because it’s the right thing to do, not to mention a legal way to not get yourself into trouble with the original author for taking their content.

The next thing you can do is edit your CSS to make some adjustment to the look of your text or perhaps the background. It really comes down to what you want to do. There might be a better way to do this, but this is how we get this function to work.

ElizabethBollwitt.com is a site that I recently designed and launched for my sister and her artistic endeavors as a painter. The site is a few months old, and it’s another site that I’ve been meaning to write about. Every time I attempt to, I found a flaw in the site and wanted to wait until I fixed it.

My sister had a site for a while before I offered my services in terms of design, and I also consulted her on how blogging can help boost her efforts in getting her works, if not name, recognized a little more on the internet. The previous site was built purely on HTML with a 4D WebServer working in the background. Getting into the guts of what that programming can do is powerful, but based on what I’ve learned about WordPress and PHP over the past few years, a switch just seemed to make sense.

The one thing that is difficult about the site is the speed in which it loads. I’m unsure if the site I built has something to do with it, and the server that it resides on is of my doing as well. It’s an Apache server that I configured from the ground up, so there is a chance that I might have setup something wrong in the process. Never doing such things before, it was a tough time getting all the ins and outs of Unix sorted out, but I learned a lot. The connection to the server isn’t the fastest, and it shows when you go to load the site.

The design was intended to be simple but based off the previous design to the site. Being the artist, I let Beth pick out more of those elements while I focused on the function of the site. We are currently using the WP e-Commerce plugin to run the store, and for what it does, it’s a fairly effective element to the site.

The overall goal to the site is to provide a better platform for Beth to display her works online. The purchasing is one thing, but she also does a variety of art shows as well as growing opportunities to display her original paintings in galleries on the east coast of the U.S. With the addition of a blog, visitors to her site can follow along as she creates new works as well as get information about upcoming events where her works can be seen and purchased.

There has already been some small successes in the site in terms of sales and exposure. As with anything you do on the internet, success comes over time, and we’re hoping for the best in 2008.

NoBoundaries.org isn’t a new site, nor is this relaunch of this design that new because it was unveiled about a month or so ago. I haven’t gotten around to posting anything about it because I got it put into the public realm while switching to a new day job, so it’s been a hectic last few months in my life.

Speaking of, getting this WordPress design put together was quite the task. NoBoundaries.org is a travelogue by my friend, Andy Stoll. He put his money where his month was and set out on an around the world trip, the intention of seeing as much of it as he can. While in the first legs of the adventure, he contacted me about helping him out with his site. That turned into a redesign, so while in China, we coordinated strictly through email to exchange ideas and critiques as the process went along.

The site is probably not as finished as I might like it to be, but it can get pretty difficult to get the details sorted out when Andy is emailing you from Kazakhstan, when he is able to find some bandwidth to check his email. You also don’t want to make changes that he isn’t overly sure about or informed of, not to mention doing something that will take a lot of explanation through email. Remember, Andy is traveling as I write this, and the last thing I want him to be doing is thinking heavily about his website when he should be cranking out blog posts and videos of his travels.

The one, overall goal of the design was to make it not look like a typical blog. Andy had a lot of great ideas, and I did my best to structure it in the way that he envisioned. Sometimes that is easier said than done, but we came to a common conclusion that what we had was good to go before he ended an extended stay in China. If we had more time, especially before he left on his trip, we might have thought out the site in more detail.

As a side note, I might have pushed a Drupal design for the site if this project would have occurred before his departure from the U.S., but Andy already had a WordPress site established. He wasn’t satisfied with what he had at the time he contacted me, looking to overhaul the theme to his site. Switching him to Drupal would have taken too much to teach when someone is busy trying to travel the world.

If you’d like to see an example of some of the things Andy has been doing on his travels, check out the video below of, “What It’s Like: To Walk Through A House In A Fishing Village In China“.

I’ve built a Drupal site for a church that contacted me some time ago about building them a website. The goal, originally, was to make something that would help Knox Church to not only publicize events at the church and provide information about it, but staff wanted a way to easily interact with the site. This meant updating it and getting some sort of events calendar on the site.

The initial creation of the site was in WordPress. I did a lot to separate the site into categories that would manipulate how the page was displayed to those who surfed into the site. The only problem was the training that took place to bring the staff up to speed on how the site operates. WordPress is intuitive, but the average, intermediate to beginner user might have a difficult time grasping the technology. The various plugins I found and used for listing events were effective, but there was a lot more to be desired from what was available at that time.

Since building the first site, I’ve been doing more and more development with Drupal, and the potential has really hit me in the past few months. I have to give a lot of credit to some conversations that I’ve had with Boris Mann about a couple of projects, including this one, that I’ve been working on. Being a guy on the forefront of Drupal development on a global scale, he has really helped to give me ideas on the possible things I can do. Getting from point A to about point G or P takes a little work some times, but when you reach Z, it’s like a lightning bolt hitting you in the face. In other words, yes, Drupal has elements in it that makes changing the world quite possible.

Well, in this case, it’s going to make it easier for Knox Church staff to interact with the site, not to mention an actual events calendar, which is incredibly cool. There is even iCal integration and a slew of other things that I can do that I don’t know about or how to do, but it’s all possible. It’s just a matter of having the time to sort it out.

What I do know is starting to not only make a lot of sense, but it’s going to streamline interaction for those on the site. As events come up, they can be added from any computer from anywhere and at anytime. As information changes, it can be edited and kept up to date on the website. That goes a long way when you make a typo on the church bulletin that forces everyone to show up at the wrong place and/or the wrong time, not to mention an easy way to post cancellations of events.

There is still a learning process to undertake with the staff. You can build all you want and have lots of cool things, but it’s the content that’s key. This is the next step, and the excitement is starting from those who know about the impending transition to a new content management system.