Part of our efforts at Hall, to always be innovating, involves constantly reviewing the technology we’re using to get the job done. Whether it’s a piece of software we use to power our agency internally, a content management system like WordPress, or even the browsers that people are using to view the websites we build, everything has a role in the success of our clients, and for that reason, is worth monitoring and reviewing. You may think it’s odd that we would include browsers in that list, especially since browsers are not something we really have any control over, but browser type is a hugely important factor that impacts everything we build on the web.
Web browsers are always changing, adding new features and modernizing for the future. The thing that most people don’t realize is that as web browsers modernize, they find new and better ways of doing things – things that earlier browsers could never do before. As we modernize our practices to match the innovation that’s happening on the web, we’re left with a lot of older browsers that don’t support any of these new innovative things. Even ideas as central as responsive web design aren’t supported by earlier browsers.
Now if your audience is only using Internet Explorer version 6 (released in 2001 – over a decade ago!), then obviously that is going to be important to you and you’ll want to make sure your website looks good for those users. As we see older browsers losing market share and support around the web, we weigh whether or not these will be important for our clients and if we should continue supporting them. Take for example – IE7, released in October 2006. Over the past few years, we’ve watched as IE7 has quickly dwindled in use and support across the web. In 2011, both Google and Facebook dropped support for IE7, as well as Twitter earlier this year. More importantly, IE7 represents less than 1% of all users across the web, both in North America and Worldwide – and that number is still dropping.
As a general policy, we will likely not continue to support IE7 with browser-specific optimization and testing, since the cost of doing this far outweighs the benefit it would provide to our clients. We will continue to build our sites to degrade gracefully (ie, still look good on old technology), so even if someone does happen to view one of our sites using IE7, they would still be presented with a functional website. Our policy is to review Google Analytics data at the start of every web project so that we can determine what technology will be necessary to the projects success. Any project that we find has a noticeable IE7 user base will always be optimized for this browser specifically to make sure we are maximizing usability and conversions wherever our user base is.
The positive side to reviewing the technology we’re using, is that we’re able to make room to do new things that were never possible before. This included responsive design, advanced coloring and animations using stylesheets instead of images, support for retina displays and all of the other cool things you will see on the internet over the next year.
If you’re looking to learn more, here are some other resources on IE7 and market share for other browsers:
This past weekend I had the opportunity to attend WordCamp Boston, a yearly conference all about WordPress held locally. As you’d imagine, it was a weekend filled with talks and presentations, tutorials and ideas. But the greatest part for me was getting a chance to meet and hang out with some great local people from Maine who work using WordPress every day.
One of the greatest tools you can have is a strong community around you. You’ll not only gain the insight of new perspectives, but you also gain the insight of new experiences. We obviously use WordPress to build websites for our clients, but I had a chance this weekend to talk with people who make themes and plugins for WordPress, as well as building the software itself. That kind of diversity in experience leads to an entirely new perspective and set of resources for bouncing ideas and questions off of what would otherwise be unattainable.
Whether your community is a group of people within your company or a mix of marketing vendors, coworkers and friends, they are immensely important to your success. You may not even notice if you’re under-utilizing your community, because in most cases cases the value it brings is in providing perspective on things you would never have noticed on your own.
The key is to first build a community of people around you with the experience and skill set you need to succeed. If you don’t know these people yet, that’s okay. Find some blogs that you really enjoy and try emailing the authors and see if you get a response. Talk to your marketing agency and ask them what new things they’re interested in and working on with other clients. Seek out people within your own company who may have a lot to contribute to the Marketing strategy but maybe were never in a position to be able to contribute.
The value you will gain from surrounding yourself with these people will be a constant source of growth for you if you can pull together the right people and continually invest in sustaining and growing your community over time – but that’s a talk for another time.
Font Awesome Icons Example
Iconic fonts are scalable vector icons that can be customized through CSS (Cascading Style Sheets) just like any other font. This gives you the ability to easily edit the size, color, drop shadows and more all through CSS without needing to bug your designer to export additional images. The result is a crisp clean look as large or small as you designate in CSS.
Desktop, tablet and mobile friendly iconic fonts work on all screen resolutions, and since icons are vectors, they look great on high-resolution displays.
Page speed is another advantage of iconic fonts. Because your browser only needs to load the font once for all icons used, speed will increase and the file sizes for the icons will also be smaller than most image files – resulting in decreased load times.
Not every iconic font set is the same. One thing to look out for is screen reader capability. Some icon fonts can trip up screen readers making it difficult to identify and interpret what is being displayed on the screen. This can mix up text-to-speech or braille output devices. Another thing to remember is browser support. You want the icons to render correctly across all browsers so checking for browser support is important. Another limitation is that the icons can only be a single color. Color gradients can only be made using CSS3 gradients.
So where can you find an iconic set to use? Font Awesome created and maintained by Dave Gandy allows you to download the latest collection – one font with 361 icons to choose from, and it’s completely free for commercial use. Font Awesome is fully compatible with Twitter Bootstrap and is also found in Scaffolding framework (coming soon).
The recent launch of Apple’s iOS 7 is yet another reminder that the flat design trends of 2013 aren’t going anywhere soon. The days of skeuomorphism and 3D effects have been replaced with a more minimalistic and simpler look. So what is flat design? In short, it’s a balance of both bright and muted flat colors paired with simple typography and an overall “less is more” attitude. White space is your friend and plays a very important role in creating a minimalistic design.
In web and app design user experience is number one. You can create something beautiful, but if it isn’t user friendly, what’s the point? It is all about the end user and simplifying his or her experience. Flat design is a user experience approach that brings order to complexity. Decreasing clutter by removing unnecessary buttons and creating more whitespace is the first step. In turn, this allows the user’s focus to go where it should – to your content!
The rise of mobile adoption and the need for a site to respond to its screen resolution has also influenced the popularity of flat design. The increase of tablet and smartphone users has created a need for fast loading times and layouts that shift and resize. Simple typography and design layouts using mostly Cascading Style Sheets (CSS) decrease loading times, resulting in a more user friendly experience. There is no reason to make your users wait.
So how can you make your conversion messaging stand out?
Without 3D, shadows, bevel and embossing you’ll have to go back to basic design principles – scale and placement. The placement of a button along with the scale compared to the rest of the layout will grab user attention just as much as a 3D button will. Color, as in any design trend, is a key component. Set up your palette early on to ensure that there is a range for both bold and subtle design elements. You can also use color in interaction. Drop-downs, fly-outs and button hovers are all ways of adding bold colors and grabbing user attention, while maintaining the clean and minimal look you worked so hard for.
The world isn’t flat for everyone, but integrating some aspects of this trend could definitely be worth considering.