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

What the Heck is RSS?

How many of you have had this experience: Someone has this cool website and they come up and ask you some variation of the question “Hey, have you subscribed to my RSS feed?” you then give them a resulting blank, ‘what are you talking about?’.

As common and prevalent as Feeds are these days on news and blog sites, I’m continually surprised at how few people know about them or use them to collect all their interweb news.  Granted, it’s one of those fairly new technologies that has only emerged in the last decade or so, but it’s one of those things that is SO extremely useful to myself that I have a hard time imagining what I would do without it.  So rather quickly I’m going to cover the basics of what an RSS ‘Feed’ is, how to use it, and why in a way that hopefully everyone that is fairly familiar with the internet and computers can understand.

An RSS ‘Feed’ itself is just part of a web page.  Think of it as a special page that’s somewhat hidden away that you don’t see, but keeps track of everything that happens on the site.  Many people simply call it a ‘feed’ because it essentially feeds information to hungry people like yourself, not sure where or when that term was coined, but its a common part of the lingo.

Now, here’s the cool part, many of the applications you already use everyday that connect to the internet have the ability to ‘subscribe’ to an RSS feed.  Subscribing is a fancy way of saying that your telling the program where the RSS feed is so that it can get the latest and greatest data off of it.  There are a lot of applications that do this, your mail clients such as Outlook, Apple Mail, Entourage, Thunderbird etc… all have the ability to ‘subscribe’ to an RSS feed and here’s the really cool part, every time someone adds some news to there site it appears in your inbox almost like an e-mail would appear within a few minutes of that piece of news being posted.  Now you can go and look at it and read it at your own convenience.  Your web browser may also have the ability to subscribe to Feeds as well, in Firefox they are called ‘Live Bookmarks’ which appear as a folder in your bookmarks and contain links to all the latest posts.  Whatever program you decide to use is your own personal preference, I personally use a service called Google Reader, but there are many to choose from.

But how do I subscribe to a feed?

Usually, you will want to subscribe to a feed as you’re looking at someones site, (take mine for instance), sometimes the site will have a button with a ‘Subscribe to our site!’ button that you can click on, others may have a smaller link somewhere (I have one at the bottom of my site that says ‘Entries Feed‘). In Firefox, clicking on one of these links brings up a selection box that lets you pick what you want to use to subscribe to the feed.  Some sites however, won’t even have a link even though the site may have an RSS Feed built in.  In these cases you’ll have to figure out how your browser works, but usually there will be a visual que somewhere that you can subscribe.  In firefox, if you can subscribe you’ll see a button that looks like this:

rss

Depending on the site, it will bring up a little menu, just click on one of them and you can then pick what you want to subscribe with and your good to go! It will take some playing around with and experimentation, but in the end, it’s something that is VERY useful for keeping tabs on a lot of different information.

I hope this helps some people understand what RSS feeds are and how they can be used, if you have questions or need help, feel free to leave a comment!

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