Fluid Grids

One of the first things that has to be addressed when designing a site is the layout. Historically, because of the limitations in browsers, most sites have been built in some variation of what I’m calling “poster format”. One width, variable height, and you have the following problems:

  • On large monitors, content appears tiny and hard to read, and you always come away feeling like there was a lot of wasted space on the screen.
  • On small monitors (or if you have a site snapped to the side of your screen) the content doesn’t scale down, and your left with scrolling back and fourth to be able to read everything.

Over the years one of the principle solution to address this, if someone addressed it at all, was just to never center your content and just let it fill your entire screen. Although this almost works for lots of content, it’s difficult to read as paragraphs will stretch across the screen and you constantly lose your place as your eyes try to find the beginning of the next line. The other problem that arises is that if your designer has a large screen, theres a tendency to continue to add content to ‘fill in’ the space so the main content area isn’t as large. All in all, the only solutions were hacks on a broken system.

With the mobile smart phone market exploding over the last several years, and the browser wars providing an exponential increase in speed and standards complacence, we have a unique opportunity to re-evaluate how we build our sites. A beautiful example of this is this site:

http://goldengridsystem.com

No matter what browser you visit it on, or what size your browser is at, the content will be sized appropriately, the typography is readable, and everything will feel right. No insane urges to re-size your browser window.

This, to a limited degree, is how I want the Comatose Theme to look and behave. Fluid layouts are hard, and getting everything to work correctly while still maintaining a standard html5 layout hierarchy is going to be tricky.

Here’s a link to the demo: http://www.paulrohde.com/demo/html/layout-demo.html

And a video of the layout in action:

Since I currently don’t have access to a scanner, I will be scanning in and posting up images of the layout brainstormings with commentary soon.

Until next time.

Blogging: Comatose

After many revisions, starts, restarts, remakes, redesigns, tweaks, updates and misc changes to this site, I’ve finally decided to take and overhaul this entire site starting with the theme. I’ve had a daunting Todo list that grows every time I look at my site. The web has changed drastically. The browsers we use each day have improved exponentially and hardly resemble the ones we used a few short years ago. Sites have to be designed for media from a small screen to a huge widescreen monitor. Content is more dynamic. Layout is becoming organic.

I’ve decided to rebuild this site, starting with the theme. But just rebuilding it isn’t enough. I’m going to open source the theme on GitHub, as well as blog the development and decision making process that has (and is) driving the design and development of this theme.

Web, meet Comatose. Comatose, meet web.

Thoughts on Amazon S3 with WordPress

Recently, I’ve been looking for a way to reduce my bandwidth and storage bill for this site. I’m currently hosted through a company called Nearly Free Speech which is a fantastic hosting company for small static or PHP / MySql based sites, and it’s been great to have a hosting provider that I’ve literally never had to worry about. However, given that I regularly upload and distribute a large amount of media around this site I tend to eat through storage and bandwidth pretty quickly, especially now that my site has been around for about 4 – 5 years. As a super cheep hosting provider for small sites, NFS if fantastic for those small start up sites, but prices do increase quite a bit as the site grows. A few months ago I signed up for Amazon S3 (Simple Storage Solution or S3), which is a simple, flat, ‘blob’ storage system. Amazon itself originally built this system to power the media distribution for its own site, and then opened it up for others to use as well.

The basic concept is quite simple, instead of worrying about complex structures or directories the core service simply assigns a file a huge unique number and a title to the blob of data your uploading. It doesn’t matter what the data is, it could be anything from an image, to a zip file, to an 3GB text document. It doesn’t matter. It’s then possible to distribute that blob around the world so that the data is physically closer to whoever is requesting it. Because it doesn’t matter, most of the programs that use it choose to use the title as a path, which means that it uses the “/” character, making the file appears to be in a directory. In essence, Amazon S3 is a simple flat file server with a simple HTTP layer on top of the storage system for easy access to these objects in web applications. Assuming you’ve allowed public access to the particular file you can request it by performing a get request on your account followed by the title of the file.

However, the biggest original draw was the incredibly cheap storage and bandwidth costs, NearlyFreeSpeech weighs in at around $1.00 / GB down to $0.20 / GB based on the total bandwidth over the life of the account and storage is at $0.01 / MB per month ($10.24 / GB per month). Now, for a super small site, it’s a non-issue and you can’t beat the low end tier for pricing and ease of setup (You can see the full pricing here on the Nearly Free Speech pricing page). Now, consider Amazon’s S3: $0.150 / GB for storage (Until your storing more than 50TB of stuff, when it goes down a cent per GB), and $0.150 / GB of bandwidth. (You can see the full pricing tiers at the amazon web services simple storage page.).

Now, my current bandwidth for the site is about 1.5GB a month and my storage is about 400mb at the moment, for all intents and purposes its not a huge site, but enough that I wanted to see if there was a way I could take down the pricing. I’ve tried several things in the past such as offloading my photos to Flickr (Which I don’t like because it gets blocked occasionally) or SmugMug (Which doesn’t have a good plug-in for inserting photos into a wordpress site, but interestingly they also uses Amazon S3 to host their content). After tinkering around with it for a few months and using it as a host for large downloads, I went looking for and found a plug-in that replaces the core upload / media storage and retrieval functionality with calls to S3, and now that I’ve pushed my uploads folder to be hosted through S3 plus a quick switch in the blog settings and everything is now pulling from Amazon S3. Much cleaner, much nicer, a much less out of my pocket each month.

Sweet!

- Paul Rohde

Service Integration and Mashups

As we move forward in our world of technological inspiration and development I’ve seen the explosion of not only social networks, but of internet services, open source software, and powerful content sharing and distribution mechanisms. Services like Flickr, Facebook, Twitter, Smug Mug and the Suite of Free Google Services and so on are growing at a mind boggling rate. I still remember sitting in a cubicle about two years ago in the Winona State University tech department at my first job trying to design websites to be fast and optimizing each image and layout to be as small as possible so that they would download quickly on a modem. I remember how small my view of the vast amount information and the petty prejudices I would have against various ones, not seeing ahead to the measures that would be taken to distribute and organize that information. I believe the information age is no more and that the information itself has become expected and transparent but the networking and organization of that information has and will continue to surpass it as the primary commodity in the world today. As I’ve moved out of my little world, gone to college Utah, and am now five weeks away from graduation I’ve seen Google go from a small beta company to the biggest and most well known company on the planet, I’ve seen Facebook go from a little personal networking site to one of THE leading social network today in the US (Not sure how the foreign market for social networks is going).

What does it all mean?

I spent most of today re-evaluating MANY of my online priorities and ways of doing things. These last two months has seen me extensively pick up my networking and social skills and apply them in ways I never have before. I’ve spent more time updating, writing, and networking than I ever have in the past, the simple fact that you’ve been seeing blog posts here that are over 200 words on a regular basis is something that I’ve never done before. I’ve moved into the world of Twitter, a micro-blogging and status service and took the leap of getting a pro account at Flickr so that I could integrate large versions of the photos here on this site.

But why?

As you look at the conglomeration of things I’ve mashed together, there are several things that I’ve begun to be able to do. The problem is that I have hundreds of people spread over an entire spectrum of networks, locations, and mediums. I have a friends on Flickr, different friends that watch my blog feed, personal friends on Facebook, random followers on Twitter. The trend that I have begun to noticed is the integration of one service with another. With a twitter update I also update my status on Facebook and my blog, with a new post on my blog a new note gets automatically written on Facebook and anyone who watches my feed also gets updated. A new image on Flickr now shows up in my Facebook story feed and is now accessible for me to use on my blog with a link to the Flickr photo for comments and discussion. Not only do I now have all these services at my finger tips, but common users have created links between these applications with whole markets sprouting up around these links because of the efforts of the developers to create easy to use interfaces allowing others to link the services.

I’ve spent the last few days experimenting and working out the kinks in many of these network linkages. About a month ago my twitter account became linked to my Facebook status, about that same time the RSS importer for Facebook allowed me to import my blog posts as notes in Facebook, even pulling thumbnails of the images that are in the posts in. About two weeks ago when I went live with a new design to this site I added my twitter status to the top of my blog. Today I went through, tested out and have begun using even more service links, I redirected all my RSS feeds to FeedBurner for tracking and analytics, I added an application to Facebook to show any new photos in Flickr on my Facebook story feed, I even added a plugin for WordPress (The blogging engine this site runs on) that allows me to now insert photos directly from Flickr into my blog, because the photos are displayed full size by default on my blog they now will link directly to the Flickr photo page allowing for much more commenting and discussion on the images outside of the scope of this blog. Something else I may do is add a Flickr album importer into Facebook so that I will no longer have to upload photos to both Flickr and Facebook simultaneously.

The point is, this environment is changing at a rapidly and exponentially increasing rate, as I’ve grown in my networking savvy I have no longer been turning to the network with the most people or services, but I rather look to see what best allows me to integrate these services with each other and access them simultaneously. I don’t have time to go and browse each location, or to update every place separately. This mix and mash of services is allowing to do one thing once, across multiple platforms simultaneously and update everyone quickly and without hassle. Personally, it’s cool when you realize the sheer scale of things, almost to the point of being scary as to how efficient I can mash up an entire system of services together in a way that suits exactly what I need to do and that allows me to reach hundreds of people, each in their own preferred medium.

With that being said, good luck to you all in your social-network-service-mashup-mix-and-match endeavors and I look forward to hearing the thoughts of others on this.

– Paul Rohde

Overhall

Hey you all,

Sometime soon I’m going to be doing an overhaul of the site (Upgrading wordpress, updating plug ins, changing the layout, etc…), so it’ll probably go down, and it may look completely different when I bring it back online again, who knows? I havn’t decided yet.

So if my site is down sometime in the near future (probably this weekend) I’m most likely doing my site overhall.

Lata,

Paul Rohde