Jul 11 2019
Jul 11

On September 12–14, at Hilton Garden Inn Atlanta-Buckhead

Kaleem Clarkson Kyle Mathews, 2019 DrupalCamp Atlanta Keynote

This year, DrupalCamp Atlanta is honored to welcome Kyle Mathews as our keynote speaker, creator of the open source project Gatsby. Gatsby was a hot topic at DrupalCon this year, and we’re ready to dive into the software at DrupalCamp this September.

Follow Kyle on Twitter and Github.

Session submissions are now open for DrupalCamp Atlanta 2019! With Kyle as our keynote, we’re interested to see how others are combining Drupal and Gatsby. In addition, we’re also accepting sessions in the following tracks:

  • Beginner
  • Design, Theming, and Usability
  • Development and Performance
  • Site Building
  • Business Leadership
  • Education and Training

Each session is 40 minutes with 10 minutes for Q&A. Each room will be set classroom style and will have a projection screen and with in house audio.

Trainings

In addition to 50-minute sessions, we’re also looking for volunteer trainers for our full day of trainings on Thursday (9/12) and a half day on Friday (9/13). Training sessions can range across all experience levels. You can submit your call for training here.

One of our goals for this year’s camp was to increase the number of case studies. We encourage web development companies and units to connect with their clients to co-present a session at this year’s DCATL.

We see this as an opportunity to re-engage with a client by highlighting the great work you have done together all while introducing them to the awesome Drupal community we have. So, reach out to some of our clients and propose a presentation today!

SUBMIT YOUR PROPOSAL HERE

Nov 08 2018
Nov 08

Now that the excitement of BADCamp has worn off, I have a moment to reflect on my experience as a first-time attendee of this amazing, free event. Knowing full well how deeply involved Kanopi Studios is in both the organization and thought leadership at BADCamp, I crafted my schedule for an opportunity to hear my colleagues while also attending as many sessions on Accessibility and User Experience (UX) as possible.

Kanopi’s sessions included the following:

The rest of my schedule revolved around a series of sessions and trainings tailored toward contributing to the Drupal community, Accessibility and User Experience.

For the sake of this post, I want to cover a topic that everyone who builds websites can learn from. Without further ado, let’s dive a bit deeper into the accessibility portion of the camp.  

Who is affected by web accessibility?

According to the CDC, 53 million adults in the US live with some kind of disability; which adds up to 26% of adults in the US. Issues range from temporary difficulties (like a broken wrist) to permanent aspects of daily life that affect our vision, hearing, mental processing and mobility. Creating an accessible website allows you to communicate with 1 in 4 adults you might otherwise have excluded.

What is web accessibility?

Accessibility is a detailed set of requirements for content writers, web designers and web developers. By ensuring that a website is accessible, we are taking an inclusive attitude towards our products and businesses. The Web Content Accessibility Guidelines (WCAG) are a globally acknowledged set of standards that help us publish content that fits within the established success criteria. These guidelines are organized into the following four categories.

WCAG Categories:

  • Is your website perceivable? This applies to non-text content, time-based media (audio and video), color contrast, text size, etc.
  • Is your website operable? This ensures that content is easy to navigate using a keyboard, that animations and interactions meet real-user requirements, buttons are large enough to click, etc.
  • Is your website understandable? This means that text content is easy to read for someone at a ninth grade reading level, that interactions follow design patterns in a predictable manner, that form errors are easy to recover from, etc.
  • Is your website robust? This means that content should be easy to interpret for assistive technologies, such as screen readers.

The World Wide Web Consortium (W3C) is an international community whose mission is to lead the Web to its full potential. They have also published a checklist to aid our efforts in meeting WCAG success criteria.

Need help with making your site accessible? Contact us.

How can we be successful in making the web accessible?

Industries have varied requirements when it comes to web accessibility. WCAG has three levels of compliance, ranging from A to AA to AAA. A conformity has the lowest set of requirements and AAA has the strictest set of requirements; so strict, in fact, it may be impossible to achieve across an entire site.

Efforts to meet these standards fall on every individual involved in the process of creating a website. Although there are many tools that aid in our journey, we reach accessibility through a combination of programmatic and manual means.

The most important thing to keep in mind is the fact that achieving success in the world of accessibility is a journey. Any efforts along the way will get you one step closer towards a more inclusive website and a broader audience base.

Please Remember: Once Kanopi helps you launch an accessible site, it’s your job to maintain it. Any content you add moving forward must be properly tagged; images should have proper alt text and videos should have captions. Users come to your site because they love your content, after all! The more you can make your content accessible, the more you will delight your users.

Interested in making your site more accessible? Check out some of the resources I linked to above to join in learning from my peers at BADCamp. If you need more help getting there, let’s chat!

Dec 22 2017
Dec 22

Designers mapping out a website.

Designers mapping out a website.

So your site isn’t working the way you want it to. Maybe it’s sluggish, or you’re not seeing the conversions you want, or customers are complaining. Before you drop a huge chunk of your budget on a complete rebuild, consider that there might be a simpler (and more affordable) solution to your website woes.

We see a lot of Drupal 7 and WordPress websites here at Kanopi Studios, and we often discover that it’s more cost-effective for our clients to simply update their sites rather than rebuilding them. Making targeted updates can allow you to focus on addressing a few key issues, while still leveraging the investment of time, energy and funds that went into your site’s foundation.

In this series, we’ll look at three key topics to consider:

1. How do you know when it’s time for a change?
2. Is your website optimally organized and designed to be user-friendly?
3. How strong is your technical foundation?

How do I know it’s time for a change?

Do any of these problems sound familiar?

  • Low conversion rates
  • Site pages take more than 3 seconds to load
  • Site doesn’t work well on mobile or other devices
  • Updating content is a difficult and frustrating process
  • Users struggle to find what they need on the site or have shared negative feedback
  • Site crashes when updating
  • Too many bugs
  • Building new features is difficult or may not even be possible
  • Site is not loading on https and triggers security warnings

If your answer to any of these is yes, it’s time to take action.

But first … is it really that important for me to address these issues?

Yes! A website that isn’t working optimally can dramatically affect your bottom line. An out-of-date or poorly designed website can:

  • Damage your credibility. If your website loads slowly, is crowded with clutter or is just plain not working, you are sending the message that your company is unprofessional.
  • Make you appear out of touch. A dated website tells your customers you are behind the technological times, or worse – you don’t care enough to stay up-to-date.
  • Cost you customers. Every customer who leaves your site in frustration due to broken links, complex forms, slow pages or confusing navigation is a customer you won’t get back. If your competitors offer similar services and have a stronger website experience, your loss will be their gain.

Decision time. If you want to avoid the damage that a dated website can cause, you’ll need to either rebuild your site or update it. If you’re ready to take action, we can help you find the best and most cost-effective approach.

There are two primary things to consider when maximizing your site’s ROI: your user’s needs and the technology that drives your site. If you can identify and fix problems in both of these categories, you can most likely avoid a costly rebuild.

Venn diagram showing optimum website health at the intersection of smart user experience and strong tech foundation.

Venn diagram showing optimum website health at the intersection of smart user experience and strong tech foundation.


Next, we’ll dive a bit deeper into tips to help you level up your user experience and update your website technology without starting over from scratch. Consider it the non-surgical, diagnostic approach to improving your website experience right where it needs it the most. 
Dec 22 2017
Dec 22

Now that you’ve decided that it’s time to take action to improve your website, It’s time to see if any user experience upgrades could help. Take a look through our list of issues below, and the tips to help resolve them.

Having a hard time converting leads or getting sales?

If you’re not sure why you’re not generating business from your website, it’s time to get serious about strategy. Here’s how:

  • Add a survey to your website to understand what users are looking for
  • Take a look at your analytics to understand where you are losing your users. If you don’t have analytics installed, get either Google Analytics or Tag Manager set up on your site.
  • Try an online user testing platform like Hotjar to help you go beyond standard analytics with heatmaps, visitor recordings, conversion funnels and more.
    Complete a User Experience & Conversion Optimization Audit with Kanopi Studios. We can make a whole range of insightful recommendations within your budget. Contact us to learn more.

Does your site take forever to load?

If it takes longer than three seconds, you have a problem.

  • Use Google PageSpeed or Pingdom to test your site’s speed, understand what might be slowing it down and take action to resolve any issues.
  • Make sure you have a reliable hosting company backing your site at the right level for the amount of traffic you receive.

Does your site work on mobile? Is it accessible?

It’s vital to make sure your site is accessible to everyone, no matter what device or screen size they are using. Here’s how to check:

  • Try using your site on a phone or a tablet. If you have to pinch or zoom to interact with the content, it’s time for a responsive design.
  • Make sure you can tab through all navigation and content on your site using only your keyboard, that all images have alt tags, and that you are able to use a voice browser to “read” your pages out loud. If not, you are missing key elements of accessibility.
  • Contact Kanopi Studios about an accessibility audit. We can help you identify the issues and build a plan for how to resolve them.

Is it frustrating – or impossible – to update content on your site?

If it’s a major undertaking to change even the simplest thing, something needs to happen.

  • Define your ideal workflow, then ask an expert to take a look and see how you can optimize the backend.
  • Consider the types of content that your site needs to support. Do you have templates in place that meet your needs? If not, it may be time to consider a bit of design and development time to build additional page types on your site.

Getting negative user feedback?

If the people visiting your site are taking the time to complain, chances are they might also take the time to help you make things better. Here’s how:

  • Collect feedback by sending out a survey, or document your customer service calls.
  • Always thank people for taking the time to help you improve.
  • Look for trends in the information you are receiving from users and build a plan to address any issues to help meet their needs

If none of the issues above apply, congratulations! Your user experience is likely more solid than many of the websites out there! But there are still more things to consider before committing to rebuilding your site. In our next post, we will walk you through a number of common technical issues and some helpful fixes for them.

Apr 23 2012
Apr 23

Posted Apr 23, 2012 // 7 comments

Let’s face it – data is invaluable, integrations are key, and generating that information into something that will show up on a person’s browser (often) thousands of miles away in a matter of seconds is a modern miracle. However, if your site isn’t aesthetically appealing, nobody will stick around to see all the good stuff. This is where Cascading Style Sheets (CSS) come into play, and why tools such as LESS that make CSS easier to develop and revise have seen widespread adoption in web development.

CSS is an incredibly powerful tool, allowing web developers and designers to alter the entire look and feel of a website with a few simple style rules. Something as simple as: 

a, a:link, a:visited {
  text-decoration: none;
  color: red;
  font-style: italic;
}

can change the appearance of every link (the “A” tag) on every page of your site. Although very powerful and flexible, some aspects of writing CSS become redundant and hard to re-use such as colors, backgrounds, and dimensions. This is where CSS preprocessors such as LESS come to your rescue.  

LESS is More

LESS was born out of perceived shortcomings of the SASS project, and provides more options for developers to implement. LESS can be set up using a Node.js server to generate new CSS files from LESS files as they are changed. You can also include a LESS JavaScript library that will effect just-in-time compilation of LESS code on the browser. Another option available in CMS environments such as Drupal and WordPress are plugins that compile LESS code on the fly on the server so there is neither a slowdown on a user’s browser nor a need to configure a Node.js installation (which is not for the faint of heart). On to some contrived examples to demonstrate what LESS brings to the table.

Variables

For example, you want to modify the style used on several elements, but the design calls for the same color to be used in several places that don’t lend themselves to leveraging pure CSS to use the same color, as in this example where a color is used for text in one rule and the background in the other:

h1.title {
  font-size: 1.5em;
  color: #339966;
}
...
h2.title {
  font-weight: bold;
  padding: 10px;
  background: #339966;
  color: white;
}

Now if you decide that the shade of green shown above needs to be changed everywhere in the site, you have to search and replace all properties in all stylesheets with pure CSS, making sure you don’t accidentally change the color where it might still need to be used. With LESS, you can declare a variable to use like this:

@title-color: #339966;

h1.title {
  font-size: 1.5em;
  color: @title-color;
}
h2.title {
  font-weight: bold;
  padding: 10px;
  background: @title-color;
  color: white;
}

Nesting

The LESS syntax also allows for more logical grouping of CSS rules. Say for instance you had markup for a listing that had CSS like the following:

#list {
  margin: 20px 0;
}
#list .list-item {
  color: black;
}
#list .list-item.odd {
  background: #eee;
}
#list .list-item .list-item-title {
  font-size : 1.25em;
  font-weight: bold;
}
#list .list-item .list-item-content {
  font-size: 0.75em;
  margin: 0 0 0 20px;
}

This same CSS rules could be written using LESS as:

#list {
  margin: 20px 0;
  .list-item {
    color: black;
    &.odd {
      background: #eee;
    }
    .list-item-title {
      font-size : 1.25em;
      font-weight: bold;
    }
    .list-item-title {
      font-size: 0.75em;
      margin: 0 0 0 20px;
    }
  }
}

Notice how child items can logically be nested, and the selectors don’t require the parents to be specified once nested. Multiple classes and pseudo-classes can even be treated as child selector elements that modify a main class using the “&” notation. 

Mixins

Yet another powerful feature available in LESS is the concept of “mixins” which allow you to re-use CSS “fragments” in multiple rules, including parameterized values (example borrowed from the LESS site):

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Where the CSS fragment declared for class “.rounded-corners” is re-usable in the header and footer declarations with different corner radii. 

Functions & Operators

LESS also allows for functions and operations to be applied to various CSS attributes such as dimensions and colors, which are entirely too detailed to get into in this intro. Suffice to say there are numerous examples and a full function reference available on the LESS site.

In summary, if you are looking for a more logical and flexible way to build CSS, look into LESS. It extends CSS in a logical way that allows legacy CSS to still work as always, but allow developers and designers a way to organize CSS in a way that makes more sense and gives more options for modifying rules and values en masse with either the server or browser.

References

As a Senior Developer at Phase2, Robert Bates is able to pursue his interests in solving complex multi-tier integration challenges with elegant solutions. He has experience not only in traditional web programming languages such as PHP and ...

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web