There’s something that’s hard for some of us web designers to just flat out admit: we stubbornly hate to code. I’m a designer, dammit. I live and breathe Creative Suite. Give me Photoshop or give me death. My former coding knowledge included two things: what a div is, and how to stylize my MySpace page (circa 2004).
And without even realizing it, my attitude has changed, seemingly overnight.
Within the past month, I have learned to build responsive, HTML wireframes using Foundation and Compass. The initial setup was enough to make me want to run away and join the circus. With the added confusion at first, it seemed like everything broke if I merely looked at my code the wrong way. But, with patience, coaching, and helpful documentation, it soon clicked—and with only a few tears shed along the way.
Some agencies adhere to the mantra “you get the clients you deserve.” If that’s the case, clients also get the results they deserve—especially when they hire based on spec. This past year, I watched two projects implode after they landed with other agencies who provided spec work in the sales process. I’m not typically a sore loser, but if you hire a partner based off of spec work, you’re digging your own grave.
Deploying a website to a web server is hard. Not “It’ll take some extra time” hard or “We’ll need some help” hard. It’s “Get a whiteboard and plan out the thing A Beautiful Mind-style” hard. It’s easy to look at your code, look at your server, and just drag/drop files to production. It’s a lot more difficult to set up an automated system that will do that for you.
At Happy Cog, we work in a variety of technical situations, and our deployment strategies must be extensible enough to suit each and every need. We deploy to Windows servers and to *nix servers. In some situations, we deploy code as well as content. We deploy PHP websites on some servers and Ruby web workers on others.
Successful design systems stand on the shoulders of sound grids. Grids form the groundwork for a uniform yet flexible suite of templates. Their layouts hold containers that fit together like pieces of a puzzle. Last week, Happy Cog, in partnership with Mijingo, released the 7th video in The Happy Cog Way series: “The Basics of Grids.” In it, MJ discusses using a nice little web app called Modular Grid Pattern, a grid generator that can export into a variety of design programs.
As the web evolves, there will always be two ever-growing lists: one of all the pieces of content that will need to appear on any given site over time and another with all the ways we can access that content. Creating flexible, modular design systems makes both of these lists a little less daunting and a lot more manageable.
At Happy Cog, we pride ourselves on empowering clients to take ownership of their content, and we provide a framework and all the building blocks to help them do so. These building blocks range depending on a project’s needs. One could be a video carousel; another a contact form. But, the most fundamental building block that’s on every site and we have to get right every time is typography.
When we think of responsive design, we typically focus on newfangled mobile devices like smartphones and tablets. But, as front-end developers, we still need to account for older browsers that can’t handle the newest CSS3 techniques when rendering our sites. In the case of responsive design, that means our old friend Internet Explorer 8 (and below) needs some extra handholding when we build our sites with media queries. These browsers don’t support media queries, and since they are still in widespread enough use that we can’t ignore them (~10% of users are still using IE8), we have to come up with new techniques for gracefully degrading our sites.
When Dan Cederholm introduced us that spring afternoon at An Event Apart in 2010, I took one look at you and thought, “What a dreamboat.” I knew you were going to change my life. We took things pretty slow at first—I experimented with button and gradient generators while marveling at your features. “You mean, no more cutting gradient background images? And wait, I can just round those corners however I want?!” At the time, my exploration focused on replicating classic Photoshop effects. I had no idea that that was just a small part of what you could do. Since then, you’ve brought so much adventure into my life, creating effects that I could never dream up in Photoshop.
On August 6, 1991, I was five months old. Also, Sir Tim Berners-Lee published the first web page ever. It was made up of plain HTML—no CSS, no JavaScript, no third-party plugins. Since then, the web has been filled with rapid invention and innovation.
The web has fundamentally changed since the days of HTML 4.01. The number of people with an internet connection has skyrocketed; recent estimates say that nearly 40% of the world’s population is now online. Bandwidth has also increased dramatically. Even cell phone connections are many times faster and more reliable than those original dial-up connections. Today, browsers are everywhere—phones, tablets, game consoles, televisions, watches, and soon, weird-looking glasses.
After finishing journalism school, I worked for a series of terrific newspaper and radio companies. Barely two years into it, after flirting with the web, I quit.
Compared to the web, print and radio had limited reach and were clumsy to use. In print, we plugged content into a fixed canvas and delivered the same experience to every reader. The closest we got to flexibility was an evening edition or special insert. The web attracted me because it couldn’t have been more different. It challenged me to design and build something that can reach anyone on any web-browsing device—a cause worthy of committing my career to.
Making a website is more complicated than it used to be. We have to work around unanswerable questions, like at what dimensions the site will be viewed or how many pages it will have. As websites evolve and their list of variables and technical requirements grow, they become harder to define. Static wireframes and site maps can’t always capture this necessary level of detail without mountains of paper or endless annotations. Enter—stage left, waving like Miss America—the HTML prototype.
When Jeffrey Zeldman started our studio in 1999, he established an ethos of openness, sharing, and teaching. Since that time, Happy Cog practitioners have spoken at conferences, written articles, authored books, and published code for others in the industry to learn from our experiences—good and bad.
Earlier this year, Happy Cog partnered with my publishing business, Mijingo, in an effort to share the knowledge of Happy Cog’s many team members and to teach, enable, and empower professionals in what we practice every day.