Posts

While you won’t meet a web designer who doesn’t know about responsive design, its still relatively new. According to Webdesigner Depot, the term was only coined three years ago by web designer Ethan Marcotte who writes for A List Apart.

While some still treat responsive design as a passing trend, it appears that responsive design isn’t going anywhere until new technology requires a new design methodology or we find a better solution. Responsive design aims to make the user experience as enjoyable as possible, and while that pleases users Google has also made it clear that UX is going to be a major consideration in site rankings going forward.

The internet used to be confined to desktops, but we all know that time is long gone. We access the web from countless devices with constantly changing screen sizes and browsers, often from our phone or tablet while at work, on a bus, or watching tv at home. Responsive design strives to make the experience as gratifying and problem-free as possible no matter what platform you are using.

Mashable called this the year of responsive design, and in many ways they are right. It is clear that numerous hugely popular websites have implemented responsive design, and there are many signs it may be considered standard within just a few more years. If you’re still not caught up with this fairly new design method, Marc Schenker recently broke down the facts everyone needs to know about it.

Think about the programs you use for design. You probably think of Photoshop, Illustrator, or one of a few prominent desktop code editors. You probably didn’t immediately think of your web browser, and the numerous online tools you can use that a large amount of your workflow relies on. While there aren’t any web based graphic design tools that rival Photoshop (yet), the same can’t be said for the code editors that developers use.

While in the past, the web was just where you went to see simple HTML and find the vast number of programs you would have to use offline, now only extremely specific things require actually installing programs. Web development is one of the few arenas that has been slow on taking up web integrated tools, but that has changed significantly over the past year.

Now, I understand anyone’s reluctance to shift from a program they have been using for years to a web based coding interface, but it actually makes a lot of sense. Online tools allow for faster and easier collaboration, and they can help keep things much more organized than the endless folders could ever do. Matt Pass breaks down why you should make the switch over at Webdesigner Depot. Change is hard, but sometimes it is very worth it.

In the design community, every step of the creation process becomes a tale we tell each other to establish our own know-how, as well as trading insight and tips. What we don’t seem to discuss is the “why” side of things. We share what happened and how, but rarely do you hear designers explaining why they decided to do what they did.

It is possible we just don’t realize how important that question can be. Sometimes, it doesn’t seem relevant while trading stories “from the field”. Unfortunately, not answering these questions holds everyone back.

This is the issue Rob Bowen brings up in his article for Webdesigner Depot, and he makes some important arguments for why to be sure you can answer “Why?” Most importantly, answering why you did something helps a client understand your professional opinions and decisions.

If you have thought through why you selected a certain layout or tool, you will be able to argue for it better if your decision is questioned by your client. Sometimes, that forethought is all that can get some ideas past the boardroom. Thinking through every step, also helps ensure you create the best design you can.

The good designer can make a solid website, but the great designers can tell you why every aspect of the design was chosen. If your vision or understanding of the design are blurry, you won’t be able to back it up when the pressure is on.

 

Here we are, gathered around again for another article on responsive design. You’ve heard me say why responsive design is great, how easy it is to implement, and the different ways you can approach it. Now I’m going to tell you why you shouldn’t use it.

Okay, not quite, but I am going to focus on the pros and cons of using responsive design. Every design system has its drawbacks, and this is no different. The question, of course, is do the positives outweigh the negatives? And the answer to that is, it depends what resources you have and what your needs are.

The Positives

  1. Low Maintenance – One of the biggest upsides to responsive design is the need to only maintain one website. Every device gets a different layout, but the same content simultaneously. This is important if your website goes through frequent content updates. If you are updating numerous times a day, this makes your work much more streamlined than having to update your desktop page, your mobile page, and maybe even a tablet or middle range page.
  2. Brand Consistency – Having only one webpage to maintain allows you to also keep an incredibly uniform brand representation across your pages. The look and feel of your page, and all of the brand image imbued within it, will remain consistent for all screen sizes, and you won’t have to spend time ensuring similar representations across different versions of your site.
  3. Usability – Responsive design is known for being user friendly, mainly because visitors only have to learn your site once. Their navigational abilities aren’t stunted when they decide to visit your page on another platform, and they get a uniform experience from anywhere.
  4. No redirects – This aspect seems insignificant at first glance, but helps ensure your users always have a positive experience with your site, especially if you are sharing content on social media platforms. Having a uniform URL for all versions of your site means that you can link to content elsewhere with one link, and no longer worry if users will have compatibility issues. Mobile users won’t be directed to the desktop version, and vice-versa.

The Negatives

  1. Development Time – Obviously a responsive website can take more time than a regular page, and require more testing than others. It also takes longer to convert an old website than to create a new one from the ground up. You will still likely spend less time than building multiple versions of one page, but if you outsource your mobile page to a seperate designer, you may actually end up increasing your load by taking on a responsive page.
  2. Different Devices are Still Different – While responsive design allows users to have a more uniform experience than different versions of the same page, there is no way any website will ever work equally well on every platform or device. Different platforms have different needs associated with them, and having only one version of your page actually limits the ways you can tailor your content to their needs. Sabina Idler from Webdesigner Depot uses the scenario of a public transportation website. Desktop users will either be planning trips or looking for deals, with plenty of time to look at options and explore. A mobile user on the other hand, may be relying on the mobile site to get on the correct train at the last second. If you only have one version of the page, you can’t cater to both.
  3. Scalable Images Lose Details – Scaled images lose detail, which strips them of meaning. With responsive design, images and text are scaled by screen size rather than context, so things you want to be big may not be. There are ways to get around this issue, but it still takes time and planning to avoid.
  4. Designing Menus – Desktop pages anymore tend to have fairly complex menus with multiple layers. Trying to design a seperate version of this for a mobile user is hard enough, but designing one menu for both is downright intimidating. The rule to follow is to try to find a balance between easy access to info and unobtrusive design.

Conclusion

If you have the time to invest in responsive design, it is very possible it will benefit you. To know if it will however, you have to take a long look at your business and decide what is needs are. Do you have customers who may have drastically different wants based on what platform they are on? Do you have numerous updates going out every day? Answer these questions, and you will be much closer to knowing what path to take.

 

You’ve heard me preaching the benefits of responsive web design, but you probably haven’t seen much about responsive typography. This is interesting because for most websites, the text is by far the most important content on the page.

Well, good news everybody, because responsive typography is pretty easy. You just need to think through how you want type to respond to the changes in screen size, and then follow through.

Responsive typography has two main factors. The first is resizable type, which is obvious. Resizable type rescales itself based on the size of the screen, but it is also important that it is resizable by the user.

The second factor is optimized line lengths, which are still readable. On some screens, keeping content areas smaller actually makes more sense, though they technically could be larger.

Cameron Chapman has all the code and technical information you need at Weddesigner Depot to implement solid responsive typography. Most importantly, you should be using rems for sizing your type because they are relative to html elements, which makes maintaining proper sizing of your type very efficient. Chapman also will help you through how to keep your line lengths the optimum length, which is slightly more tricky than just making your text resizable.

Designers should never neglect their typography on the page, and making it readable for any size screen is essential. Sure, if your site is more image and video heavy, it may not be as important for you as it is for bloggers, but I doubt your site has zero text on the page. Even in those situations, you want every part of your page to work perfectly for everyone.

 

Sometimes it is clear when you need a redesign. For example, if your site is still using Flash, it isn’t viewable on many smartphones, and you definitely should consider redesigning.

Other times, it can be less clear. Sometimes even bad designs are meeting the needs of your client, so it can be hard to give a good reason why they need a design. Why pay money to improve something that is working at the time?

Usually the reason most designers cite for needing a redesign is to make their site “look better.” This isn’t really a viable reason for clients however. Kendra Gaines, writer for Webdesigner Depot, has a different argument for redesigns that your clients will love.

Redesigns aren’t only a way to offer clients the latest design trends or “make things look better.” Redesigns can be a way to entirely revitalize a brand or business. A redesign can be enough to breath new life into a business or brand that might be stagnating.

Gaines uses examples from business such as Keds, who subtly redesigned their product line to re-invigorate their popularity, but doesn’t tend to connect the ideas to web redesigns. This is interesting because Webdesigner Depot just did a massive redesign of their webpage.

The website redesigned to a responsive web layout allowing their content to be available on all platforms, but it also helped refine their image. The site seems more efficiently laid out, and they have made social media buttons readily available at all times.

This redesign acts as the perfect example of what you should be thinking when trying to redesign for a client. The site was brought up to date with the current design standards, as well as adding usability features that are great for users, but they also used the opportunity to help refine their brand as a whole.

When you are preparing to do a redesign for any brand, try to remember these ideas. If you are just trying to add the newest trendy features to a site, all your work will be undone when the next wave of features hits the industry. If you subtly try to help the brand define itself, your work will be making a lasting impact on the company in a positive way.