Posts

Responsive vs. Adaptive vs. Fluid Design

The world of web design has changed quite a bit over the years and continues to evolve as mobile-friendly design becomes more of the rule rather than the exception. When it comes to choosing the right layout for your website, there are a number of factors to keep in mind including style, typography, imagery, user experience, performance and online ranking just to name a few.

It used to be that sites were built with fixed dimensions — that were meant to be viewed on a desktop screen only. Now there are variations based off this original idea to make room for the influx of mobile users. Your users are demanding to view your site — not only on a computer screen — but on a tablet or a mobile phone. As a result, three popular considerations for web page layout are: responsive, adaptive, and fluid design. While each of these web designs has similar features, they each have their sets of pros and cons.

Defining The Different Types of Design Types

Responsive: websites are built with media queries that target more general break points that scale images, wrap text and adjust layout accordingly. This is my prefered strategy when building websites.

Adaptive: websites are built with media queries that target specific device sizes (e.g. iPhone, iPad, Android, etc). One of the problems with an adaptive layout, is that as new devices get introduced your code will need to be updated. Which isn’t ideal.

Fluid: websites are built using percentages for widths. The concept of fluid design was being used way before Ethon Marcotte coined the term “responsive design.” It’s pretty safe to say, that fluid design evolved into responsive design.

Fixed: websites are built using fixed pixel widths. While a design with fixed dimensions can sometimes be the quickest way to get up and running, it’ll provide a less user friendly across multiple devices.

Diving in: Responsive vs. Adaptive Design

Responsive web design (RWD) is what is recommended and rewarded by Google. The search engine continues to change its algorithm to include the growing number of mobile users and take into consideration how a mobile-friendly site should and does rank higher than those that are not responsive. A responsive design can help ensure that your website provides both a good user experience and adequate load time when viewing on a phone, tablet, or other mobile devices.

However, many web designers and developers have debated whether adaptive web design (AWD) edges out responsive, especially for older sites that already have a strong domain and web history. Think about it: it wasn’t that long ago that we designed solely for desktop. As new mobile devices are created and different screen widths and resolutions become a factor, it’s important to be able to go back and make an existing site mobile-friendly rather than starting over from the beginning. Adaptive design allows for this.

AWD uses a series of static layouts and detects the screen size to load the layout to fit however it’s being viewed. Typically, there are six common screen widths that cover the different ways that a user might view a website. Although creating multiple widths for the design of one website might seem like extra work, in some cases, in can be better for the overall performance and display.

The benefits of an adaptive site is that you can measure which views and resolution options are performing best and alter design and development for the sizes that are getting the most online traffic. For example, if your site drives the majority of its traffic through desktop, than you’ll want to make sure that you’ve addressed all constraints such as site speed, usability, aesthetics, and media load time (when applicable) that a desktop user might experience. You can still add views for different types of mobile devices, but with adaptive design, efforts can be based on what is top priority.

Alternatively, the benefits of responsive design are that it takes far less work to build and maintain. It’s applicable for all screen sizes and will adjust accordingly. While responsive design is fluid and will adapt to the screen no matter what device you’re viewing the website on, this type of design is far more complex and can create issues depending on the amount of content and media on the site. This may slow load time and ultimately, hinders the user experience.

The designer must keep in mind the widths of images and different features that will appear differently when automatically “resized” as a person changes their view from mobile to tablet to desktop. In each case, it’s important to perform testing and QA on multiple devices. For new sites, responsive would be the easiest way to go, but for sites that already have a desktop build, adaptive would most likely be a better option due to its ability to retrofit.

How Fluid Design Compares

A third option is a fluid design, which has the same adaptability as both a responsive site and an adaptive site. Fluid design doesn’t use fixed units, as with static sites, but rather uses the same percentage of space no matter what screen you’re viewing the site on. It’s able to fill the width of a page, but this can create challenges depending on the size of the browser.

Say for instance you’re viewing a multi-column web layout on a smaller screen, like a mobile phone or a tablet, the content may seem to be crowded within the page. Or, on the opposite end of the spectrum, if you’re viewing on a large desktop or a smart TV for a presentation, the content can look stretched. The styles and features of a website will affect fluid design and may affect the amount of whitespace seen depending on what size screen you’re viewing the website on.

The benefits of fluid design are that it’s user-friendly because it adjusts to whatever device the viewer is looking at, same as responsive design. It’s definitely an improvement over a static design; although some designers might still argue that it doesn’t allow for as much control.

What to Consider When Choosing a Website Design

With so many similarities between these three types of design, how do you know which is best? In today’s business world, a person’s website might be the first point of contact that a consumer has with your product, business, and/or brand. This means that if the user experience is poor, it doesn’t leave a good impression to continue the business-to-consumer relationship. That’s why when deciding on which design is the best fit, your audience is the most important factor. Who’s viewing your site? Who do you want to view your site? And, what kind of device are they viewing your site on? These are some of the questions that you and your team need to analyze and then strategize for when developing a new site or altering your current one.

This information can be found through Google Analytics or even through basic focus group testing. If your analytics show a high bounce rate, your site might be loading too slowly, may not be aesthetically pleasing, or it may not have resized to their screen size. This way you can see which areas cause a person to leave your site.

The second thing to consider is whether you will be building a brand new site or working with an existing site. Most new sites are being built with responsive design, which is advantageous, again because of the increase in mobile traffic. Older sites can still transition to mobile, but may best do so by choosing an adaptive design.

Third, it’s a good idea to project your goals. The time it takes to launch or re-launch a website depends on the amount of design time and optimization necessary to make your site fully functional across all mediums. It also requires the strength of a good development team who can code accordingly and across multiple layouts.

Then, of course, there’s the importance of considering how a site design will affect your search engine optimization goals. How much content will you be placing on the home page? How will the navigation be designed to benefit user experience? What resolution do images need to be? Will there be video?

No matter which design you choose, know that every designer will have a slightly different take on why responsive is better than adaptive or why fluid is equal to either of the two. The key goals to keep in mind are: desired functionality, adaptability to mobile, and the overall user experience.

How Much Does a Website Cost These Days?

Launching a new business involves many details, and at some point, you will start to think about your online presence. You need a website, and not just any website, but a fully functional site that includes some form of email capture, and enough branding to tell your story. Accomplishing these goals, however, comes with a price tag, and you may start wondering how much does a website cost these days.

The majority of customers — 61 percent — are researching products online. In fact, 12 billion searches are taking place each month in the United States, making a high-quality website very important. But once you start asking for quotes, you’ll likely discover that they vary greatly. You may receive one quote for $2,000 and another for $20,000.

So what is the difference, and what’s involved in the actual process of building a website?

Breaking Down the Costs

Many web designers will explain that pinpointing the exact cost of a website project is difficult. This is mostly because there are so many different variables involved, with no two projects being identical. For example, what kind of functionality and features do you need? Is it an e-commerce site? Do you need a blog? Do you already have content created, or will you need to have it written during the design process?

You may be figuring out these answers as you go along, which is totally normal, but it’s also helpful to have a nice little starting point to build off of. Getting a general sense of what’s involved in the process, and a ballpark cost for each task, will help you estimate your overall budget and solidify your project requirements. Here’s an average cost breakdown.

Domain name. One of the first tasks on your website development list is purchasing the domain name. Costs vary, but you can expect to spend around $10 annually.

Website hosting. Your website will need to be hosted, which basically involves a company selling you space on its server to store your website data and files. Costs vary, but you are looking at about $10 to $100 annually.

Premium theme. If your developer is building your website in WordPress, you may need to invest in a premium theme. Costs differ based on the specific theme that you select, but you will likely be paying a $50 to $200 one-time fee for a beautiful looking theme that you can change up to fit your specific needs.

Website planning, design and development time. This category is a large chunk of your overall budget, and also where you’ll get the most variation in quotes. A site can take anywhere from 1 to 1,000 hours to complete; and expect to pay anywhere from $25 an hour (professional in developing company) to $150 an hour (or more). Keep in mind that you pay for what you get, but price alone won’t indicate quality. It’s a tricky dance.

Images and graphics. Your website will need graphics to liven up all that white space on the page. Basic stock images cost around $10 each, while higher-end images may cost you hundreds of dollars. While many stock image options have improved, sometimes its best to invest in custom images that fit your unique brand.

Content creation. Will you be writing content for your website, or will you need outside expertise to develop the pages? If so, budget at least $150 per page of new content.

Other Factors That Affect Costs

Sometimes, you just need a basic website to get your business off the ground. Other times, the functionality you need is more advanced, such as e-commerce capabilities or special programming. Here are a few additional costs to factor into your budget.

E-commerce shopping carts, catalogs and payment processing. If you need this functionality, plan to pay anywhere from $1,500 to $5,000.

Maintenance costs. It’s also important to think about the future of your website. Will you maintain the website in-house or seek outside assistance for maintaining the site?

What happens if the site 404s at 2am, who’s your developer 911? Put aside some budget each month for mainenance — factor it into your costs (maybe anywhere from $250 to infinity).

It’s also important to consider the benefits of a responsive design, which automatically resizes for mobile devices and tablets — an increasingly important feature as more and more people access websites in this way. Also, factor in your needs for multimedia elements. For example, do you plan to feature video on your site? If so, include this requirement when requesting a bid.

Total Cost Ranges

At this point, you may have a general sense of what’s involved in building your website and what pieces need to come together, but what should you budget for total cost? Here are the general price ranges. They are complete estimates that you might just use as a rule of thumb:

Basic website — This level will allow you to brand and market your company, showcase your products and services, and use the site as a lead-generation tool. However, it may not have two-way functionality and features such as a blog or social media tools.

Price range: $2,000-$10,000+

Advanced website — You have all the components of a basic website, but you maybe also have something extra like a super-duper fancy design layout, e-commerce (so that you can sell products), or some optimized conversion considerations (like A/B testing, and deeper analytics for your email capture).

Price range: $7,500-$30,000

Custom website — This is suited for a large business with complex Web development needs, including social networking, blogging, e-commerce and other Web applications.

Price range: $15,000-$100,000

Taking the First Steps

The best way to get started with building a website is to work to define the project scope. List what your website “must have.” What items do you need that are nonnegotiable? Then, list your “nice to have” items. Present these items to developers to get bids on the project, and based on their estimates, you can add in — or take out — some of the nice-to-haves in order to make the project work with your vision and your budget.

By defining specific requirements upfront, and ensuring that you select a developer that is equipped to deliver to those specifications, you’ll ensure that your vision and desired outcome are achieved and there are no surprises along the way.

What is a 404 Page?

Okay, quick lesson. When you go to a link on the web, or visit a site on the web, you’re telling a server somewhere to send you a page. A server is basically the same thing as a site. For example, when you go to twitter.com you’re telling the Twitter server that you want to see their home page.

Every time you talk to a server, it’s called a request. The server then sends you back a page as a response. That whole system of communication is called HTTP (which is why the full URL is http://twitter.com). It’s like this:

  • You: I want the page at twitter.com
  • Twitter’s Server: OK! Got it for you.

or

  • You: I want the page at twitter.com/person-who-doesnt-exist
  • Twitter’s Server: Uhhhh, what? I don’t know who that is. Sorry there’s no page for you.

Each response is sent to you with a status code. Status codes are three numbers like 200, 404, 500, and 301. Normally you don’t see the status code, because it’s something your browser (Chrome, Firefox, Internet Explorer *shudder*, or whatever) hides from you.

404 — means not found. Basically, you’re looking for a page but the web application you’re talking to has no idea what you’re talking about. This is almost always what happens when you try to load some random page that doesn’t exist, like www.google.com/sdflkjasdflwjks

What are some other important status codes?

There are literally dozens of status codes, but only a handful of really important ones:

200 — means OK, you got your page and everything’s good. Like when you visit www.google.com.

301 — means permanent redirect. This happens a lot without you realizing it. For example, when you go to facebook.com, you’re actually redirected to www.facebook.com, so your first request gets a 301 response telling your browser to www.facebook.com, which then gives your browser a 200 OK Status.

401 — means unauthorized. That happens when you try to load a page that exists, but you’re not allowed to. Like if it’s an admin page that you shouldn’t be able to access.

500 — means internal server error. Basically the application itself fucked up somehow. This is usually code error somewhere. They often look the same to you as a user, but there’s a major difference from the developers perspective.

There’s tons of others, but the basic rule is:

  • 1xx means informational (I’ve never actually seen this though, so don’t worry about what it means)
  • 2xx means success
  • 3xx means redirection
  • 4xx means a browser error — like you’re trying to load a page that doesn’t exist or you shouldn’t access. Basically it’s your fault usually.
  • 5xx means a server error — like the developer fucked up somehow.

Don’t worry, you’re not expected to memorize any of them. There’s a whole list of them all and what they mean on Wikipedia (http://en.wikipedia.org/wiki/List_of_HTTP_status_codes) in case you’re interested. Again, don’t try to memorize them. Did all of this make sense? Ok, good. Otherwise, post a question below.

P.S. Want to see some awesome 404 pages? Here are some of our favorites:

What is your favorite 404 page? Leave an image or link down below in the comment.