Responsive web design involves creating a flexible system that can adapt to information that your site receives from a visitor's web browser regarding its resolution, operating system, and more. It's been popular within the past few years because it allows companies to create single sites that work well with both mobile and desktop platforms, and because it works with several different mobile screen resolutions as well. Here are the basics of what Responsive Design can, and can't, do for you.
What Responsive Can Do:
- Improve your search engine ranking. Google is becoming increasingly more biased toward sites that have a responsive set of web parameters over the choice of a mobile site with one-size-fits all resolution choice. That's good news if you're just starting a site right now, because it means you can come out of the gate with more momentum than older sites that may still be relying on that clunky m.domain version of their homepage.
- Cut down on your development time in the long run. In the short term, responsive designs take more time to develop up front, but in the long run, it should be easier to make corrections, changes, and upgrades to a site that takes several different platform experiences into account. A responsive site can make it simple to add features like video players and other widgets as well, with tight control over margins and content tables across different viewing dimensions.
- Get more traffic, thanks to your investment into responsive design over a mobile domain. One of the issues with a mobile domain is that it is usually built to be viewed on a smartphone, which was great a few years ago, but smartphone screens are getting bigger, and tablets are on the rise. With a responsive site you are tapping into a growing demographic of users that have both larger, and more powerful mobile devices capable of handling more complex presentations. Just remember to keep it mobile-friendly, and in fact, design for mobile first.
What Responsive Design Can't Do:
- The work for you. When it comes to testing your responsive site and ensuring that everything looks great, and isn't broken, on a variety of different resolutions, responsive sites aren't quite there as far as ensuring that images won't get squashed, broken, or otherwise warped in translation. You still need to check all of your work on different screens; using mobile devices for these tests is always the recommended method, over just resizing your browser and thinking that gives you a good idea.
- Retrofit a site. If your site doesn't already have responsive design, you need to start over if you want to get responsive. That can be expensive and time consuming if you've already got a large site up and running, but now might be the time to start regardless. Responsive design isn't going anywhere, and it's safe to say that it will continue to trend throughout the decade.
WordPress is simply one of the best content management systems available, free or otherwise. With an incredibly rich amount of plugins and options for customization, there's no end to the amount of power that you can get from WordPress's ability to create and manage content online. One of the key benefits of this library of add ons is the automation and time saving that many can do for you. Here are four of our favorites, which also come highly rated on WordPress's own official list of plugins.
Keep in mind that there are so many plugins out there, and this is only a very, very short list of some of the community favorites.
- W3 Total Cache is referred to as a WPO, or WordPress Performance Optimization framework, and has been made from the ground up to improve a user's experience and your overall page loading time. Many professional companies actually rely on this one, including AT&T. W3 Total Ache works by optimizing all of the different aspects of a site that could potentially cause a slowdown, and providing a report that will help you to know where and how changes should be made to improve that experience.
- TablePress gives you the power to add tables to your pages without having to write, or know, the code to do so. For a designer that wants to create several different pages that could all have their own tables, this can be a serious time saver. TablePress gives you the ability to put those tables into any post, page, or widget using easy to insert short codes. The data in those tables is easy to edit as well, just like you would a spreadsheet. There's even import and export features so that you can create quick report pages based on the data you have on hand.
- All in One SEO Pack has an absolute ton of really effective SEO tools, all in one place. With support for Google Analytics, the ability to fine tune your navigational links, integration for e-commerce sites, security measures to make sure that you rank highly, automatic meta tag generation, different tiers of services for basic and advanced users alike, and compatibility with many other plugins, the All in One SEO Pack is a great way to improve your site's visibility while ensuring it has that professional level of polish that both search engines and users appreciate.
- Socialable offers another feature-packed group of plugin tools that you'll find useful if you want to get the most out of your social site experience. Featuring interaction with popular social networks like Facebook, LinkedIn, Twitter, and Google+, and the ability to display your latest posts on any of those platforms, you'll quickly find out what makes this plugin such a hit with the nearly 1.5 million users that have integrated it into their WordPress. Using this alongside other social media plugins is a good idea if you want to get the full social experience, and the benefits that come with it.
A “ghost button” is an easy way of referring to transparent parts of a site that can be clicked. If you're wondering why the special term would be needed, it's because ghost buttons are actually becoming a very popular trend in web design for 2015. Here are a few of the characteristics of a ghost button:
- Hollow, with an outline.
- Small amount of text.
- Typically white or black.
- Works well with flat designs.
So What Makes Them Popular?
- They look clean. As mentioned, these buttons tend to be hollow blocks with very simple text inside of them, usually white or black, which matches well with virtually any background color option. White works well in particular with bolder site presentations that want to provide that up to date, modern OS chic that is part of the appeal of flat design user interfaces.
- They work with nearly every design, and they make that design look even more modern than it may already be. You can use ghost buttons on solid backgrounds, or image backgrounds, or even parallax, scrolling backgrounds. There are so many different applications for them that you'll be hard pressed to think of where they wouldn't end up fitting.
- You can adjust the thickness of the button if you want it to have a stronger presence on a more complex image field. That's great for designers that want to make a very bold, very singular presentation on their site without sacrificing their buttons and their navigation in the process.
- They have a strong point of focus, making them ideal for calls to action, survey forms, and more. They're a very nice fit on sites where you don't want to distract from your key message while keeping the flow of user interaction to a very predictable pattern of clicks and navigation.
- They're easy to hide, if you aren't careful with their placement. You don't want the button to be too invisible. It's only called a ghost button because it doesn't have a background, not because you need special ghost hunting equipment to find it on the page. If the buttons aren't well integrated into your site, your users may not even realize that they're buttons at all. Make them bold.
- They're also easy to bloat. In this case, we're referring to the tendency to make them too thick or prominent over the image that they're on top of. That can distract from that image, and it can also just make the site look worse in general.
Ghost buttons are a popular trend, as we've mentioned, which means that you may be interested in them, but that you'll also want to look for ways to set your own implementation of them apart from the crowd. If you're smart about where you put them, and how visible they are, you will definitely appreciate the end results with just about any design you might have in mind.
With trends like minimalism and flat design, both users and designers are showing a lot of appreciation for the idea that “Less is more.” There are more ways than ever to put the information that you want to communicate in less space, sometimes with less text and less graphical presentation that you may be accustomed to. Even info graphics can be minimalist with the right aesthetic touch, but there are many different components that go into making a site lean and mean.
- Staying up to date on trends is a fairly big one, because it will help you to avoid certain choices that could hurt your visibility on search engines, and keep your site secure for browser updates and even operating system changes. One example of a trend that needed to be followed was the move to HTML5 from Flash, which meant that sites would not only load faster, but offer a more secure presentation overall. That, combined with the fact that Flash wasn't effective on mobile iOS devices, goes to show how streamlining your site actually has future proofing qualities as well.
- Survival of the fit is another good result of streamlining. By analyzing your own site's traffic and its various interaction times, you can see how many road blocks are between users and where they want to go, and how you can cut down that time by removing useless features that don't benefit the site. That's great for designers that want to do as much as they can with as little real estate as possible, especially considering the mobile market. The “fit” sections of your site should still adhere to the basics of navigation, safety, and aesthetic appeal, but using tracking tools can help you to cut down on both the waste and loading time.
- Sharper graphics with purpose are also important for a streamlined format. With ideas like minimalism, you want to create as impactful a presentation as possible with as little complexity as you can. With flat design, you often get that same goal to work with, but with a bit more in the way of pseudo-3D elements like “paper” background and tables. The end result is the same; the negative space of the site itself is a tool to help to enhance the filled space, and that plays well with the broadband-speedy ideas of streamlining the site as a whole.
When you streamline your site, you also get plenty of great tools that can help the process along for free, including caching tools courtesy of WordPress's plugin library, benchmarking and optimization tools from the same resource, and more. These plugins and tools can all go a long way toward automating the work of streamlining in areas that you may miss, even as an experienced designer that thinks they know the site inside and out. You may be surprised at just how many speed bumps there are along the way when your users are browsing your page.
Minimalism, as a graphic design and website design trend, could be said to have begun as early as the web itself became popular with home users and consumers. After all, when the earliest technology to get online couldn't handle more than what a 32k or 56k modem could deliver in a timely manner, it only made sense to try and get as much information as you could in as little amount of space as possible. While earlier graphic design aesthetics were unrepentant in their use of what we now consider to be tacky background images and animated gifs, many still adhered to a minimalist presentation.
In today's website scene, Minimalism usually refers to these ideas:
- Clean presentation. Everyone wants to have a clean website that is free of visual clutter, but with minimalism, it's even more of a pressing matter. You want to have as few obstructions as possible so that you can clearly present a point, whether it's a call to action or just information on a company. The clearer everything is, the better it will be for focusing on those very key points of your site.
- Fast loading times. Cutting down on the clutter can also mean saving on bandwidth, which is what you get when you minimize the amount of fancy graphics that your site has. Cutting down on features like videos that play on loading, unnecessary coding tricks and tables, and more, can all help to keep your page loading fast on both desktop and mobile platforms. That's a big hit with everyone.
- Attractive graphical choices. Business cards used to rely on very simple aesthetics: Font, choice of card stock, and text placement. That was all that you could rely on if you wanted to stay in someone's memory when they needed to do business. With a minimalist website, you have many of the same considerations, and great choices still stick out in a person's mind. Google's own Material Design philosophy and Flat Design as well, have both led to the rise of pseudo-paper background and textures that work extremely well with minimalism. That, combined with an increased interest in typography, has led a business card-like air to the minimalist approach.
Minimalism is perfect for blogs, businesses, and everyone in between. You can use your minimalist design on a landing page, with a more complex design once you've drawn visitors in, or you can just keep it throughout your entire site to make a fast presentation that's easy to digest and even easier to share online. The point is focusing on a core aesthetic value or theme, and then having your message speak through that theme, with as little distraction as possible. With luck and practice, you can actually make some outstanding websites that adhere to minimalism, and even do so in far less time than it would take with a site that has a more grandiose appearance. Just don't forget your navigational links and other necessary features.
It's no secret that a lot of the web's traffic is redirected through search engines like Google and Bing, with some sites getting anywhere from 75% to 90% of their inbound traffic through search engine queries. The remaining percentage of incoming traffic comes from a combination of different sources, one of the largest of which is social media redirects. While it may not seem important to cater to the minority of clicks in this case, it's important to remember that search engines also use social media content to determine their search engine algorithm values in a search. That means that the more social your site is, the higher it can rank.
Ignoring your social media potential with a website is a big mistake, and as a designer, it's important to take advantage of what you have available to make your site as successful as possible. Modern users also expect some form of social media interaction and information to be available on a site, especially any site that wants to appeal to a younger demographic of tech savvy users. Here are a few ideas on how to improve your site's social skills.
- Shareable content is a big one. Responsive website design lends itself well to the ability for users to share links between platforms like desktop and mobile with a consistent presentation, and reasonable loading times for both parties. You should try to keep content as easy to digest as possible, which works well with clean UI design. If you're using e-Commerce, then it's all the more important-- references from social media are a great source of sales conversions during sales or new product launches.
- Social media buttons that make sharing content as easy as just clicking a single, easy to find link on your page. These buttons should be available on every page. They can, and should, be placed in areas that don't obstruct any other fields, yet remain highly visible. Social media links at the bottom of important news stories or new product pages are also great, so long as they aren't buried below walls of text. Don't get too liberal with the social media interaction either; your Facebook message feed isn't a proper replacement for a comment section, for example.
- Encourage reviews and discussion where applicable. Reviews on products or comments on news stories keep users coming back to see how other users have responded to what's been posted. It may not seem like a social media function per se, but comment sections are undoubtedly a hotbed of activity.
Social media integration, best of all, is almost always free of cost. The networks themselves are free, many of the tools to integrate functions are free, and user comments are free. If you're looking for ways to boost your site's organic SEO potential in a small package that doesn't add much to your bandwidth, there's few that are as universally productive as social media avenues, however you choose to pursue them.
Video content is great; it gets you more hits, it can connect with your social media presence, and if you're a business that actually produces video content, it's practically free advertising for the work you've already done. There are a lot of different avenues for video hosting and display, but actually integrating it into your site does have a few things to consider if you want to do it well.
Remember, not every video site is going to be the same, and you definitely won't be able to compete with the largest platforms for traffic if you want to get eyes on your video. This article is mostly about how to get the most out of video on your site itself.
- Stream, load, play. Any of those options are preferable to downloads, so try to have a good player on the site with HTML5. If you're using YouTube or Vimeo, there are built in tools to just add those links to your page, and you may find that this is the best option for your bandwidth and your users. Just don't load your page with too many videos; you want to keep your mobile audience cruising along at fast speeds as well.
- Have descriptions, titles, and other information. Your video pages, if they're for projects that you've done, should have factual information to go along with them. This isn't just for your users; either; Google and other search engines will use that information to determine whether or not your site is relevant during a video search. Video searches are usually built in on their own dedicated parts of those search sites, so if you want to get your video SEO up, use those descriptions. On YouTube, you can even integrate those descriptions into the video link itself.
- Try to have a varied library of content, because that can also increase your ability to be social. It doesn't always hurt to have a light hearted or even comedic piece of video content if you have that available, as that does well with sharing, but so does informational pieces. Ideally, you want both, but that isn't always possible with certain types of video content. A varied library gives you a broader net to capture the attention of your audience.
Keeping your videos relevant, described, and on point are all great, as is adding new video content on a regular basis. As mentioned, you can connect your video site and your regular site to your social media platforms, to send out notifications whenever a new video has been posted, even to users who aren't necessarily subscribed to your YouTube channel. Don't lean too heavily on video content, of course; you still want to have a great site to back all of the videos that you've posted, even if you're a video production company. Text hasn't gone out of style yet, and won't for the foreseeable future.
In web design, a good brand is a navigational tool that helps you to know when you're moving in the right direction with the tone of content, the look of your graphics, and even the flow of your site. If you've got a brand that's properly progressive and adaptive, it can make integrating new technologies into the site even more seamless than it's ever been. Popular car companies are always updating and maintaining their brand for that very reason; these manufacturers are associated with both their classic reputation and their modern need to stay on top of the latest trends in automotive design.
With web design, there's a lot of cross over there. Companies online can offer more services and forms of engagement than ever before, with more on the way as mobile internet users become a majority of incoming traffic. That's why brands may need an infusion of fresh ideas. Here are a few ways to keep your brand modern and lively.
- Responsive branding is an interesting take on rebranding or bringing an older brand back to life. Imagine if you could make a brand that adapts itself to be just as appealing to one demographic as it is to another. That's actually the idea behind a responsive brand, which could be anything from a single line of text, to a silhouette graphic, to a shape that's easy to identify. With a responsive branding philosophy, you want to create something that you can apply across a wide field of colors and themes. Coca Cola's had success with this idea in changing some of their bottle and can labels while retaining their iconic text logo, while others, like Disney, can use their brand as just plain iconography.
- Minimalism. If you look at some of the brand re-launches that have happened over the past decade, what you will tend to notice is that there is a trend toward reducing the amount of features on the brand, sometimes including the names themselves. Kentucky Fried Chicken, for example, was cut down to KFC. When you're rebranding a site to be along the same lines, you may need to look at what the actual identity strengths of that site's design are. If you're known for certain colors, features, and attitudes, then it can play well into your brand streamlining and upgrade. Keeping on top of what keeps you on top is how you stay there.
- Relevance is the final key, and it can't be overstated just how important it is to be relevant, not only to the market, but to your site and company. If you're attempting to rebrand for a hipper, younger generation, but your company sells something that is primarily for an older demographic, you could be making a mistake. There's nothing more confusing than a lawn care company that has a more complex and cutting edge design on their site than actual graphic design companies. Brands are about familiarity, after all.
It's hard to talk about good advice for web design without looking at all of the different ways that designers can also hurt their own sites. There's a lot of varied ways to fall down on the job, and many of them can be done without realizing the mistake until it's too late. Here are a few of the more common mistakes that you will see in web design, and how, and why, you need to look out for them.
- No clear path. Whether it's a lack of a strong call to action on a sales page, or just a confusing flow of image choices, there's a lot of different ways to make your users get lost in the hedge maze of a badly designed site. This is something that you can often correct by having test users navigate the site, and you can even connect software to those users, and your site, that will let you track how long it takes for them to go from point A to point B. These tools, including heat maps and various analytic utilities, are incredibly valuable in showing how clear your navigation is, and whether or not users are actually going to where you need them to. Also, a lack of organized links and navigation can hurt your search engine rankings.
- Not friendly for mobile. There's honestly no excuse for this one in 2015; some sites can see as much as 75% of their traffic come from mobile device users, and virtually every site has mobile traffic to account for. While it may not always be in the majority, it's beyond tone deaf to ignore your mobile user base, and your mobile users definitely notice when the site hasn't had some form of optimization to make their browsing experience easier. Google will track how often a user bounces back to its search engine results page after clicking a link, and if a mobile user sees that your site isn't optimized for them, they will find one that is. That's good for your competitors, and very bad for you.
- Too many gimmicks. Browse any of the upcoming web trends for 2015 and you will find a list of some very creative applications of ideas in typography and flat design, as well as interactive user interfaces, parallax design, and much more, but do all of these concepts have a place on your website? That's a question that only you and your users can answer, but chances are that only a handful of new ideas are a good idea, if even that. Sometimes, it's best to stick to the basics and take the lessons of these design trends into account when you want to decide how to set your site apart. Don't fall into the trap of thinking that you need to load every single new HTML5 trick onto your site, however. That increases your loading times, and more often than not, clutters up your presentation.