In 2011, the major league sports industry in America, comprising the National Football League, Major League Baseball, National Basketball Association, National Hockey League, and Major League Soccer, generated more than $26 billion in revenues. People love watching sporting events — in person or via broadcast channels. There’s just something about them that draws us in and makes us feel a part of their game.
Psychologists posit many reasons for our love affair with sports, from a sense of community to self-esteem issues. No matter the reason; we love to watch our heroes perform at levels we could never dream of attaining. And every once in a while, a rare and gifted athlete emerges who makes whatever he or she does seem effortless. Michael Jordan, arguably, the best to ever play in the NBA, was one such athlete. His impact on the viewership was literally measurable. After helping his Chicago Bulls win three consecutive championships in 1993, Jordan retired. The following season, ratings for the NBA dropped 5.5 percent. Then he returned to basketball in 1995. Within three years, television ratings had increased to a new all-time high.
Okay, by now you may be wondering what all this has to do with building websites. Be patient; I’m getting there.
Watching an athlete perform at the top of his game inspires and often encourages emulation. Many of the moves Jordan made famous were partially attributable to his six-foot, six-inch height and his God-given talent. But advantages such as those will carry a person only so far. Consider that Jordan rarely missed a free-throw (.8353 lifetime percentage) and made one out of every three attempts (.327 lifetime average) from beyond the arc. It is only when we attempt to emulate our sports heroes that we fully grasp the level of difficulty displayed when our heroes hit the playing field, basketball court, or golf course.
CHALLENGES OF MODERN WEBSITE DESIGN
To better understand what goes into making a modern website, we first need to step into the world of the website designer. This is a world in which change is the only constant. From ever-evolving browsers and standards to the cornucopia of devices we use to view the web, it has been nearly impossible to future-proof a website. In the past decade, designers have learned to cope with multiple browsers, screen resolutions, and form factors that range from mobile phones, to tablets, and touch-enabled monitors. The web world of today is as complex as it is varied.
Resolution and Size
For some time, most web designers have based their designs on pixel size or screen resolution. Put simply, this is the number of pixels a device can display on its monitor. But with the explosion of mobile devices on which a website can be viewed, there are a number of problems we may encounter if we design according to pixel size. Many form factors allow the user to rotate the device, changing the number of horizontal pixels -- often by a significant number. So while a site may look perfect in a landscaped orientation, the portrait version may cut off a portion of the design, or worse, shrink it to fit an adjusted size. Either way, the best case result is likely a poor user experience. But the worst case scenario is the strong possibility that visitor will be lost to a competitor.
One option has been to design device-specific versions of a site. This approach has been used liberally over the past few years in the design of mobile sites and is still a common practice today. User experiences are generally limited on sites designed for mobile devices where screen real estate is at a premium. So navigation on mobile sites is reduced to large, finger-friendly buttons while the number and size of images are typically reduced significantly. And because many mobile devices do not support plugins like Adobe Flash or Silverlight, features using these technologies in the desktop version of a website are likely to be eliminated completely in the mobile version.
As development standards have evolved, the ability to enhance the accessibility and usability of websites has
increased. And web designers now have more development tools at their disposal than ever before, allowing them to break out of the rigid, fixed-width framework of the past.
Steve Adams, Senior Web Developer at Bit-Wizards, has been working with responsive design extensively for over a year and tells me that, “Responsive design was as innovation born of necessity. With the growing number of devices, screen resolutions, and form-factor sizes, the development community took a step back and began to realize that the way were designing websites was really not conducive to supporting all the new devices.”
Without getting too geeky, it’s helpful to understand that Cascading Style Sheets (CSS), specifically the 3rd variation, along with HTML5 (Hyper Text Markup Language), make up the modern web design standards. These standards provide companies developing web browsers the basis upon which web pages are rendered. So, in theory, if a developer uses semantic code — meaning they follow these strict standards — their design should render the same across all modern browsers.
Steve continued saying that, “With the introduction of CSS3, a new feature called ‘media query’ was put into place that allows developers to change the way a site’s content is displayed based on different screen widths and resolutions. So now we can create designs that scale no matter if the user is viewing a site on a high-definition TV or a mobile phone — all of the content, the size of the text and images can expand or contract to fill the screen size. With a responsive design, the user isn’t stuck with a standard 960 pixel width website and if viewed on a smart phone, the user doesn’t have to pinch and zoom to find what they are looking for.”
Browser Support
In January 2003, roughly 85 percent of people surfing the web were using Internet Explorer (IE) to view websites. The remaining share was split between Mozilla, Netscape, and Opera. But most designers gave little attention to anything other than IE. Fast-forward a decade and designers have to accommodate five major browsers, including four different versions of Internet Explorer. However, IE now accounts for just 15 percent of browser usage. Firefox and Chrome are the most popular browsers today with a 75 percent share and both are generally speaking, standards-compliant. But that’s not the case for many older versions of browsers, referred to as “legacy” browsers. Often, web programmers will spend a considerable amount of time working on hacks and fixes to get a website to render properly on these older versions. And then there are a number of mobile browsers — each having their own nuances and idiosyncrasies that can drive a web developer to drink.
Todd Ladner, a web developer at Bit-Wizards expresses his discontent with the lack of standard compliance in web browsers pointing out that, “Every browser has its own quirks that we have to code for in order for a design to render the same. Mozilla (Firefox), Opera, Webkit (Chrome and Safari) and Internet Explorer (IE) — all of them have issues with rounded corners, icon fonts, or something. It seems like it is getting better with new versions of most browsers. Then there are the older versions, like IE7, that are just a pain because it doesn’t support any of the new CSS3 features.”
Older versions of web browsers are disappearing from use quicker than what has occurred in the past, but they remain a development headache. Todd’s frustration is apparent when discussing issues with older browsers, saying, “I would prefer to not worry about issues with say, IE7 or IE8. The content will still be there, it just won’t look as good. Remember, we’re talking about less than 2 percent of users who might view the site. It’s just not worth the expense. But some customers make it a requirement.”
Today, there are a host of new tools available to aid web developers in their attempt to appease the browser gods. From Litmus to BrowserStack, online testing services provide the ability for developers to check their code across multiple browsers, devices, and operating systems. But rapidly-changing technology keeps web designers forever on their toes as Todd points out that, “Apple’s new Retina display increases a screen’s resolution by increasing the number of pixels per inch, essentially doubling the resolution. While the new displays are a small portion of the web audience today, when other hardware manufacturers start selling their own version of Retina displays, it will present even more challenges for developers.”
Content Management Systems
Selecting a content management system (CMS) for a business website is an important decision that impacts many design and development decisions. Most web design firms are keenly aware of this. Moreover, it can take a considerable amount of time for developers to become fully acquainted with the architecture of any CMS and few specialize in all programming languages and server platforms, so most design firms have a preferred CMS. (Full disclosure: Bit-Wizards is a Kentico CMS Partner.)
Michael Whalen, Director of Web Development at Bit-Wizards, has been developing websites with Kentico for over three years. In Michael’s view, “Understanding how a CMS works — its capabilities and limitations — allows a designer to make informed decisions about things like navigation, what capabilities the CMS provide for content administrators, and how data from other lines of business might be integrated.”
Michael tells me that it’s like designing a house. “Anyone can draw a pretty house,” he says. But what matters is having the ability to understand the interior structure and if the design can actually be built. That’s where an architect’s education and experience make the difference. “Kentico’s CMS provides a flexible framework that works well with most any design, Michael adds. “The templates are built on pure HTML and CSS with web parts that don’t render out any HTML structure. You mold them to the structure using transformations — just taking data from the database and displaying it with the HTML structure you want it to be displayed in. It’s very flexible, not like a lot of open-source versions.”
Bottom line: Designing for a CMS that is familiar can shorten development time and reduce costs.
But today’s content management systems allow for more than just managing website content. The software platforms are automated lead generation systems allowing marketers to engage visitors in a deliberate manner. It’s what Thom Robbins, Chief Evangelist for Kentico CMS, calls the “customer journey.” In an interview at the Inbound Marketing Summit 2012 in Boston, Thom remarked, “In today’s world, your website is your pervasive engagement hub. It’s where you’re driving everyone, how you engage your customers across their journey, how did they get there, what do you want them to do when they’re there, and how are you going to drive them to that next step.”
Hosting and Content Delivery
With many enterprises conducting the majority of their business online, determining the proper infrastructure for a modern website has become more crucial than ever. In order to maintain the optimum user experience, your site should deliver dynamic content and Rich Internet Applications (RIAs) quickly. Everything from the domain registrar (think GoDaddy), to the website hosting company, and the server network configuration, all linked together, are ultimately affecting the performance of your website and applications.
Infrastructure is a critical piece of the website puzzle that is often overlooked by the inexperienced. Mark Zuckerburg, the CEO and founder of Facebook, understood this well. He knew early on that in order for his website to be successful, it could never go down and he invested in infrastructure from the very beginning to ensure that would never happen. Today, Facebook’s infrastructure includes tens of thousands of servers in multiple data centers, all part of a fully-redundant network architecture.
Jeff Mitchell, Director of Information Technology at Bit-Wizards, tells me that in assessing the infrastructure needs for a website he “thinks about who’s going to be accessing the site and where they are going to be accessing the site from. Is it an extranet site or an internal site? The next thing is the number of people who are going to be hitting it [the website], because if you are building infrastructure on-premise for a website that hundreds of thousands of people will be visiting, you've got to make sure you have a network load balancer, you’ve got make sure your website is scalable.”
The cost associated with the capital expense of hosting websites can be sizable. Not to mention the labor expense. Jeff points out that, “There are a lot of companies that host their website internally and there are benefits to it if availability is not the highest priority. But the downside is that you have to manage it [hardware, security, software updates, etc.] and a single security breach can cost a company their profit for about the next four years. And for a company to get HIPPA-compliant security, you’d have to have four security engineers working on your network year-round.”
More and more, organizations are finding that it makes sense to host their website infrastructure in the Cloud. Jeff tells me that Domino’s Pizza employed a cloud-based solution using Windows Azure to handle their single largest selling day of the year, Super Bowl Sunday, without creating an infrastructure that would largely be idle the other 364 days of the year. By deploying their ‘pizza builder’ ordering application to Azure, Dominos was able to take advantage of the Cloud’s instant scalability to handle peak traffic, and then turn off the computing capacity when it is no longer needed.
Jeff believes that the Cloud should be a part of any discussion on infrastructure pointing out that, “The value that the Cloud brings is scalability, cost reduction, and high-availability. Infrastructure has become increasingly more sophisticated, with the need for more in-depth understanding of networking, storage, computers, controllers, and the different types of operating systems. Your network administrators have to be accountable for a large amount of responsibilities within your own internal network versus paying someone to let their engineers eat all that [overhead] cost. There’s a real value for that.”
Do you need an app for that?
In the next year or so, it is estimated that people will spend more time online using a mobile device than a desktop or laptop computer. Like many other marketing decisions an organization faces, the answer to the question of whether or not to build a mobile app is: It depends.
Yes, the mobile market is big and growing, but is your audience using apps? According to Forrester Research Senior analyst, Melissa Parrish, “About half of U.S. adults have a smartphone, and data show that 43% of those have apps on their phones. You can find users of all ages among those who have apps, but the demographics lean heavily to the 23-45 age group.”
There are pros and cons to building an app for your organization. Functionality and design can be tailored to a device making for a better user experience, but if you want your app to be available for Apple, Android, and Windows devices, you’ll need to develop three separate apps. Another possible advantage of building an app is the potential new marketplace that Windows 8, which allows applications to run on a PC desktop, will create.
MAKING IT LOOK EASY
I’ll never forget watching Tiger Woods performing at the height of his career in 2009. One shot in particular stands out in my recollection. It was the final round at the 2009 Bridgestone Invitational. Woods was about 175 yards out and hit an 8-iron to within a foot of the hole. A few yards shorter, and his ball would have found the water, likely costing him the tournament. For some perspective, the average amateur golfer hits a golf ball with an 8-iron anywhere from 120 to 140 yards — with little consistency. Conversely, Woods hit this shot from more than 175 yards and got it within a foot of the hole — and he made it look easy.
The casual observer may watch the video of Woods sticking the ball within a foot of the flag and think nothing of it. The same might be said of the millions of Facebook, Weather.com, and Amazon visitors, many who view these incredible websites as just the natural order of things. I haven’t coded a website in a few years, but just like a making a good approach shot, I understand what it takes. Maybe that’s why I have a great appreciation for what my colleagues here at Bit-Wizards do every day; they make it look easy.