CSS Layout | Always Learning

November 21st, 2008 by Bobby Whitman

At dynamIt we dropped HTML tables as a layout device long ago. It has been all CSS ever since. CSS for layout is really the way to go. It’s light, it’s flexible, it separates design from content making your site extensible.

I’ve written markup (XHTML/CSS) for dozens of sites now. And, as we build more and more sites my CSS style continues to evolve, or mature, if you will. But, CSS is a interesting topic, no matter how routine you think it is, there are always new tricks to discover.

I recently found a new one that I am pretty excited about. Certain elements have a block display meaning they appear with a line break before and after them (that is to say on a page they stack vertically one on top of another). Meanwhile, other elements display inline, meaning they appear within a line much like single letters within a sentence. Inline elements are great because they can appear next to each other and wrap to the next line, but they have certain drawbacks. For example, you cannot set a definite width or height for inline elements, nor can you give them margins.

But, I came across a different type of display. It is called inline-block. Just as you can imagine, it is the best of both worlds. Items will display as inline elements, but certain block properties are available to them. I jumped on to Google to learn more and found a very nice article on the topic at SitePoint.

I quickly noticed that there are two things (one good, one bad) that this article does not address.

First, the bad news, it is rather broken in Mozilla FireFox 2.x. If you have text in the -moz-inline-box <div> that is longer than the width of the <div> (something that is, by the way, a very common occurrence), it fails to wrap and spills outside the box. Luckily, the solution is quite simple. Just add a <div> with display: block and same width on the inside. The block-level div forces the text to wrap properly.

Second, the vertical-align CSS property actually works! Give the series of <div>’s set to inline-block a vertical alignment and they actually behave as you’d expect.

For all of you developers out these that think this sounds interesting, check out this quick example:


<style type="text/css">
.holder {
text-align: center;
width: 500px;
border: 2px solid #1C659C;
}
.category {
display: -moz-inline-box;
display: inline-block;
width: 90px;
margin: 5px;
border: 1px dotted #666666;
vertical-align: middle;
}
.category div {
width: 90px;
}
</style>
<!--[if lte IE 7]>
<style type=”text/css”>
.category {
display: inline;
}
</style>
<![endif]–>


<div class="holder">
<div class="category"><div>The quick brown fox</div></div>
<div class="category"><div>jumps over</div></div>
<div class="category"><div>the lazy dog</div></div>
</div>

This should produce the following output:

Typography Is Sexy!

October 28th, 2008 by Phil Franks

Now that dynamIt has moved to the Arena District we are surrounded by great food, entertainment, and of course design! Our office is coming together nicely, we are just missing the odds and ends, but we needed some nice black and white photos to hang on the walls. So, Steve and I took it to the brick streets and alleys with a camera to find some artistic shots to fill the frames. We stumbled upon numerous examples of found typography on our hour and a half excursion, and quickly realized that the area was a photographer’s dream. I also realized that we often overlook some great examples of typography as we go about our daily lives. Those subtle examples, like bumper stickers and posters, as well as dramatic ones, such as signs and graffiti. There is good design all around us conveying messages, holding meaning, and telling us where to park. So I wanted to showcase some of the great examples that we found right here in the Arena District. I’m sure that I overlooked some, and I’m positive that I could max out our Flickr account if I walked through downtown Columbus (that post in the future!). Below are a few quick crops of the typography in action, but you can browse the dynamIt Flickr account and see full size versions of these as well as other shots!

Found Typography

I want to be your rockstar.

October 20th, 2008 by Bobby Whitman

Note: I first posted this story on my personal blog about one month ago. I have since gone back and read it a few more times and decided that I want to share it with the dynamIt community as well. I believe that I did a fairly good job articulating my attitude toward projects and life in general. To give you a quick update, I still continue to put in hours on this project, hours that I do not have. But we’re close and I’ve certainly learned a thing or two about choosing projects wisely. I am curious though, how are such situations avoided? Is it simply analyzing the project before we take off running? I also wonder, did my ego get in the way? Were my eyes bigger than my mouth, so to speak? I am not sure, but I will note that my hour estimate for the original scope of work was actually very accurate. What do you think?

At dynamIt we partner with many marketing firms and ad agencies. Often these firms call upon us to hit insane deadlines. Such is the industry, or so it seems.

Many shy away from these projects, I imagine, turned off by the added stress of a near impossible task. But not me. I want…no, I crave these challenges. My mindset is simple: throw me your best curve ball, I’m going to knock it out the park.

I’ve spent all this week on such a charge: 2 sites, each with a unique design that needs markup, each with 30 pages of static HTML content to write, each with an e-commerce module to integrate, each with about 30 products to load into the store, due Sept 21.

Ok, two steps back, let’s rearrange my schedule, let’s create an action plan in my head, take a deep breath, dive in. All the while, I remain focused on my goal: write good, clean, functional code, rock it out a day early, hence save the day for this firm. This is what I want to do, I want to take what I am given and deliver, but not just slap something together, do it right.

So, imagine the frustration when the following goes down.

It’s Monday, I have the xhtml/css all written for both designs, I look at the provided sitemaps and realize there is no navigation to over half of these pages, 80% of the content is missing, and their dev server with the e-commerce module installed is down.

It’s Tuesday, e-mails and phone calls fly around, nothing gets actioned, still missing content, still no access to the dev server, a whole days is stolen from me.

It’s Wednesday, the firm and myself both starting pushing the client, more direction is given for a navigation, I design it, not what the client wants, I redesign it, it passes. We start to get more content and as end of day rolls around we finally have access to the dev server.

It’s Thursday, content is still being delivered at noon, finally I can start building templates for the e-commerce module. We discover that there are not a just 60 pages of HTML content to be written for these sites, rather the total is closer to 160.

It’s Friday, we begin to load products into the database only to discover we are missing half of the product descriptions. Yes, this is the last business day we have to work on it, and the client has still not provided all of the data on their products.

How do I deal with this? I am very good at what I do, I am incredibly efficient, I am well organized, and I pay a fair amount of attention to detail. Moreover, I am pushing, pushing hard, giving a sincere effort. I want to be your rockstar. I want to roll this out for you a day early needing little to no tweaking and stand back and act like it was a piece of cake. I want to, I really do, but how can I possibly make it happen in this situation? I feel like I’ve been asked to complete a jigsaw puzzle that is missing half of its pieces.

Still frustrated.

With the first pick in the draft, dynamIt selects Michael Paull

October 15th, 2008 by Bobby Whitman

After much deliberation in the dynamIt War Room, we decided who would be the next member of the team. We submitted our pick and stood calmly as the commissioner strode toward the podium, “With the first pick in the draft, dynamIt selects Michael Paull, Web Developer, The Ohio State University.” Flash bulbs twinkled from every direction and the crowd let out a triumphant roar as Michael quietly accepted their applause…

Ok, so that is not exactly how it happened. At any rate, I would like to introduce you to the newest member of the dynamIt team, Michael Paull.

Michael recently received his degree in Journalism from The Ohio State University, which means he brings yet another interesting perspective to the table. But his knowledge and experience do not stop there. He is, of course, well versed in web having worked as a both a web developer and project manager. He specializes in web standards compliant design and coding for accessibility, adaptability and backwards/forwards compatibility, so yeah, his code validates. He is no doubt very detailed oriented, he does hold a green belt in Six Sigma. All around, Michael is very resourceful and a welcome addition to the team. Plus, we certainly approve of his hobby of brewing his own beer. He shared an excellent batch with us last week. Learn more about Michael by visiting his blog at http://www.michaelpaull.com. Also, follow him on twitter: @fricto.

So, what do we look for when it comes time to up our development capacity?

Well, we look for developers who write graceful xhtml and css that works across the gamut of browsers, are well versed in PHP and mySQL, are comfortable setting up a relational database. We want our people to be efficient, spend their hours wisely, be self-managing. We expect a developer to be friendly and approachable, to be able to sit down in front of a client and confidently explain what we do.

Sure, those are the obvious ones, but one thing that we’ve learned even in the short time of having employees, is that there is more to it. What really counts, what really sets someone apart can be summed up as follows:

A dynamIt team member must be one who:

  • is passionate about web, lives in web and enjoys doing so,
  • has both the willingness and the ability to learn,
  • fits into our culture well.

Luckily for us, Michael seems to have all of these things covered. But, we are always looking for new talent, we have filled our current needs with Michael, but we do not plan on slowing down anytime soon. So, if you think you can handle what I’ve laid out above, get in touch. We’d love to see what you’ve got.

Social Media Dress Code

October 3rd, 2008 by Nick Seguin

Is there a Social Media Dress Code? Should there be? Is it situational? Does it matter? Should it?

I say no. If I’m heading down to a big law firm, a big company or walking into a half-century-old PR firm who buttons up, ya, I pull on the suit and rope on the tie. While I do dress according to my day, I can’t wait to stop. I understand that traditional business is suited up, dressed to the 9s and perhaps a bit more conservative and structured. However, Social Media is about channels of connection, it’s about brand championing, it’s about reaction-engagement-participation. Social Media is about common language communication and time and space shift*.

I contend that dressing Social Media in a suit actually inhibits it. Think about it like this - are you more apt to give a real answer in a focus group observation room with 1 way mirrors and a camera or in a cafe, at your home or somewhere you feel comfortable? Is your conversation and thought process more natural when you’ve ironed your shirt and lint-brushed your trousers or when you’ve pulled on the sweats and are sitting in a more ergonomic chair not worrying about wrinkles and dog hair? The point is, for Social Media to be effective [read: gain valuable insight, true connection, trust and reliance] it needs to be second nature, unobtrusive and comfortable.

To that end, were I heading a large company/department looking to at least explore and hopefully implement a Social Media campaign, I would actually feel more comfortable talking with someone “dressed down”. 1. Social Media is trendy - I expect domain experts and thought leaders to reflect this 2. Successful Social Media implementation is not a toe in the water, it is commitment. As described above, someone consulting on this and coaching my people toward a positive result and experience should fully embrace the realm and “personality”. I’m pretty sure clients/customers would rather be talking to someone “like them” horizontally than a suit from above. As Cone points out, 93% of Americans expect companies to have a Social Media presence. 93% of Americans (all of us consumers of something and clients of someone) do not wear suits.

Again to the time and space shift* - Social Media pieces aren’t used in a conference room or in a board meeting (well, some are getting tweeted out!) but on breaks, on the run, on the road, after hours. Social Media is used/produced around life. If that life happens to be a business professional meeting, then by all means rock the double-breasted. However, just because you’re used to seeing a suit doesn’t mean that your clients and customers want to talk to you in it = your SM campaign doesn’t need to wear one = the thought leaders, domain experts consultants and participants in the field probably won’t be wearing them… at least not all the time.

*(time and space shift is Dave Berkus language)

What do you think? Should big corporate get used to seeing backwards hats, jeans and sneaks when they’re learning about the world of Social Media and how it can and will connect them more intimately with their clients, industry and (the way things are heading) the world?

one.

nick @NickSeguin

dynamIt launches SAP web interface

September 24th, 2008 by Bobby Whitman

SAP, one of the world’s largest vendors of business software, is the real deal. Since 1972 the Germany-based company has been developing software suites to run every as aspect of even the world’s largest companies. Big or small, SAP has a solution for you. A few months ago dynamIt was approached by a local company who was in process of implementing SAP Business One, the SAP build for the small to medium sized company. Now, SAP is a major player in the software industry today, so of course they have a nice suite of web software to go alongside their products.

But what do you do for your web interface when your business is so unique that you had to have a custom SAP module built?

Answer: call dynamIt.

The Junior Library Guild is a collection development service for public and private libraries all over the country. JLG prides themselves on picking the very best books every year. In fact, the majority of their books later go on to receive various awards such as the Caldecott Medal.

They sell their books in subscriptions much like a book-of-the-month club, but their ordering options are so unique that after implementing SAP in their business they needed a custom module written. Thus, providing them with a e-commerce solution proved to be a rather difficult task.

Enter dynamIt. The folks at JLG recognized that although they were top notch at providing books for libraries, they may not be everyone’s first choice to manage a web project of scale. So, dynamIt was first contracted to spend time on-site learning their business and consulting with their marketing staff to decide what was important in a web system.

After countless hours in the office and in the book warehouse, information architecture was presented and that would guide the rest of the development of the site.

Then came the tricky part. How do we hook up our web application with the massive SAP database? Well, before this we had never worked with SAP, so we thought we’d turn to the vendor that implemented SAP for JLG. No luck.

So, the technical side of dynamIt–Matt, Gordon, and myself–set to some critical thinking and came up with the following plan. There would be three servers, the SAP Production server, the web server, and an intermediary server that lets the two communicate. Some delicate programming to keep everything in sync and we were up and running.

Now, I should note that integrating with SAP was IN NO WAY as easy as I have just made it seem. In fact it was quite difficult, there were several road blocks, bumps, bugs and even a few dead ends along the way. But that is ok, the collective attitude at dynamIt is all about solving every puzzle as tough as it may be.