Understanding Responsive Web Design (And Why It Is the Norm in 2019) [Overview]

Responsive design

Your company website is your calling card – it is very likely the first impression anyone will have of your business, and that will determine if they engage or even stick around. It stands to reason that making it appealing and easy to use should be your number one priority.

 

 

Responsive web design will ensure your website caters to your visitors by making the experience pleasant, functional, and useful.

Your website’s ability to address user needs in 2019 will make or break your business.

 

What is this responsive web design thing I keep hearing so much about?

 

Responsive web design is the internet’s answer to the changing browsing trends that began many years ago with smartphones and tablets. There is no longer a standard screen size, which means that the content displayed needs to adjust itself to whatever dimensions the user has.

Basically, responsive web design is giving websites the ability to adapt to the needs of visitors instead of making the experience more tedious for them.

 

 

No serious business should dismiss this as a trend or consider it some sort of an added bonus. This is the new standard. By now, responsive design is a vital part of the website development process. It is not a matter of staying ahead of the competition anymore, as failing to implement it will put any company at a complete disadvantage.

Think about it: mobile accounted for over 50% of usage worldwide in 2018. That means most people are using their mobile phones to browse the web, and they expect websites to adjust to their needs, not the other way around. Your website needs to be prepared to match their expectations or risk losing traffic.

The same applies to tablets, and even desktops, as many users may choose to run their browsers at smaller sizes for comfort or taste.

Originally coined by Ethan Marcotte back in 2010, the term has long taken a life of its own, becoming as commonplace a part of the development lingo as HTML or CSS.

Responsive web design is about putting users first, making the experience smoother for them, and should be considered the norm in terms of web design approaches.

 

How does responsive web design work?

 

It is not magic or rocket science. It is all about two main components: fluid grids and media queries.

In the past, websites were designed with rigid pixel numbers across each page, also known as fixed width layouts. Everything had its size and place in the grand scheme of things, and it would not change for anything. With the shift in trends and diversity of screen resolutions in use, the idea to create layouts more flexible and adaptive gained strength. Fluid grids are precisely that: a way to maintain proportions regardless of how the page size changes, granting all the content – text, images, forms, links – the capacity to change simultaneously in order to maintain the visual balance. The code adapts based on the data it acquires from the user, which it does through media queries.

Media queries are responsible for obtaining specific information about each visitor so that the CSS can be adjusted under those parameters. Essentially, they gather data and use it to condition style sheets so they offer optimal results for each individual user.

 

 

The ability to transform your website into a gateway that is comfortably open to visitors with different screen resolutions is less a matter of complex technical knowledge, and more about strategic implementation in order to prevent performance issues and optimize results.

As long as those responsible for implementing the responsive web design into the pages understand the more common and finer points of layout and performance – such as breakpoints, fonts, object nesting, type of platform used – there should be no problem creating a flexible interface that appeals to all visitors.

 

How big a deal is it? Does it really matter if I implement a responsive web design?

 

Yes.

If you walk into a store and everything is in disarray, you can’t find anything, and things are inaccessible, how likely are you to buy anything? Or even stay there for too long? That is what it feels like for users using, say, a mobile phone or tablet reaching a website that is designed strictly to display on desktop resolutions.

The assortment of tools and platforms available to surf the web in this day and age is so vast that the only way to appeal to everyone is to make sure your web design can quickly adapt to their needs.

There is a reason why responsive web design has been the standard for the past few years, and failing to acknowledge or understand this can create issues with traffic and engagement.

 

Make sure your company website has a responsive web design implemented.

And, if it doesn’t, we’re here to help. Feel free to reach out.

Choosing the Best CMS For Websites in 2019

O8 Content Management System

In order to improve the experience of handling the information stored on your website you need a Content Management System (CMS) that fits your business needs and automates the process to optimal levels of efficiency.

Choosing a CMS for your website is one of the most important decisions your company will make in terms of web design and development, not only because each one requires specific experience and mastery of detailed skills but also due to the very complex and time-consuming web development effort necessary to change it once you’ve had it implemented for an extended period.

The exponential growth evidenced year after year in the digital landscape signals that 2019 will be a crucial year for websites to employ successful content administration in order to stand out and make the user experience (UX) smoother, intuitive, and useful for visitors.

These are the things to take into account when choosing the CMS that will power your website this year:

  • Category of Content Management System
  • Needs of Your Team
  • Which Content Management System?
  • Available Support

Reviewing CMS Categories

Content management systems are usually divided into two distinct categories:

On-site CMS

This means the CMS is installed on your own servers and your team has absolute control over every single aspect, from security to encryption to the entire display architecture.

This is the more efficient but complex and costly alternative. Even if you choose a CMS that’s open-source and free, your team will still need to tackle every single issue and bear the costs of upkeep. This also means your team needs to be comprised of professionals knowledgeable in the chosen system.

However, by installing the CMS directly on your server, your team will control every detail, which means content will be managed faster and up to any standards set by the company.

Any serious business should consider on-site content management systems in order to ensure the best results for their efforts.

Software-as-a-Service / Cloud-based CMS

By housing your CMS outside your server – whether it be a cloud or software stored by a third-party – your team will lose a lot of decision power and control over many aspects of the entire content management process and infrastructure.

While the level of input surrendered will vary, several key areas of work such as security, encryption and in some cases display options will be supervised outside your company’s locus of control.

This option means reduced costs and softer requirements in terms of experience, but given the lack of flexibility should only be considered by beginners or individuals and not serious businesses.

This is the first decision your company should make in terms of how to proceed. Given the complexity of the issue, it is crucial that management and the decision-makers involve the entire team in the process. After all, the developers are the ones who will be managing the content, the marketers the ones who will use the content to drive traffic, and the sales team the ones who will need to use that content to convert customers.

For large or medium businesses, an on-site CMS is the logical step. However, that still leaves the company with a large number of options that beg proper consideration.

That last point is the main reason to establish a list of priorities and needs from every department.

Needs of the Team

The CMS will have a significant impact on the cross-functional work carried out by the developers, but also the tasks and goals of all customer-facing departments, such as marketing, customer support and sales.

Now, more than ever, with the increasing number of options available in 2019, choosing the right CMS should come down to in-depth consideration for the needs of all involved teams.

It’s imperative for management to compile a list of things every department considers important for the CMS, then develop a matrix that will establish priority. By organizing the process like this, the decision-makers can actually assess and compare all the alternatives and choose the most effective option.

A simple matrix can help organize ideas, see which points overlap at least partially, and help reach a compromised but efficient decision.

 

These are a few of the things the different stakeholders may want to weigh in on:

  • Is the visitor-facing layout easy to navigate? Are there plenty of themes and visual alternatives available? How much control will the company have over the “look and feel” of the website?
  • Is the back-end management and upkeep intuitive? Do current company developers have the experience to optimally use the CMS, or will training or new hires be required?
  • What are the costs? What kind of investment is planned in terms of choosing a CMS? Which alternative is the most cost-effective?
  • How flexible and scalable is the chosen product?
  • Is the CMS open source and backed by a large and healthy community of supports consistently creating features for the product? What kind of plugins and add-ons are available and how much do those align with current company goals and tactics?
  • How compatible is the CMS with modern browsing?
  • What kind of integration options does the CMS have? Does it work seamlessly with apps and software the company will need to use on the website?
  • Are there outside factors to consider, such as potential relationships with a specific company that develops a CMS or even clients that may have a preference? Should these corporate politics be taken under consideration?

Creating the matrix will allow stakeholders to rank their needs and establish quantitative priorities that can be used to choose the best CMS based on a balanced compromise.

Which Content Management System?

Once the company has established a list of priorities in terms of what it actually needs, the decision-makers can proceed to compare them against available options in order to choose the most appropriate one.

As mentioned before, any serious business should lean in favor of on-site management in order to ensure the best possible results.

One of the most important factors mentioned among the typical considerations is whether or not the CMS is open source.

Open source means the code is openly available to the public at no cost, which in turn leads to a large number of third-party developers creating interesting features that can be integrated to the original product. Even if the company who originally created the CMS goes out of business, the product will continue to be viable due to the network of outside support that can sustain it, which means the product will most likely remain in a state of continuous improvement.

So, which one to choose?

If your company intends to have a strong web presence and present a smooth UX to visitors, there are two main open source alternatives that need to be considered:

  1. Drupal:

This is considered the best choice for highly advanced and secure websites. This CMS can easily tag, organize and categorize content, but it requires a greater degree of expertise to properly operate and take full of advantage of its ability to create rich and complex pages.

It also comes backed by several features, both inherent and third-party, that can help improve your website in a number of areas, such as:

  1. Search Engine Optimization (SEO)
  2. Conversion Rate Optimization (CRO)
  3. Auditing capabilities that can help boost website performance
  4. Multilingual translation support
  1. WordPress:

This is the most popular choice by far, powering over 30% of all websites worldwide. This open-source CMS is widely considered the most intuitive, efficient, and easier to install alternative, with a large community of supporters constantly creating third-party integrations that increase the number of features.

While there are several other alternatives out there, these two are the open source leaders in the field, and for good reason. The available features, ranging from usability to security, combine to create the best results in terms of user experience.

No doubt the matrix of needs will come into play when making the final choice, but the decision must be taken carefully and with no rush given its magnitude and impact on the overall operations of the business.

[For a more in-depth comparison between the two, please visit our post Drupal vs Wordpress: Best CMS in 2019]

Available Support

Finally, remember that regardless of which CMS you choose to power your website in 2019, you’ll need to be constantly vigilant and ready to face any potential issues that may arise.

Be sure to grant your developers the necessary freedom to do their work and continue learning, as they will be your first line of defense should anything go wrong.

Likewise, you can consider employing the services of third-party experts that can provide 24/7 support at a fraction of the cost involved in hiring a full team of developers.

All these options are equally viable, as long as your company has plans in place to address obstacles, issues or even critical mishaps.

We are Origin Eight

We are seasoned web developers who understand that website endurance depends largely on a functional structure, a smooth design and effective content management. We know how to make sure your visitors will want to stay and engage. We will work tirelessly to help you:

  • Build a professional website
  • Audit your current website for issues with performance
  • Guide you every step of the way in your website redesign
  • Create a user experience that impacts, persuades, and creates value
  • Ensure your website is efficient, powerful, and beautiful
  • Boost your business by creating a website that works
  • Provide 24/7 support for all your CMS needs

Contact us for more information or browse through our services to find out how we can help you.

Categories

Joseph

Joe is a strategic communications professional with a decade of experience in public relations, public affairs, lobby, digital marketing, and media and stakeholder engagement.

He has worked both in the public and private sectors in a variety of roles ranging from journalism and brand strategy development in large industries such as banking and consumer electronics, to film production and written content generation.

Team

Responsive Images And Faster Downloads in 2019

Responsive Images And Faster Downloads

It's 2019, and providing good user experience around images has never been more challenging. It's one of the most elemental components of functional web design. With high-resolution screens and lots of mobile devices at various browser sizes, developers need to tackle a fundamental tradeoff between a fast user experience (smaller images) and a high-quality user experience (larger images). Luckily - like imagecache/image styles before it - the Drupal community has developed a tool that makes this challenge much more manageable: the Picture module.

But first, let's review what functionality we want around the display of images:

  • Minimize bandwidth demands on the visitor
  • Provide images of a resolution appropriate to the visitor's device
  • Tailor scaling, cropping and other processing (image styles) to screen size

In other words, we want to both maximize performance and ensure high quality art direction on our sites. Luckily, new HTML techniques - srcset and picture - have been advanced to provide the sophistication needed to meet these needs. The details of how these work are outside of the scope of this article, but you can find lots of background(link is external) articles(link is external) if you're interested. Suffice to say that the picture element provides multiple image sources to the browser, along with instructions regarding which to load for the visitor. The browser then only downloads and displays the appropriate image source.

The Picture module(link is external) takes care of all the low-level mechanics for you. It works extensively with two other modules: core's Image Styles and Breakpoints(link is external). The high-level steps are as follows:

  • Decide the screen widths at which your site's design will change in a responsive manner (breakpoints)
  • Identify the art direction needed for images on the site
  • Create image styles that provide the proper art direction and resolution for each width (image styles)
  • Map sets of image styles to breakpoints (picture mappings)

Breakpoints

It's worth reading the documentation(link is external) on breakpoints, especially the warning(link is external) about how to order them. The process is a little picky. This step codifies the "what" you are responding to in your responsive web design. These are generally the same widths that your theme already has in the form of media queries in its CSS. Deciding on breakpoints is also outside of the scope of this article (and somewhat dependent on your theme's design), but let's just use these as an example:

  • wide: (min-width: 1200px)
  • normal: (min-width: 979px)
  • narrow: (min-width: 768px)
  • mobile: (min-width: 0px)

Breakpoints are set at Admin menu > Configuration > Media > Breakpoints. Make sure to check the multiplier checkboxes - ie "2x" - that you want in order to serve higher resolution images to devices with "retina" style screens. Once set, save your breakpoints to a group.

Art Direction

Art direction is another subjective question that mostly depends on your theme and content needs. Art direction is a term that covers all of the visual choices you make about presenting images on the site. Does the image take up the full width of the column, or only a certain fraction of it (with text flowing around)? Is the image cropped a certain way? Is a watermark or other effect applied to it?

These are questions we're used to answering via Image Styles. However, there's a potential extra wrinkle when considering responsive design: does the art direction change when the screen size changes? What if you have a really wide-and-short (super landscape) image style? That works well on desktop, but might obscure important details from the image on a skinny screen. You might choose a different art direction in that case. Perhaps cropping the image so that it is relatively taller (and narrower). Like breakpoints, these are really design and user experience decisions. Drupal configuration flows from them.

Image styles

OK, you have breakpoints and art direction. Here's the tedious part: now create an image style for (almost) each combination of art direction and breakpoint. Let's say you decided you want one art direction where the image is the full width of a column (called 'article-full-width'), and another where the image is only a third of the column's width (called 'article-third-width'). Let's assume that the column is 66% the width of the layout at breakpoints narrow and above (below that, 100% of the width), and maxes out at 1000 pixels wide (even on a desktop with a large screen). Here are the styles you'd need, given the example breakpoints above:

  • article-2000 (scaled to 2000px width)
  • article-1584
  • article-1536
  • article-1294
  • article-1000
  • article-792
  • article-768
  • article-660
  • article-647
  • article-524
  • article-508
  • article-428
  • article-330
  • article-262
  • article-254
  • article-214

Lot of styles, huh? I've created a spreadsheet that demonstrates the calculations I'm doing to decide on these. Given the permutations of browser width, column width, image-width-as-fraction-of-column, and mobile exceptions, it's not easy to keep track in my head.

Picture mappings

Here's where everything comes together. A picture mapping is what drives how Picture module spits out the picture HTML elements. Think of each picture mapping as a distinct art direction (or a set of related art directions, in cases where browser width changes the art direction). For that art direction, it maps an image style to each of your breakpoints. In this example, we'd create just two mappings:

  • Article - Full width
    • wide 2x : article-2000
    • wide 1x : article-1000
    • normal 2x : article-1584
    • normal 1x : article-792
    • narrow 2x : article-1294
    • narrow 1x : article-647
    • mobile 2x : article-1536
    • mobile 1x : article-768
  • Article - Third width
    • wide 2x : article-660
    • wide 1x : article-330
    • normal 2x : article-524
    • normal 1x : article-262
    • narrow 2x : article-428
    • narrow 1x : article-214
    • mobile 2x : article-508
    • mobile 1x : article-254

Note that in our examples above, the mobile styles are actually wider than some of the others, because in this example, the theme's design switches the column to full-browser-width and the image to full-column-width when the browser is under 768px wide.

Apply your mappings to image fields

Now you have the Picture system completely set up. But not yet doing anything! The last step is to activate the system for displaying content. One of the easiest ways to do that is to use Picture to display the content of image fields. I'll assume you already have a Content Type configured that has at least one Image field:

  • Go to Admin > Structure > Content Types > [your content type]
  • Click the Manage Display tab
  • Under the Format column, choose "Picture" in the drop-down associated with the image field
  • Click the "gear" icon to change display settings for the field
  • Choose the appropriate Picture mapping value
  • Click "Update"
  • Click "Save"

Great! Now your image field is set to display the image as a Picture element. Clear caches as necessary, and check out your content at a variety of browser widths.