I consider myself an expert on browsing the internet. I could literally spend hours window shopping online, reading blogs, or looking at pictures of cats. It’s safe to say I’ve seen some stuff--in regards to web design, I mean.
The range of things that are possible on the web is constantly evolving and allowing designers to do almost anything they want. As an avid but casual user of the web—I typically use either a tablet or my old MacBook Pro—some of the up and coming trends in web design can be very off-putting. It is understandable why some choices are made, from a design standpoint, but it seems that designers often forget about some very important things. If you are set on utilizing some of these design elements, here are some ways that you can avoid alienating mobile/tablet users, users with disabilities, and people connecting from less-than-stellar computer setups.
Using a large image or video in the background with text over it is a huge trend right now. There’s a reason—it can be very attractive, and is a nice departure from typical header-body-sidebar type layouts. However, there are a couple of things to be aware of before you adopt this feature.
If you are reading this blog via a high speed internet connection and a newer computer you might be taking it for granted. Many people still do not have access to high speed internet or might be on an older computer with low memory. Your site might look amazing, but for these users it can cause frustratingly slow load times or a page that lags. They might give up on your site before they even get to the content. You can make sure images aren’t weighing your site down by compressing them properly in an image-editing program like Photoshop and testing it on other devices. We recommend using the “Save for web” feature in Photoshop to compress the image that you want to use in the background. An acceptable size to load quickly on most connections with minimal loss of quality is around 100 KB. Keep in mind that you might lose some of the crispness of a photo and the colors might be altered. Don’t use an image that needs to be sharp with precise color in order to look good. Also, make sure that you have an image that is large enough to begin with. The highest resolution monitors out there are approaching 2560x1440px, a spec that is always growing.
It hardly needs to be said, but mobile responsiveness is important too. Large image or video backgrounds will not translate to mobile devices, so keep that in mind. Even if they do work, the visual impact will not be the same.
Parallax, the effect of making different elements on a site scroll at different rates, can add depth and interest to a page. It looks great and adds a sense of professionalism to a site when done correctly and in moderation. However, this isn’t always the case. Besides being a little overused in the past couple years, it can be easily done wrong.
In some instances, on smaller screens, parallax may cause design layers to get in the way of content. The last thing you want to do is create an element that prevents users from getting to what they are looking for. This may cause them to look elsewhere.
Hover menus can look amazing and are instantly gratifying to the user because they don’t have to click. It is almost difficult to find a website that doesn’t utilize them in some way. They obviously don’t work on mobile devices, but can be easily replaced by mobile menus with responsive design.
Despite this, they can still cause a lot of problems for desktop users. Hover menus often open unintentionally when you move the mouse, getting in the way of content. It’s extra annoying when this happens and then the menu won’t close! In addition to this, they require a certain level of accuracy when they are being used. When trying to reach the secondary level of a menu, if you don’t carefully follow just the right path with your mouse, the menu will close. Menus that require clicking avoid these problems and are just as fast, without all of the frustration.
There are tons of bells and whistles that can be added to a site for more visual impact, but one main factor that must always be considered is accessibility. Having a site that is easily accessible to all is good for business because it takes away potential barriers between you and a customer. For example, having a site that loads slower because of design elements might put off a blind customer that is using a screen reader. Heavy visual elements don’t add any value to the site for them. A site that depends on a mouse and hovering to be usable will make it inaccessible to a user that has to use a screen reader or speech input. All essential functions should be usable through a keyboard.
In addition to acknowledging accessibility devices, you should consider whether your font choices or background choices make the content difficult to read for a person who doesn’t have great vision. Here (http://www.w3.org/standards/webdesign/accessibility) is a good guide for making an accessible website.
Luckily, besides some of the aforementioned trends, web design is trending towards becoming more minimal, flat, intuitive, and responsive. Now that designers have pushed the limits and figured out all sorts of cool tricks, it’s time to scale back and focus on the experience of the user. Instead of focusing on the novelty of the latest trends, focus on building a site that is easy to use. That doesn’t mean it has to be plain. With the thoughtful use of images and layout, you can have a clean and effective site. Craigslist and Wikipedia are great examples of sites that have stuck with minimalistic designs for a long time, simply because they work, and work well. Design should be conducive to accessing content, rather than acting as a barrier.