Tag Archive for: Responsive Web Design

Breaking Down The Facts About Responsive Design

, ,
Source: WikiCommons

Source: WikiCommons

Responsive web design isn’t quite the standard yet, but it certainly shows no sign of going away. It is currently the best solution for the majority of website owners attempting to make their site work well for people accessing it, no matter where they are coming from.

A growing minority of internet users are using smartphones and tablets to browse, and especially with Google’s push to punish sites with poorly configured or non-existing mobile sites, there isn’t much time left before site owners will have to choose between going responsive or creating a separate mobile site. To help you choose, Designrfix shared the latest facts about responsive web design.

  • Display Doesn’t Affect Load Times – Responsive design largely changes the appearance of sites depending on the device being used to access them. They don’t really affect what is actually loaded when a page is brought up, and so it doesn’t really do much to load times. In other words, you can’t rely on responsive design to “dumb down” and speed up your site on slower machines or lesser resolutions.
  • Search Engines Like It – Google has actively supported responsive design as the best solution to going mobile, mostly because it makes the job easier for its crawlers. The webmaster guidelines for Google even address the issue saying, “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”
  • It Directly Affects Your SEO Campaign – Running a separate mobile site rather than simply adapting responsive design basically requires running two SEO campaigns for the same site. With the ability to design for all devices with one site, comes the ability to only have one SEO strategy for the site as a whole.
  • Most Sites Can Be Turned Responsive – This isn’t a hard and fast rule, but for the most part site owners don’t have to create an entirely new site design when they decide to create a responsive design. Instead, most sites can be converted, saving over half the total cost of a full redesign.
  • There Is a Lot of Testing – The main thing people forget to mention when they support responsive design is that designing for all devices means testing for all devices. Going responsive does save you time in the actual design process, but the best rule of thumb for responsive design is if you haven’t tested on a device, your site probably doesn’t work perfectly on it.

I fully predict responsive design to become the standard for all website design in the future because it simply makes more sense for the large number of site owners out there, especially those with limited resources who want to only manage one version of their site.

/0 Comments

How To Make A Responsive Menu That Looks Great On A Retina Screen

,

ResponsiveRetinaFriendlyMenu

Responsive websites are all the rage right now, but there are still a lot of common problems with implementation that need to be taken care of. One of the biggest problems is navigation.

Many websites have problems figuring out how to handle shrinking extensive navigation systems so that they can fit onto a smaller device’s screen, but the truth is, if you can’t minimize your navigation tools into few enough buttons to make easily usable on a smartphone screen, you already need to redo your navigation.

It’s true, some web sites need more menus and navigational options than others, but if you have more than two layers of drop down menus or more than seven or eight main navigational categories, you are statistically more likely to be suffering from bad website organization rather than running a sprawling media empire.

Codrops created a tutorial to help solve both problems, and it teaches you how to make an icon font at the same time, just for the sake of it! The tutorial teaches you how to make a more simplified, classy looking responsive menu that is retina-ready, making it perfectly up-to-date with all the current design trends. If you want a quick way to learn all the modern tricks, their tutorial has got it all covered.

/0 Comments

jQuery Mobile 1.3 Released

,

Jquery-mobile-logo

jQuery Mobile just released their newest version as a stable release, working to completely incorporate responsive web design into its library. According to Web Designer Depot, jQuery Mobile 1.3 comes with several new widgets optimized for mobile devices including smooth panel overlays, dual-handle range sliders, and two different options for responsive tablets.

The new panel widget opens up many options such as allowing hidden information to be displayed is a smooth, attractive way. There are three transitioning modes, all controlled by a swipe of the finger, or press of a keyboard.

One of the most notable new features of the list view is autocomplete. When searching for your criteria, you simply have to start typing and it will do the rest for you, just like Google’s search bar does.
jQuery has been a favorite for simplifying complex JavaScript tasks, but it has had difficulty bringing that to mobile devices, especially with their separate implementations for different platforms which confused many designers.

Many have wondered whether they should be using responsive web design or jQuery Mobile, but the new version makes it clear that their answer is simply to use both at the same time.

/0 Comments

Ten Infographics About Responsive Web Design

, ,

I believe pretty much every web designer that hasn’t been living under a rock knows what responsive web design (RWD) is, but for the few that might be unaware, responsive design is a technique that allows websites to have flexible layouts that change depending on the screen size of the device accessing the site.

I’ve already discussed the pros and cons of responsive design at length, but there is much more to know about the technique than simply what it is good and bad for. There is so much to know, in fact, that it can fill ten whole infographics, like the ones compiled by Jacob Gube at Design Instruct.

Of course, there is an infographic devoted entirely to simply stating the beneficial aspects of RWD, and the obvious infographic focused on explaining exactly what responsive design is in clear visuals. But, other infographics contain basic tips for RWD I haven’t heard elsewhere, or the numbers on how many people are moving to mobile devices and how our use of the web is impacting how people interact with web pages.

Enjoy the infographic showing you what exactly responsive design is below, and you can see the rest at Design Instruct.

Responsive Web Design Infographic

/0 Comments

The Problems With Responsive Design

,
Responsive_Web_Design

Source: Wikipedia Commons

The more we get used to using responsive web design, the more we learn its limitations. When it first came out, responsive design seemed like the hero web design has been craving since phones have allowed us to browse the internet practically.

They had some reason to think this way. Responsive designs solve all sorts of headaches that otherwise were only solved with creating multiple versions of the same web site. But, responsive design comes with its own set of issues.

Alvaris Falcon decided to dig into some of these imperfections of responsive design. Though he doesn’t discuss the normal “drawback” of responsive web design, if you could call it that, which is responsive web design doesn’t actually save you that much time, when you include testing and tweaking for the assortment of devices out there being used to access the page.

Instead, Falcon points out another way responsive design slows us down, or more specifically slows down the web page. Fast loading times are more important than ever, and studies show that users actually have higher standards for fast loading speeds on their mobile devices. However, responsive design isn’t great for quick loading.

Responsive designs have the benefit of offering all the content your regular website would, instead of a watered down mobile version, but all that extra information, combined with the restrictions of responsive sites, takes much longer to load than those light mobile sites. There are ways to speed the site up, however.

If content is slowing you down, you can start being selective about what you load on what device by using the conditional tag. You could also opt for engineered solutions to optimize loading times, such as Adaptive Images, which dynamically delivers scaled images to users based on screen size.

Some of the problems of responsive design stem from problems already rooted in using mobile devices. The change in screen size breaks advertising models, which can be extremely troublesome because inadvertent changes in ads can also break your contract.

To keep ads placed where they are supposed to be on a responsive site, you would have to change the resolution, which you are contractually unable to do. But, keeping them large makes the ads get shifted down the page causing problems with your layout, and possibly shoving other content or ads off the screen.

Some web designers are solving the problem with ad bundles they sell together, rather than selling single leaderboard style ads for desktop sites. Instead, they include many versions of ads exclusive to different device resolutions in a package deal.

Of course, there are more than just two problems with responsive design. Falcon has three others in his article, but I’m sure plenty of others out there have already found plenty of other limitations frustrating them. What other problems do you think responsive design has?

/0 Comments

Great Resources: Responsive Design Frameworks

,

Creating a responsive website design from the ground up can be exhausting and costly. Thankfully, for those of us without the time or money to completely build a brand new site, there are lots of frameworks or boilerplates you can use.

Chris Spooner from Line25 compiled a bunch of these free frameworks, from the most popular, Bootstrap which was made by the guys at Twitter, to some more obscure but helpful frameworks. They also all have the complicated grids and layouts prepared so you can almost completely customize them.

Responsive design has never been so easy.

/0 Comments

Responsive Design – Pros and Cons

,

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.

 

/0 Comments

Responsive Design – Which Approach Do You Use?

,

There is more than one way to do responsive web design. The most prominent seems to be adaptive web design, which is more rigid and structured because the elements of the site only change when reaching different breakpoints.

Just because bloggers and media specialists focus on adaptive web design doesn’t mean there isn’t another approach with merit. Both approaches have pros and cons, and both will help you more in certain instances.

Adaptive Web Design

The adaptive approach is best when used on sites that frequently go through design changes. Adaptive design doesn’t have to think too far into the future because adaptive designs require regular updates to make them optimized for the latest technology.

The approach uses breakpoints set with media queries as the only changing visual aspect. Usually, this results in about three different layouts, which provide a good experience on most platforms. The downside is along the outer edges of these breakpoints (for example if the range has a maximum of 620 px and the device used to access the content is 619 px) users will begin to have design issues.

The upsides to adaptive design are you don’t have to test it at every conceivable width to ensure it renders properly, and it makes sure the majority of users will have a good experience. Unfortunately, if you aren’t using the most recent and popular devices, you are more likely to have a problem, and it requires periodic changes to keep up to date.

The Fluid Approach

The fluid approach responds to different viewing widths allowing the design to create a suitable layout on nearly every platform. The viewers are able to get a good experience that is catering to the dimensions of their device, but for the designer, the fluid approach requires a lot of time spent checking the site at different widths to see where the design breaks.

The design doesn’t have a “true form”, but an ever-changing appearance molded to fit the needs of the viewer’s device. The ability to achieve this type of design comes from keeping all of the aspects of the site proportional. Everything is rendered based on the size the screen is viewed on.

The best part of this type of design is fluid designs are practically timeless. It is impossible to really predict what will happen in the industry in a few months, let alone years, but fluid designs have the ability to still look aesthetically pleasing on all devices for much longer than adaptive designs.

Conclusion

Both design approaches have their merits. Adaptive design is feasible to be able to make routine changes to stay current, and offers an almost universally pleasing experience with little testing. Fluid designs don’t require the regular updates of adaptive designs, but you will likely end up spending the same amount of time testing widths.

No approach is ever perfect for everything, but these two should keep you covered in most situations.

For more technical information about these two approaches, read Jamal Jackson’s article from 1stwebdesigner.

 

/0 Comments

Why Are You Redesigning?

, , ,

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.

 

/0 Comments

The 11th Principle of Good Design

,

Most designers are aware of Dieter Rams’ Ten Principles of Good Design, and, if you aren’t, you should definitely check it out. Rams created the entire visual language Apple is still using, and products he designed over fifty years ago are still being made today. He made the ten principles in 1970, when he decided he needed an objective way to criticize his own designs.

The list was originally made to critique physical products, but lately web designers have been using the principles for interactive design. While the list works wonderfully with interactive design, there is one issue stemming from how long ago the principles were established. In Rams’ time, there was no interaction design, UI, or UX. It doesn’t take into consideration the constantly changing software out today.

Fourty years ago, when Rams created the ten principles, designs were mostly for print or physical products, which rarely were updated. This is as far from true now as imaginable. That’s why Wells Riley, designer for Kicksend, has proposed an eleventh principle of design. 

Good Design is Iterative

Iterative design is flexible, and reduces the friction created from growth and change. It is common to think of every project with an “end date.” Designers usually consider themselves finished when they hand in a design, and get their money. Unfortunately, that manner of working will usually result in a total breakdown when it comes time to integrate new features.

Fixed, complex designs lead to complete disasters when it is time to update. Big companies have the money to invest to overcome this issue. Small companies, which normally need to update at a much quicker rate than huge corporations, can’t afford to not iterate on design just as quickly as engineers can code.

So how do you make an interative design from day one?

  1. Responsive Web – Responsive layouts allow pages to respond to different mobile and desktop browsers, which makes for much easier design changes. Sites using responsive layouts can make small changes constantly to continuously mold their entire product and brand image.
  2. Less is More – Designers love to build complex and interesting sites, but aside from possibly confusing visitors, these intricacies are also blocking fast updates from happening. Instead, stick with only what is essential. Minimalistic approaches to design allow for innovation. Think about Google’s front page. It is simple and clean, which makes it spectacular when Google Doodles show up to highlight an important day in history. If the page was cluttered with extra nonsense, the doodles would be harder to implement, and their effect would be severely diminished.
  3. Ship Every Day – Don’t ever let your design go stagnant. As any art student knows, there is always room for improvement in a design, and you should always be working on improving it. Use customer feedback and research, as well as your constantly growing knowledge of what is new, so that your designs grow at the same rate you grow as a designer.

The Ten Principles Rams set down 40 years ago are still an important way to critique your own designs, but, as with any list 40 years old, it needed an update. By adding a focus on iterant design, you will be able to criticize your own work objectively while making sure it works for the constantly changing field of web design.

 

/0 Comments