Ryan Kinal
100 E. St. Clair St.
Warren, PA 16365
716.581.1000
ryan.kinal@gmail.com
Ryan Kinal is a programmer and web developer, specializing in JavaScript, HTML, and CSS,
with experience in PHP, SQL, ASP.NET, and graphic design. But beyond being technologically inclined, he is also artistically motivated, through music, lindy hop, and drawing in various media. Combining these interests and talents, he is a skilled developer with an eye for aesthetic design.
Elastic Designs
Monday, September 7th 3:04 pm
On Saturday, while working from one of my favorite cafés, I created a fourth design for R.K. Hite & Co. Apparently my previous designs had not been exactly what they wanted, and though I thought they were pretty awesome designs, I can respect that. I took the requirements they had slowly been giving me, over the course of the four designs, and created a new one.
Now, the previous three designs had been fairly rigid. The elements lent themselves to a more fixed-width design, at least in my mind. There were large, central images, or images that spanned the width of the content. Not so with this most recent design.
Version 4.0 has elements that span the width, but are repeated elements, rather than fixed-width ones. Things that have a background with repeat-x. The only large, non-repeated images take up no more than one quarter of the width of the design, and most importantly, are actually covered up by other parts of the design. Let me show you a screencap.
Do you see what I mean? The large, curved left hand image is actually two images: The photo of the pipeline being installed (as a background), and a curved PNG aligned to the right and bumped against the content area. This allows me, first, to use any image they give me with any page I create with this design, and second, the background photo can simply be further covered by the foreground PNG to allow for an elastic design. All the other elements are either the logo, have repeat-x backgrounds, or are text. The logo will stay where it is, but everything else can be squished, so this is a perfect candidate to become and elastic design.
For those of you who don't know, an elastic design is created using percentages to describe the width of elements, rather than fixed pixel widths. These percentages are relative to the element's parent, which in the case of top-level children of the body tag, is the browser window, so if said user changes the size of said window, your page changes with it. Without any information gathering, or even testing, your site looks great at every resolution.
Well, every reasonable resolution. There are points at which this particular elastic design, as well as most elastic designs, breaks down. If the browser is not wide enough to show the logo, then the design is going to look rather ugly. If the browser is not wide enough to show the curvy PNG as well as the navigation, there will be some line breaks. So, it's not perfect, but it works for anything that I'd consider reasonable.
Not every design can be made elastic. Some things don't hold up. For instance, my second design from last week wouldn't work at all as an elastic design. But if you pay attention to your elements, and have elasticity in mind, it's really not that hard to achieve.
Bonus: The Café Effect
I feel like tend to work better while at a café. At least, as long as I've gone there with work in mind. I often feel more focused and more productive, and I've been pondering as to why that is.
My guess is that, while working from home is great, it doesn't give you any time to prepare for working. Those of you who drive in to the office have that commute that focuses you on the upcoming task, which is of course, to get something done. The entire purpose of the walk, drive, or ride is to get you to the place you need to be in order to accomplish this, and I think it's both a location thing and a mindset thing.
So, when I go in to a café to work, I get the same thing. I physically move to a place where I can do work, and I'm mentally prepared for it. To compensate while working at home, I think a preparation routine may help. If I can find some activity or set of activities that will allow me to focus on my work, I may be more productive when working from my couch or desk.