As companies and technology evolve, so do the demands of their corresponding websites. Industry trends such as responsive design enhanced interaction and engaging content strategies help drive website evolution. At the same time company business goals, architectural shifts, and product improvements change the character of a website. At 2Checkout, these were the elements that brought us to the decision to rebuild our website based on three main goals: 1) Embrace mobile with Responsive Design 2) Facilitate constant change and reduce road blocks in implementation and 3) Fine tune content and enhance content delivery.
While there were many layers involved in the process of rebuilding our website, in this post I will focus on the three primary goals and how we reached them.
1. The Design - Responsive or bust!
The past few years we have seen a revolution in how we look at the web. Mobile devices and the overall dynamic use of the web have forced the industry to re-examine how websites are designed. Designers have had to accept the inherently flexible environment of the web and do away with previous techniques. Web 2.0 brought on the influence of traditional typography design. Along with it came the standard 960px grid, which was developed so designers could effectively implement a more traditional design technique. However, that rigid grid is no longer effective with the varying screen sizes and proportions used today. To address the dilemma of varying screen sizes, in 2010, Ethan Marcotte coined the term Responsive Web Design (RWD) describing a practice of fluid layouts and navigation. The web community has since embraced the concept and has been re-energized by creating mobile friendly websites.
When our team began working on a site redesign in the spring of 2013, it was clear that RWD had to be a key part of the project. Every day, our company interacts with thousands of customers across the globe. In many countries, mobile phones and tablets have become primary tools to access the internet. Our website needed to be optimized for these devices. But what exactly did that involve for the design process? Think mobile first.
Even if you already have a standard desktop based website or design starting out, your team always needs to focus on how it will be represented on mobile. This will expose areas in your design that are unnecessarily complex, as they will become increasingly difficult to address as you shrink the layout. This is also a great opportunity to trim the fat. As we designed each page on our site, we went through the motions (adjusted layout, images, element styles, etc.) to adapt it to mobile, tablet, and desktop. In many cases we were able to develop a design pattern for how certain blocks of content fell into place. Unlike projects in the past, the design mockups were never really finalized. Instead, they were an ongoing part of the development process. Building code as you go along helps you discover issues in the design and adapt to it accordingly.
Once we began developing the code for our website, we focused on the navigation first. It was very important to have the navigation optimized and tested. Users are quick to leave a website if they find the navigation difficult to use or broken. Our page templates consisted of three main elements, the header, footer, and content. The content section was usually broken up in rows which define styles based upon their background color, etc. On our website, a lot of our content just naturally fell into place as it was placed in the grid system. Some minor tweaks were needed on a page by page basis. Some simple tricks using float right vs. float left can change what order various content blocks appear in at different screen sizes. Overall, the responsive nature of the website did not add a significant amount of time to the process.
There are various tools like Chrome’s inspector tool that can really help your team troubleshoot layout issues as the size of the view-port changes. Testing involved various teams checking for functional issues as well as layout problems on various devices. It is very important you test on different devices as some mobile browsers have odd bugs or issues rendering different elements. It’s also a good way to make sure the design actually works from a user’s perspective. Maybe a button is too small or a menu section too hard to find. Once finalized, a responsive website is quite rewarding. Users now have complete and optimized access to your website regardless of what device they are using.
2. Technology - Speeding up the process
As the nature of the internet continues to progress quickly, it can be very easy to fall behind. Your website must continue to be updated to stay current and engage users. Adding progressive enhancement through HTML5 and CSS3 or other technology grabs the attention of users and keeps them interested. Your business may also have new needs that will impact the design of your website. Added products, changes in features, and copy edits will need implemented occasionally. Usually these factors are implemented through a Content Management System (CMS). WordPress is by far one of the most popular CMS platforms and it’s free. However, the CMS your team selects should also be effective for what your business needs are. Does your team always include developers that can modify the code? Or is your team usually constrained to business users without coding knowledge? Keep those types of factors in mind when you choose a CMS.
Our company has been using WordPress as our CMS for several years. It’s a great platform and has many plug-ins available. However, our implementation of WordPress limited us from having full control of the content on our website. Many of our pages were hard-coded and required a roll out process to update them. In addition WordPress formatting can be problematic when dealing with HTML code or trying to manage CSS. As our team began to prepare for the rebuild, we took a step back and looked for an alternative CMS. At 2Checkout, the team in charge of the website now has several members who can actively code and manage code resources. This opens up the possibilities for more advanced changes and layout flexibility on the website. The ability to edit and manage code quickly was a key factor in selecting a CMS for our new website.
3. Content - Bringing it to life
With over half a billion websites on the internet, it’s very important that your website’s content grabs the user’s attention and engages them. If your website’s goal is to convert visitors into customers, then the content of your website should guide them towards that decision. Conversion techniques such as call to actions, simple navigation and clear product descriptions are very effective ways to maximize conversion. However, those techniques have become common place and your website needs to have a differentiators that draws customers in. The key is in your content. Bringing your content to life through conversational tones, quick & readable points, and enhanced interaction will attract your visitors to keep reading. Even if they don’t convert right away, content that engages your visitors could bring those same visitors back to your website again and again hopefully to become potential leads later.
Icing on the cake
When we began working on the site rebuild, our focus was on the layout and the technology used to deliver the content. Use of white space needed improved (See our blog post Content Delivery Part 1: The Value of White Space) and a better CMS was required. However, as the project moved forward we began to review our content and analyze its effectiveness. In some cases we found the content overly complex, so we merged it and simplified the message. We refined the content organization and focused on our most powerful differentiators. Our team ran through with an axe and removed unnecessary periods and grammar that cluttered the content. As we fine-tuned the copy, our team also improved the visual aids that supported that copy.
Visual aids are extremely important in communicating the function or meaning in your copy. They are also the quickest way to grab a user’s attention. We added graphical elements to illustrate our message such as a calendar with recurring events on our Recurring Billing page. Whenever possible, our team used actual screenshots of our product to provide a tangible impression of our service. New methods in HTML5 and CSS3 such as transitions have also enabled us to enhance our content with visual effects and interaction. Our home page uses CSS transitions for the rollover blocks in the blue section and we added a video that describes our product. These elements enriched our content and provide a level of polish that can help engage and convert users. Progressive enhancement will be a core factor as we continue to improve our website.
Conclusion: A website that empowers our content
When we began working on our site redesign our team’s objective was to improve how we delivered content. We focused on three core factors that expanded our website’s impact to users and enabled our team to continue improvements. With Responsive Web Design a CMS that best fits our needs and enhanced content delivery, we’ve refined our website and solidified a foundation to build upon. Content is now accessible across many different devices, quickly editable, and brought to life with interaction and visual aids. Our new website is a great tool to actively engage with users and express our brand’s value.
- Responsive Web Design, A List Apart
- The Elements of Content Strategy, A Book Apart
- Responsive Web Design: What It Is and How To Use It, Smashing Magazine