Articles
What's trending in our space

Head to Head Web Design: RESPONSIVE vs ADAPTIVE

Head-to-Head Web Design: RESPONSIVE vs ADAPTIVE

WWhen designing and building a website today, it’s essential for enterprises to think about how users will access their website - will it be from desktops, smartphones, tablets (or all three)?

Don’t worry, though, there’s still hope. We’ll break down the process and give you a few tips to help you separate the good from the bad to find the perfect web design firm. Let’s start with the obvious.

What’s not as clear to many, however, is the best way to achieve this state of cross-device compatibility. Two of the hottest approaches to implementing multi-screen websites are responsive Web design (RWD) and adaptive Web design (AWD), but there is a lot of confusion about the two. While some consider RWD and AWD to be competing, they are, in fact, complementary

What is Responsive Web Design (RWD)?

RWD is a design technique that results in websites being displayed properly on any screen size. The main idea behind RWD is that the HTML markup sent from the server is the same no matter which device or screen is requesting the Web page. The only thing that changes is the CSS and Javascript code that formats the content differently according to the screen size using CSS media queries. RWD uses a fluid grid concept where content is split into rows and columns with clear “breakpoints” that determines when columns are “breaking” and are displayed in a new row.

What is Adaptive Web Design (AWD)?

AWD is a technique to design websites that are optimized for the device, screen and the user by leveraging server side technology, CSS and Javascript. In AWD, the server sends a completely different version of HTML/CSS/JavaScript to the browser by detecting the User Agent to determine if the request is coming from a smartphone or a desktop.

The best way to determine if a site is using AWD is by first checking that it is not responsive using the method outlined above, then accessing it from a smartphone browser (or using a user agent switcher) and checking to see if the site adapts to the smartphone without changing the URL in the mobile browser address bar (e.g. not redirecting to an m.domain URL).

Which Approach is More Popular?

RWD is by far the most popular approach today for building multi-screen sites and is much more known than AWD. There are some good reasons why RWD became so popular:

  • Designers only need to change the HTML/CSS of the site in order to implement RWD. Any front-end developer can do that regardless of which backend the site was built on.
  • As a result of being so accessible, there were many ready-made responsive themes and frameworks developed. That spans from WordPress themes to CSS frameworks like Foundation and Bootstrap.
  • Designers don’t need to update their code when new devices are rolled out since responsive design only “cares” about the screen size and the “responsiveness” is achieved using CSS media queries.
  • From a pure design perspective, designers typically don’t need to think too much as the RWD concept is based on rows and columns in a grid with clear “break points.

The Advantages of AWD

While RWD is very popular, it has some drawbacks that AWD resolves. The biggest advantage of RWD is also its main drawback, however - the exact same HTML, JavaScript and CSS files are being sent to the browser in every use case. The more complicated a desktop site is, the more difficult it is to use RWD while still providing a good customer experience to mobile users. This includes both the performance and the design aspects.

Performance of the site deteriorates over mobile because every heavy JavaScript file a designer didn’t notice when browsing from a desktop site becomes another 2 seconds of load time over 3G.

Design of the site also becomes problematic because it’s often very difficult to take a complex layout designed for 1200 pixels width and adapt it using the same HTML to a 320 pixel smartphone screen.

With AWD, on the other hand, designers can send only what’s needed to the browser in order to provide the best user experience. It can get rid of resources that are not needed and can make sure the HTML is optimized to the screen.

Another advantage of AWD is that designers and developers can think beyond screen size and add in other factors that the server can use when outputting the site markup, such as location, device capabilities and more.

It is interesting to note that most relatively simple websites like blogs, even popular ones are using RWD, while more complex sites like big news publications, and big e-commerce sites like Amazon and eBay are using AWD or a combination of RWD and AWD.

Combining RWD and AWD

Do these two approaches contradict each other?

Absolutely not. Websites can use RWD techniques and combine it with AWD whenever it makes sense. This approach can help designers and developers enjoy the best from both worlds - the simplicity of RWD when writing new content and knowing it will always be “responsive,” while still optimizing the overall site layout and structure using AWD server-side scripting.

How to Select a Web Design Firm

WWhether you’re an entrepreneur with a brand new idea or you work with an established brand looking to improve, finding the right development partner is a critical step in the success of your web project. The good news is you’ve never had more options. The bad news is it’s never been more difficult to find the right one.

Don’t worry, though, there’s still hope. We’ll break down the process and give you a few tips to help you separate the good from the bad to find the perfect web design firm. Let’s start with the obvious.

  1. Check the Portfolios

    I probably won’t need to work very hard to convince you to begin the selection process by looking through vendor portfolios. You’ll know very quickly if the firm’s design aesthetic and messaging moves you.

    There are other details you’ll be able to pick up on the vendor sites, though. Subtle but important details. How long the firm has been in business. Whether they build business systems or simply churn out brochure sites. Who they work with. Et cetera.

    Don’t get too caught up in what the site tells you, though. Firms like to include logos of well-known companies. That doesn’t always mean they’ve worked that closely with them. In some cases, it just means someone on the team has worked with them at some point in their career. In other words, expect a little peacocking. Pay more attention to actual site links and case studies.

    Don’t be discouraged if everything in the firm’s portfolio seems bigger and higher profile than your own project, by the way. It’s human nature to showcase trophy work. You can be a little concerned, though, if everything in the portfolio is smaller than your project.

  2. Get in Touch

    Again, I’m not giving away any secrets here. Your next step is probably going to be to send the firm an email. It might be tempting to just pick up a phone and call in, but providing some details in an email gives the firm very important context. It also gives you a great chance to test both the firm’s responsiveness and their interest. That initial reply will speak volumes.

    The right team will ask to set up a call. Distance shouldn’t matter, but attentiveness definitely does. The team should ask to hear your requirements firsthand, learning more about you and your project. You’ll have your chance to learn more about them as well, but the most telling quality in a potential development partner is their ability to listen. They should be asking about you, not going on about themselves.

  3. Ask About Communication Tools

    Some of the most important aspects of a potential partner’s services probably won’t be spelled out on the firm’s website. They won’t be part of the firm’s elevator pitch. This is where you begin to separate the pros from the hobbyists, though.

    The main thing you’ll want to know is whether a project manager will be involved to keep the project on track. It’s simply not realistic to produce a large web project without a project manager, but smaller projects benefit greatly as well. Don’t think of this as an added cost. The hours a project manager devotes to scheduling and defining will be made up in spades.

    Ask what tools the firm uses for project milestones and collaboration (e.g., Basecamp). This should be a quick topic, but it’s incredibly important. Answers to these questions will let you know both how organized the firm is and how involved they want you to be in the process.

  4. Beware of Unnecessary Steps

    Okay, grab your snorkels; we’re going under the surface for a minute to look at a few hidden services that can have a huge impact on project cost.

    Lengthy discovery processes, user testing, wireframes, etc. will all add tangible time and cost to a project. The value of these added steps, however, is hard to weigh.

    If a firm can demonstrate they consistently pull off complex projects without working through these extra steps, they’re going to save on time and cost to ship. Ask the firm if they’re able to work within tight timelines even if you have a little time to spare. A confident, rapid deployment team makes a great development partner.

  5. Make Sure They Understand Business Objectives

    At this point in your selection, you’ll know if the firm understands design and code. You’ll know a bit about their project cycle and workflow. The next thing to uncover is whether the firm understands what it takes to make a website successful. Sadly, this is where most firms are sorely lacking.

    The right team will ask questions to make sure they understand your goals. Once your business objectives are clear, the firm can set up key performance indicators to measure against goals that tell you how well your site is performing.

    Business objectives won’t be mapped out in the initial phone calls, but it should be clear that the firm understands goals and knows how to make them measurable.

  6. Ask for a Proposal

    An interested firm should be able to give you a set cost for your project. If it isn’t already clear, ask if the quote is Fixed-Bid or Time and Materials.

    A Fixed-Bid Proposal will take the most work for a firm to put together but will result in the least chance for surprises for you. A Proposal will focus on the Scope of Work, so ask the firm to explain their hourly rate if it isn’t clear.

    A Time and Materials Estimate or Evaluation will focus instead on the forecasted development hours. In this case, you’ll need to make sure you understand exactly what the firm is detailing.

    Regardless of whether the firm is Fixed-Bid or Agile (Time and Materials), you need to make sure the proposed budget guarantees a finished product.

    Comparing quotes is hard. Many of the details we’ve discussed up to this point can be multipliers in a proposal’s value, so simply comparing numbers is not enough. Don’t be afraid to circle back and clear up or reconfirm anything you’re unsure of.

  7. Check References

    This step can be quick. Ask for a few references and send them an email. The firm is going to give you contacts they know will talk them up, but simply knowing they have a few clients willing to do so is comforting. Just make sure a few of the references line up with the clients in the firm’s portfolio so you know you aren’t talking to poker buddies.

  8. Consider Personalities

    This is a professional relationship, but launching a website is very much an emotional endeavor. You’ll be working very closely with the team you choose, so you need to feel good about it.

    You want a team to challenge and even push you in constructive ways. You want them to have a personal attachment, to care about your success. And you want them to be reliable, reasonable and fun.

    A simple question to ask yourself is: if these were your co-workers – and in many ways they would be – would you enjoy working with them?

  9. Repeat as Needed

    If you’ve been through the steps and things aren’t adding up, don’t be afraid to move on and look elsewhere. Selecting the right firm is simply too important to rush into blindly. Few other vendor relationships will have such a dramatic impact on your bottom line since your website affects revenue, not just expense.

    When you find the right firm, you’ll know. They’ll have a confident story and plenty of visible experience to back it up. It’ll feel good to make the decision. You don’t have to celebrate just yet, but feel free to throw a fist pump into the air or high five a stranger.

    When you get it right, it’s a fun and rewarding experience.

    Good luck!

Reference

http://electricpulp.com/notes/select-web-design-firm/

About Electric Pulp

Electric Pulp is a full-service interactive firm focused on implementing mission critical solutions on rapid timelines. The creative, nimble team has been helping clients succeed online for nearly 20 years.

Web Site Design

DFX Web Site Design

WWhether you want a new site or a tune-up on an existing one, Design FX, provides you strategic, fully customized site design and works side-by-side with you from start to finish. Beginning with a detailed assessment of your web design requirements to the publication of a comprehensive solution; as a result, your site will be one that truly reflects your personal vision and accurately meets your business needs.

We have the experience and know-how to work with your page text to ensure that your message is properly conveyed, to both grab and retain the reader's attention, while optimizing your pages for a prominent SEO ranking. We create more than websites, we create an interactive user experience through the art of presentation with easy-to-use navigation, attractive graphics, and professional animations.

Our professional website designs are created using the best of the cross-browser compatible options available, and each design is carefully coded to ensure compliance with the latest web development standards and design practices. We will structure the navigation, organizational layout, and content of your site to maximize ease of use. To ensure that your visitors will be able to access information quickly, easily and without confusion we address usability issues (ADA compliance), target market, interface protocols, user psychology and restructure offline information for the online medium.

Apps: The World Has Gone Mobile

DFX Apps: The World Has Gone Mobile

WWith in application purchases making up 76% of a $53B market in 2013, and expected to expand to $153B by 2016, customers are using applications on their phones and tablets1. They are shifting how they utilize their buying power. Are you ready to educate customers about your brand, or provide a rapid way to interact with broader markets? Let's customize your business strategies into an application that transforms your capabilities.

Application Development

IC++, Java, Python, assembly language, Visual Basic, Basic Stamp, ABC, Alice, GML, JavaScript, Perl, SQL

Platforms

Google Android SDK, Apple iOS, Microsoft Windows Developer, Blackberry Developer, Tizen OS Developer, UNIX Developer, Linux Developer, Microsoft Windows Developer

1 http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website.

Elsewhere

DFX Proudly Accepts

Our Location

Call Us
      800.928.1367 toll free
      916.330.4700 voice
      916.292.8030 fax
 
Office
      4944 Windplay Dr
      Suite 200
      El Dorado Hills CA 95762
 
E-mail Us
 
Design FX, LLC | Better Business Bureau A+ Rated