Jun 10 2019
Jun 10

Smart business decisions tend to be equated with cutting costs and saving money.
 
Over the past decade or so, “Better! Faster! Cheaper!” has become the rallying cry for business process reengineering and new initiatives within every sector. As a developer and former business owner, I get this. Efficiency is essential.
 
I tend to look favorably on the fastest, most streamlined solution, and as such, I have a lot of empathy for clients who are seeking fast fixes to ensure that their websites and all of their digital assets get into compliance with WCAG 2.1 for ADA accessibility.
 
But as a developer, my focus is, first and foremost, on solving problems, and I can state unequivocally that overlays can't be counted on to solve the challenges associated with digital accessibility.
 
A recent web accessibility legal case, Haynes vs. Hooters set the precedent that organizations are required to remediate their actual code and not rely on band-aid dashboards or overlay solutions that appear to represent a quick fix that requires seemingly little hands-on maintenance.

Here are 4 key challenges inherent to overlays:

  1. Visually impaired users don't typically use them. They tend to have their own tools with their own voice and reader settings with which they are comfortable and proficient based on their experience and ability level. Your goal is to make your code available to whatever tools and devices they prefer using, not force them to use your overlay tool that has pre-selected settings and options.
  2. Visually impaired users typically have their own stylesheets and ways to access the web. They don’t tend to use presets from widgets because widgets complicate the experience for them and the inability to disable or override them can be frustrating.
  3. Overlays simply don't work well with mobile devices unless a significant expenditure is invested in customizing them to the individual site.
  4. Overlays basically amount to putting a line of Javascript code that pulls preloaded information onto your site. So even if the overlay has been customized as part of your package, to make it fully compliant it's nearly impossible to keep it that way, because accessibility issues can re-emerge with any subsequent change to your site.

 

Sustainable Website Compliance Solutions

Promet Source serves as an accessibility partner, committed to real and lasting accessibility solutions.
 
We conduct both automated and manual testing holistically, from the perspective of the entire spectrum of disabled users and available Assistive Technology -- recognizing that there is no one-size-fits-all fix. This list of automated testing tools, recognized by the World Wide Web Consortium (W3C), demonstrates the wide range of testing options and the need for focused expertise. 
 
Our clients interact closely with both accessibility and developer certified experts throughout engagement and have the opportunity to ask questions and seek clarification every step along the way.
 
After guiding clients through the remediation process of actually fixing code to conform to WCAG 2.1 standards, we provide tools and resources to ensure that your development team has the training and knowledge to maintain your sites conformance.
 
We look forward to consulting with you about your specific accessibility objectives and working toward a solution that best addresses your needs.
 

Jun 07 2019
Jun 07

Business is hopping. You’re hiring Drupal developers with varied backgrounds and skill sets. 

When working in Drupal, there are often many ways to achieve the same outcome, and quite often, Drupal developers find themselves on different pages. How do you determine whose way is the 'best' way and proceed with optimal efficiency?

There are two perspectives to consider:

  • A team executing best practices, and
  • The process(es) needed to get best practices into place.

 

Best Practices

When defining the best practices that your Drupal development team will follow, you need to consider the following areas of development:

  • Foundational Strategies
  • Common Feature Configuration Options
  • Standard Methods for Selecting Contributed Modules
  • Custom Coding Standards
  • Development Environment
  • Workflow Methodologies
  • Testing and Quality Assurance

Foundational Strategies

All Drupal sites have a set of features that are the same. For instance, most, if not all, sites: 

  • Use content types to create content pages
  • Have a search functionality
  • Need a custom theme
  • Must meet WCAG 2.1
  • Should be usable

Before the discovery phase of a project, where requirements are confirmed and refined, create a set of configuration and coding defaults that allow you to deliver a quality product, and enable non-developers to easily use the site.
 

Common Feature Options

There are multiple ways to develop features in Drupal; some good and some not so good. Although there might be exceptions to this rule, choosing one way to develop a feature across your projects will help ensure your product is the best it can be.

Start with consistent configuration strategies and contributed modules. Consider the following:

  • Low maintenance is key to sustaining a site and continued services.
  • End user processes and skills take precedence over what’s easy for a developer to do.
  • Security can be in jeopardy with custom solutions. 

When collecting requirements, compare what’s needed with the one or more strategies you have placed in your company toolbox. Use only an approved strategy unless the requirements can’t be met.

Standard Methods for Selecting Contributed Modules

When a requirement can’t be met with a feature configuration option already in your toolbox, it’s time to go looking for options within the many contributed modules. This is a time when your sought-after best practices can go out the window if you aren’t careful.

Evaluating contributed modules in an effort to meet requirements should be a consistent process. It should be a process that not only helps configure the appropriate solution, it should also yield a configuration option for future projects.

New “best practices” should consider the following:

  • The common features considerations suggested above
  • Pros and cons of each module that meets your needs, maturity, flexibility, and coding standards
  • The history of the contributed module developer(s) and their ability to maintain the module
  • Whether your team is ready to take up the mantle of maintenance if needed
  • The interaction the module(s) could have with other features on the site

Custom Coding Standards

You have exhausted options using Drupal’s core and contributed modules and still have requirements that need to be met. This is where custom code comes in. 

The Drupal community has shared numerous standards for code development for Drupal. You don’t have to reinvent this wheel. However, you do need to establish a process that ensures:

  • Decisions to use custom code are appropriate
  • Drupal coding standards are being followed

Establish a set of criteria that must be met before custom code is cut. Asking questions such as the following can kick off your evaluation process:

  • Which modules (core and contributed) have been assessed as a means of meeting the requirement?
  • Why won’t existing modules work?
  • Can existing modules be modified to meet the need?
  • Does the client want this specific custom solution or do they want to adjust the requirement?
  • What are the potential security and maintenance issues associated with the custom code that can surface during the life-cycle of the website?

Development Environment

Before you can use the above best practices, you need a development environment. 

Drupal can run in many different web server configurations, but there are server settings that maximize Drupal’s performance. Invent your own server or use a service designed specifically for Drupal, that’s your choice.

In order to develop a website that can be hosted by your client, you need to know what their server environment will look like. If it varies from the solution you have selected, you will need a process that allows for:

  • Best practice configuration and coding that can be executed
  • The solution to be tested on the client’s server environment
  • Multiple developers to participate in development without creating issues

Workflow Methodologies

None of the above will matter if you don’t have a workflow that supports the best practices you have set forth for your team. If your developers don’t have time to evaluate their options, consult with each other, or document their solutions, they will do what they can in isolation.

Workflow is about establishing a consistent way of working, while taking into consideration tested and tried software development methodologies. You don’t have to use what others are promoting. You can mix it up, or adjust to meet your needs.

Whatever the workflow you define, consider allowing time to:

  • Identify and create best practices
  • Test new practices for coding standards
  • Verify requirements have been met
  • Provide quality foundation configurations, those your client assume you will deliver

Testing and Quality Assurance

Testing and QA are part of a defined workflow. However, they are worth mentioning separately as each process can overlook issues if not done incorrectly. Therefore, when creating a workflow, ensure you have best practices in place, particularly those accepted by the software industry.

Such testing and QA processes should consider:

  • Automated and manual testing of accessibility
  • User acceptance testing
  • Common software testing such as unit, integration, system, sanity, smoke, interface testing, and regression

 

Getting Best Practices into Place

Are you sold? Do you see the logic in the above best practice categories? Great. The next question you might have is how to implement it. 

There is no one way. However, there are basic steps you can take to get started. Remember, change isn’t going to happen over night. Incremental change is an option, unless radical improvement is needed now. If this is the case, re-engineering is your best option.

One way to kick off the process of change is to perform the following tasks:

  1. Get your developers into one room
  2. Make a list of the most common feature requirements
  3. Identify strategies for meeting the common features
  4. Rank the strategies by the requirements met
  5. Document the strategies 
  6. Train your staff
  7. Meet regularly to learn from each other, to add new options, and improve existing strategies
     

Conclusion

This idea of consistent process improvement to help ensure a quality standard that has its rooms in the Capability Maturity Model Integration (CMMI), which dates back to 1987.  CMMI is a process level improvement training and appraisal program and might be of assistance as you set goals for your organization.

Whatever you choose to do, change for the sake of quality improvement can only lead to:

  • Continued business growth
  • Happy customers
  • Employee job satisfaction

Promet Source offers a depth and breadth of Drupal development expertise. Contact us today to schedule a workshop or for information and insights to ensure that the agility and reach of Drupal is being fully leveraged.

Jun 03 2019
Jun 03

Astute marketers have stepped up to the concept of the Buyer’s Journey.  Taking the time to understand the full range of client personas and to gain empathy for the distinct phases that clients progress through as they explore and compare solutions, is now a key component of the marketing mix.

Let’s look at the potential for applying the concept of the Buyer’s Journey to a new leadership model that can serve as an essential resource for setting employees up for success.

First: a review of how understanding the Buyer's Journey is at the core of marketing effectiveness.

The exercise of mapping out the Buyer’s Journey produces insights that equip marketers to craft the right messages for the right media at the right time. The Buyer’s Journey also takes into account that not only do clients continue to have choices after the purchase, they now have a social media megaphone for broadcasting their experiences, and as such, there can be dire consequences for not continuing to pay attention after the purchase.  

While there are different models and different terminology to describe the Buyer’s Journey, the table below represents a snapshot of the distinct phases and the general types of marketing and messaging associated with optimizing impact within each. 

Buyer's Journey Snapshot

Phase Strategy Messaging/Media Awareness of need Focus on pain points / gain mindshare Industry-focused content that emphasizes empathy / Social media and sponsorships Consideration of solutions Education / help determine purchase criteria / Offer insight into what it’s like to work with you Emphasize scope and superiority of your offering / Content-rich blog posts, checklists, white papers, webinars, speaking engagements, case studies, trial offers Decision to purchase Validate decision Ease of implementation / training, support, webinars, user guides, community engagement Evaluation / advocacy Continuous added value Superior support, ongoing education and updates, closed Facebook groups, exclusive invitations, surveys, loyalty programs

 

Functional Model

Clearly, the days of the one-size-fits-all marketing campaign is a thing of the past. The bar has been raised and expectations are high for both messaging and solutions that are relevant to and resonate with clients’ specific needs. 

The concept of the Buyer’s Journey has gained traction because it makes sense and it works. It’s built upon genuine empathy and a sharpened focus on human centeredness in the design and delivery of both messaging campaigns and the solutions that they represent. 

Next Frontier: The Talent Journey

Imagine the impact if business leadership applied a similar model to the recruiting and retention of talent.  

Clearly, employees progress through distinct phases as they: 

  • Decide to search for a new job
  • Evaluate their options
  • Prepare for an interview
  • Participate in the interview process
  • Agree to join forces
  • Get onboarded
  • Become proficient in their new role
  • Evaluate the job and the company against initial expectations, 
  • Grow within the organization, and 
  • Evaluate future options.

Essentially these above phases fall within four basic categories:

  • Search
  • Sign on
  • Onboard
  • Empower

The following is a framework for the Talent Journey that mirrors the four phases of the Buyer’s Journey -- recognizing that this is simply a skeletal overview that needs to be refined and fleshed out to factor in the makeup of your team and the requirements of your company.

Talent Journey Snapshot

Phase Strategy Actions Search
Maximum positive exposure

Consistent social media posting, clear social media guidelines for current employees, presence at industry events, networking, incentive programs to encourage current employees to recruit to their sphere

Sign on Clarify expectations
Behavioral assessments that can be validated at the outset to help launch positive working relationships, detailed job descriptions and clarity concerning expected challenges, thorough information concerning benefits and company policies Onboard Set up for success

Frequent check-in along with a formal 30-day, 60-day, and 90-day program that sets goals and encourages issues and obstacles to be dealt with quickly

Empower Encourage stretch goals, remove obstacles, create a path for growth

Training, memberships in industry organizations, participation in industry events, open communication, employee surveys, 360 degree reviews, recognition programs

 

Talent Optimization

Leaders who adopt a Talent Journey mindset commit to paying attention and always being mindful of where team members are on the journey, within the framework of an intentional, empathetic model for connecting. As is true for the Buyer’s Journey, outcomes are optimized when there’s a recognition that different kinds of outreach are best suited for different phases of the journey.

Too often though, once talent has been hired and onboarded (insofar as such a process exists) they’re expected to merge with the culture, meet whatever demands come their way, and suck up any frustrations about the degree to which the actual job is out of alignment with their original expectations. 

To those who are thinking, “That’s too bad. This is business. The focus needs to be on innovation, attracting clients and maximizing profits--not coddling employees…” consider the cost of constant turnover, losing top talent to your competition, or frustrated employees operating at sub-par levels.

Talent Magnets = Great Leaders

A decade ago, when unemployment was teetering around 10 percent, leadership might have gotten away with more cavalier attitudes about cultivating talent. 

In the current economic climate, competing for talent is as critical of a success factor as competing for customers, and here’s the critical point: The competition is not won on the day that they agree to join forces. 

It’s no secret that turnover in tech is rampant. Talent knows their worth. They are mobile, well-connected, want top dollar for what they have to offer. According to Spicework’s recently published 2018 IT Career Outlook, more than one third of IT professionals in the United States are currently on the lookout for a new opportunity. Within your current team, can you accurately identify this 33 percent? Do you know who would be subject to being poached by a competitor if they got a better offer. Do you know who is frustrated and how that’s having an impact on their performance? 

Just as the Buyer’s Journey calls upon marketers to sharpen proficiency in multiple areas in order to optimize targeted effectiveness, the Talent Journey challenges leaders to be firing on all cylinders as they set talent up for success and help to remove obstacles for growth. The Talent Journey is both a model and a mindset that brings a richer dimension to our professional lives, deepening both relationships and the bottom line.

We’d love to hear from you! Do you view the Talent Journey as a workable model? What kinds of successes have you had in applying various components of it? Add your comments below or contact us today for a workshop on a leadership model that serves the specific needs of the talent journeys within your organization.
 

May 21 2019
May 21

When you’re surrounded by a team of awesome developers, you might think that a statement such as, “Great Websites are Created before the First Line of Code is Written,” isn’t going to be met with a lot of enthusiasm.

As it turns out, our developers tend to be among the greatest supporters of the kind of Human-Centered Design engagements that get all stakeholders on the same page and create a roadmap for transformative possibilities. 

The point of the above statement, which is also the title of a presentation that Promet’s Chris O’Donnell has been delivering at DrupalCamp events all over the country, is not to downplay the importance of the impeccable coding that makes great websites work. No one doubts that. Our point is that when web development is fueled from a foundation of: 

  • collaborative problem solving, 
  • elimination of  assumptions,
  • deeper knowledge transfer, 
  • empathy for users, 
  • early stakeholder alignment, and 
  • excitement about what’s possible,

everyone benefits and work is a lot more fun.

Getting it right at the start makes sense for a lot of reasons. Teams are happier and work proceeds with a higher degree of efficiency. At the same time, the impact on cost is a factor that is seldom acknowledged to the degree that it needs to be. Consider the following observation from noted software engineer Tom Gilb:

“Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design (concept). If the system has been released, it costs 100 times as much…”

The Luma Institute graphic below powerfully illustrates the difference in the relative cost of getting it right in the concept phase, vs. fixing during the build phase, vs. fixing after release.

Pyramid that depicts the cost difference between getting software right during the concept phase vs. making a change during development vs. making a change once it has hit the market

Human Centered Design vs. Agile Development

Questions concerning “agility” frequently emerge in our conversations with clients, and offer an excellent opportunity to clarify some important issues. Human-Centered Design initiatives focused on getting it right, right from the start, are in no way at odds with the idea of agile development. 

The clear vision and collaborative energy that emerges from Human-Centered Design activities often helps to inform and enhance agile development. 

An all-to-common misunderstanding about agile development is that it’s about avoiding the discipline of an actual plan. Not true. Agile development is a real-world development methodology that does not close off the possibility for mid-course refinement. An agile plan plays out within a series of sprints. Each sprint is reviewed before moving on to the next one. If the review reveals an oversight or issue, it can be quickly addressed. 

Prioritization is key with Agile for sprint planning, and Human-Centered Design helps gain consensus on what is important.

The world’s most agile process, however, is up against an uphill battle in trying to reset the course of a project that was based on inadequate or faulty information from the start. Ensuring that projects get off to an excellent start is at the core of what Human-Centered Design is all about.

Going Wider, Digging Deeper 

The activities within a Human-Centered Design workshop continuously build upon knowledge collected and insights gained for purposes of:

  • Identifying stakeholders
  • Prioritizing stakeholders
  • Identifying strengths, problems, and opportunities in current system
  • Grouping strengths, problems and solutions within agreed-upon categories 
  • Identifying solutions 
  • Prioritizing solutions

Let’s take a look at a few components  of a Human Centered Design workshop.

Stakeholder Mapping

Stakeholder mapping results in what is essentially a network diagram of people involved with or impacted by the website. Typically, there are a lot more stakeholders than the obvious end users and stakeholder mapping evaluates all the possible users of a system to then identify the key target audiences and prioritize their needs and expectations. 
 
Stakeholder mapping is an excellent activity for:

  • Establishing consensus about the stakeholders,
  • Guiding plans for user research, and
  • Establishing an empathetic focus on people vs. technology.
An illustrated example of stakeholder mapping for a Drupal siteAn example of a stakeholder mapping exercise for Promet's upcoming web redesign illustrating people with an interest in the project.

Persona Development

The next step following stakeholder mapping is the creation of persona information in order to understand the range of differing needs from the site for purposes of tailoring solutions accordingly. 
 
Defining the distinct personas for whom the website is being designed serves to clarify the mindset, needs and goals of the key stakeholders. Giving each persona group a name provides a quick reference of key stakeholders and serves as a constant anchor for conversations moving forward.

Drupal-Specific Rose-Thorn-Bud

Adopted from a Luma Institute collection of exercises, the goal of Rose-Thorn-Bud is to quickly gather a significant amount of data in response to a specific question or the current system in general. During a Rose-Thorn-Bud activity every individual’s opinion ranks equally as responses are gathered on colored Post-it Notes for labeling attributes as positive (rose), potential (bud), or problems (thorns).

The Post-it Notes are gathered and grouped on a white board according to identified categories. The collection and organization of large amounts of data in this manner serves to highlight prevalent themes and emergent issues, while facilitating discussion. 

During Chris O’Donnell’s “Great Websites are Created before the First Line of Code is Written” presentation at Drupaldelphia, attendees were invited to respond to the following problem statement: 

Drupal 8 as a viable CMS for small business / small organization needs.

Each participant was encouraged to contribute ideas to 10 Post-its -- within any of the three color categories. All of the contributions were then  “voted up” in order to poll attendees and achieve a level of consensus among the group. Results of that exercise can be found here

Drupal-Focused Statement Starter

Statement Starters are evocative phrases to ignite problem solving within teams and challenge teams to restate the problem from differing perspectives within a framework of “We could …” and “We will …” 
 
The way a statement starter is worded is important. It needs to be an open-ended question that requires more than a yes or no answer. Effective statement starters such as, “How might we…”, “In what ways might…”, “How to…”, and “What might be all the …” help to encourage the generation of explicit problem statements.
 
Conversely, closed-ended statement starters such as: “Should we…” and “Wouldn’t it be great if… tend to yield a yes or no answer” or less specific responses.

The statement starter presented to attendees at the Promet-led Drupaldelphia event, was:

How can we increase Drupal 8 adoption outside of the “enterprise” space?

Their responses are recorded here.

Importance / Difficulty Matrix

Inevitably, some of the ideas that emerge will spark excitement for the strategic leap forward that they could represent. The required time and resources to move forward with them, however, might exceed current capabilities. Other ideas might fall into the category of Low Hanging Fruit -- initiatives that can be achieved quickly and easily.

Plotting every idea on an Importance / Difficulty Matrix is an essential group activity that sparks conversation and accountability concerning Who, How, and When -- transforming good ideas into action items.

Illustration of an Importance/Difficulty Matrix


Why Human-Centered Design?

In the current environment, organizations tend to be defined by their digital presence. The stakes for getting it right are high and the margin for error is low. Optimizing ideas and perspectives at the outset, and continuing to iterate with feedback creates a strong starting point that serves as a superior foundation for web solutions that are capable of heavy lifting over the long haul. 

Interested in learning more about the possibilities for a Human-Centered Design workshop in your organization? Contact us today.

May 16 2019
May 16

“Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.”
        - Margaret Mead

Today marks the 8th annual Global Accessibility Awareness Day.

GAAD was inspired by a blog post written in November 2011 by Joe Devon, a Los Angeles based web developer who was frustrated about an overall lack of awareness about accessibility. He called for a day devoted to building a more inclusive digital world. 

About six months later, on May 9, 2012, the first Global Accessibility Awareness Day occurred with about a dozen virtual and in-person events. 

Today, there will be hundreds of GAAD 2019 events celebrated in every corner of the world. 

It’s wonderful that digital accessibility is inching it’s way into mainstream thinking, but too often, the time and resources associated with making sites and apps accessible is viewed as a burden -- a legal requirement that would gladly be avoided, if possible. The fact is, expanding digital accessibility represents a profound opportunity to take a more expansive, empathetic, and inclusive view of our world and that always leads to good.

Into the Light

Digital accessibility is emerging from a code-related "have-to" that happens behind the scenes. We need to talk about it more and see it as an opportunity. 

We are living in a digital world that shuts out or limits the ability to engage for an estimated 15 percent of the population -- customers, constituents, audiences. 

This translate into business. The disabled represent $490 billion in buying power. And millennials, who value inclusivity and social responsibility more than any generation that preceded them represent $3.28 trillion in buying power. 

Once we get it -- that ensuring digital accessibility is not only a legal requirement, it’s the smart thing to do and the right thing to do -- our passion for accessibility moves up several notches. And just as accessible ramps at entrances to public buildings serve far more than the wheelchair bound, it’s helpful to understand that accessibility is not just for the “disabled.”  Let’s consider some ways that accessibility modifications make digital experiences more engaging and flexible for people of all abilities.

  • Logical layouts and engaging designs are not just pleasant to look at. Any user can get annoyed when needed information is difficult to find and interactions are complicated, but users who have cognitive difficulties or limited computer skills can be frustrated beyond all measure. Be sure to evaluate the user experience from multiple perspectives and angles. 
  • Adequate color contrast is essential for enabling users with a wide range of visual impairments, such as color blindness, to read, navigate, or interact with a site. Low-contrast sensitivity becomes more common with age, but good contrast also ensures accessibility in low-lighting conditions and for users who could be experiencing any number of temporary visual challenges. 
  • Video captions are, of course, essential to enable the hearing impaired to understand the meaning of a video. They also enable videos to be accessible to viewers who are in particularly loud environments, or in settings where silence is required. 
  • Alternate text for photos makes a site more accessible for the visually impaired. It can also bring additional context and clarity to digital experiences.
  • Technology that converts text to speech is viewed as a requirement for the visually impaired. It’s also helpful for dyslexic users, people who prefer not to read, as well as people who want to multi-task. Coding websites and apps to convert text to speech has the added benefit of helping search engines to detect content.
  • Customizable text capabilities enable users to adjust the size spacing and color or text without loss of function or clarity. There are a wide range of visual impairments that make small text unreadable, and difficulties in reading small type inevitable accompany the aging process for everyone. 
  • Clear language is key to accessibility. Industry jargon and acronyms always need to be explained. Run-on sentences and paragraphs can frustrate users of all abilities and in particular those who have cognitive impairments or learning disabilities. In the current environment, there is no patience or inclination for unraveling complicated text. 

This is a lay person’s look at digital accessibility -- an issue in our modern world that’s inherently tied to the common good. 

Do you agree? Join the conversation and let us know how you have discovered digital accessibility to be a means to broaden outreach and build bridges.   

May 13 2019
May 13

Having a process to follow when it comes to website planning and development is essential. The following considerations factor into successful development. 

 

Choosing a Method

Choosing the one method that fits your project can be a daunting task. If you have your own development team, you have control how the process proceeds. If you are hiring a vendor, you need to ensure that you still have a say in the process.

With insight into the planning and development processes, you can help ensure your interests are protected.

 

Planning and Development Goals

Some goals reflect perfect-world scenarios. It’s important, however, to be prepared with a flexible and acceptable plan when the project falls short of perfection.

Perfect World

In a perfect world, you know every detail about the website you want built and can convey those requirements clearly and completely. In a perfect world, all those requirement details are correctly understood by the developers on your project and they quickly create a solution without any issues.

Reality Check

Unveiling every detail regarding the requirements before development starts, however, isn’t necessary to initiate the process. Document all you can. Sketch what you are envisioning: pencil and paper are fine. Be sure to convey requirements that are critical for you to accept the end product.

When you hand your list to your development lead, understand that the development team will already have strategies in mind as they listen to what you say. This can mean 

  • a speedy and efficient development process or
  • it can mean they are hearing what they want to hear and missing details that can suggest their past experiences might need to be adjusted.

Open and frequent communication between you, the site owner, and the development team is a key success factor.

Choosing a Methodology

Often, a proposal from a development vendor will communicate the process they will follow to deliver your site. Given the recent trends, you will likely see the word Agile in their text. Or, maybe your own people are eager to jump on this new way of executing the development process.

If the developers are well trained in one of the many Agile methodologies, this might be fine. However, that is often not the case. One of the most common misunderstandings about Agile methodologies is that detailed planning is not needed.

What are your options? Become informed. Recognize that 

  • development methodologies can be influenced;
  • methodologies can be tweaked to fit your needs; and
  • you are not limited to just one methodology.

Influencing Development Methodologies 

Over the last several decades, some developers focused on the best steps to programming a solution, while others focused on creating programming languages that would make development easier and faster. Together, these two paths have created opportunities in the software development world. Among them:

  • Rapid application development using object-oriented languages and reusable functions that no longer rely on a developer to write and rewrite the code for frequently used website functionality. 
  • Creation of frameworks that, with specific coding functions, allow for the development of common and unique website applications.
  • Development of prepackaged systems designed to meet common website requirements out-of-the-box, requiring less experience and less time to stand up a site.

Each scenario is open to the use of Agile development processes that can flex, depending on the language, system, and/or requirements.

Will your project be developed from scratch or will your team use an out-of-the-box solution? Ask what the chosen strategy means for your process.

Tweaking Methodologies

Let’s take a brief look at what this means. Agile refers to a manifest of software development principles. There are several Agile methodologies that have been designed based on these principles, but they are not all the same or all-inclusive.

If any methodology does not fit your needs, you can make adjustments: add in tasks of another methodology, rearrange steps. Look at the development process being proposed and simply change it fit your resources, your requirements, and/or the way your team works.

Mixing Things Up

Sometimes tweaking isn’t enough.

Have you ever built a house? If not, you can probably imagine a few of the details such as the need for an approved architectural plan. In other words, a blueprint. The blueprint goes beyond requirements. It conveys how the requirements will be met.

There are reasons why the process used to construct of a house works.

  • Pre-approved plan
  • The ability to identify resources and estimate cost
  • A means to create a construction schedule

These three reasons help prevent scope creep and cost overruns. However, the delay of implementation of the requirements this can cause can has been troublesome for many. For instance, it can cause outdated technology to be used when coding finally starts--hence, the need for a development methodology that can start sooner and flex with changing technology.

Mixing it up means, taking the best aspect from the process used by the construction industry, which is a Waterfall approach and combining it with an agile development strategy.

Waterfall the What

Given the options in software today -- reusable functions, frameworks, pre-packaged systems -- it’s easier to identify a coding strategy for a website before the requirement details are identified. Returning to the house construction example, it’s like planning your new house based on pre-defined and pre-built modules that can be put together to create the house of your dreams.

A website is no longer a totally unique product from other websites. Starting with a blank page as if it has never been done before can be a waste of time. This means, using a waterfall approach to collect detailed requirements and design is a viable option.

Create a blueprint of exactly what you need. Participate in decisions regarding the various modules available to implement the features you need. Don’t rely on blind faith that the development team is going to choose an implementation or coding strategy that works best for you.

Agile the How

Next, implement the blueprint. An agile development methodology is still an appropriate choice, given our Waterfall beginnings. Let’s explore this switch in methodology.

The Agile-based Scrum methodology is used frequently. It utilizes Sprints where portions of the website are developed and then reviewed before proceeding to the next Sprint. With this approach to implementing the blueprint, three things are made possible:

  • The development team can plan how to implement the blueprint.
  • They have an increased chance of creating the correct solution.
  • If a review reveals an issue or something was missed during the creation of the blueprint, there is still time to make an adjustment in the development process to accommodate.

With this mixed approach, you don’t have to wait until all requirement details are in place. Assuming the use of a pre-packaged system such as a content management system, the development team can get started with some of the primary functionality identified early in the requirements and design steps such as:

  • E-commerce
  • Multilingual
  • Multi-site (e.g., more than one site using the same code-base)
  • Third-party system integration
  • Multiple levels of content access.

Given the nature of today’s coding options, take the time to plan the details of your website to help reduces surprises and restarts later. Then, be flexible. There is always a chance that a review of the development process can reveal required changes.

Conclusion

All methodologies have their strengths and weaknesses, especially when, for instance, trying to apply a methodology designed for hand-coded project versus a methodology designed to take advantage of pre-existing code bundles, such as content management systems.

Promet Source offers a depth and breadth of expertise in collaboratively determining the best methodology, based upon your distinct goals and circumstances. Our workshops are an excellent opportunity to understand the impact of process of design and to ensure that your project is positioned for success. 

Contact us to learn more about Promet’s distinct approach to ensuring successful implementations or to schedule a workshop.

May 07 2019
May 07

In a world where global positioning systems appear to have a handle on every square inch of the roads we’re traveling on, doesn’t it seem like there should be automated website accessibility testing tools that function as well as -- if not better -- than manual testing? 

The fact is ... it’s complicated.

There are efficient automated testing systems that reveal important findings -- many of which you can easily access and apply to your site. But the web accessibility testing landscape is littered with offers of automated testing solutions that claim to provide fast fixes for the full spectrum of your digital assets. You might have already received an offer based on an unsolicited test of your site, alerting you that your site is a prime candidate for a website accessibility lawsuit. 

If that notification and offer does not include a comprehensive web accessibility testing checklist, it’s likely to be laden with pitfalls. One unsolicited finding, based on automated accessibility testing, does not reflect how your site is faring on all accessibility metrics. Automated accessibility testing tools simply cannot detect every potential issue that would cause your site to be noncompliant. Nor does an automated test provide adequate information for web accessibility remediation or mitigate your legal risk.

Avoid Unintended Consequences

Too often, overlay accessibility solutions create a scenario in which one fix leads to unintended consequences in your code and results in the need for further fact-finding and fixes. Subsequent changes to your site’s UI tend to break the overlay, setting in motion a constant cycle of diagnostics and fixes. 

Keep in mind that many automated ADA web accessibility testing tools are free to use and can produce relatively robust results. It might be just as easy for you to conduct this kind of test on your own, and gain a cursory understanding of accessibility issues affecting your site. Consider giving a web accessibility testing tool such as Code Sniffer a try.

Automated accessibility testing tools overlook critical information -- especially when the testing has occurred without your knowledge by someone with whom you have not had a conversation about your objectives and the full scope of your digital assets.
 

Get it Right the First Time

Promet serves as an ADA accessibility partner that conducts both automated and manual testing holistically from the perspective of the full spectrum of disabled users and available Assistive Technology. We guide clients through the remediation process, actually fixing the code to conform to WCAG 2.1  guidelines. We also provide tools and resources that enable your team needs to maintain your site in conformance moving forward

Our ADA accessibility testing tools and processes go deeper and wider than what automated testing can reveal. We explore a range of issues that require hands-on, manual testing. We look into the unique features of your site, and we take your organization’s mission into account. 

During our engagement process, we start with the development of your scorecard, which reports on our analysis of your site from several different angles. 
 

Understand Your Options

The scorecard is not intended to serve as a thorough report or to provide formal recommendations. It functions instead as a high-level overview for purposes of starting the conversation that will help you to choose the best path.

For example, we might find that you are using a content management system that is designed to adhere to ADA accessibility requirements, but that your content developers aren't using appropriate techniques when posting. Fixing existing content issues without understanding the reason the issues exist, simply means your site will quickly fall back into noncompliance. A simple process change might be all that’s needed to fix this situation. 

Other fixes, however, might require a fundamental overhaul of your site. If your site was created on a platform that is out of sync with ADA accessibility guidelines, it might be more cost effective to rebuild rather than to launch a series of workarounds. 


As experts in this field, we are clear on the fact that quick fixes, which sound too good to be true, usually are. Our objective is to create real accessibility solutions that enable you to move forward with the confidence that your site is accessible to all people with or without disabilities and that you reduce your risk of being faced with a lawsuit due to noncompliance. 

Leverage Expertise

The decision process associated with web accessibility remediation can feel overwhelming. It is outside of the core competency of most organizations. That's why it’s important to work with a trusted web accessibility consultant. 

The scorecard that we offer as part of your remediation process serves as a critical starting point for helping others in your organization to get an overview of your site's noncompliance and the level of effort that will be involved in the remediation. 

We find that when all stakeholders have an understanding of the process and are vested in the importance of doing the right thing, remediation comes into focus.

We are happy to review with you any emails concerning non compliance that you may have gotten by surprise -- or any unsolicited emails full of dire warnings about a potential lawsuit. 

As a leading expert on web accessibility testing tools, we’ve witnessed untold versions of quick fixes that have given rise to a whole host of complications. If you are looking to get it right the first time with the added benefit of value-added solutions, contact us today.

Apr 26 2019
Apr 26

At DrupalCon2019 earlier this month, Promet Source tapped the collective brainpower of attendees with a Human-Centered Design activity that asked this question:

“What are the key advantages, the main challenges, and the emerging opportunities of Drupal as an Information delivery platform?”

Within the context of a Human-Centered Design workshop, big questions such as this one are positioned within a “Rose-Thorn-Bud” framework. Participants are given brightly colored Post-It notes and asked to write everything that they view as an advantage or a plus on a pink (Rose) Post-It. Challenges or downsides are to be written on a blue Post-It (Thorn). Green Post-Its are for collecting input on potential or emerging for opportunities (Bud). 

15 Minutes of Focus

A setting such as DrupalCon, in which participants are needing to constantly shift their attention as they take in tons of information from all sides, is vastly different from a Human-Centered Design Workshop, in which the attention of all participants is laser-focused on a series of activities that build upon the insight and information gathered. DrupalCon, however, represented such a high degree of energy and enthusiasm, that we were able to count on considerable contributions throughout the event. 

The first phase of the Rose-Thorn-Bud activity is simply collecting input. The next phase, called “Affinity Clustering,” is for purposes of reordering and analyzing the input according to agreed-upon groupings. The use of different colored Post-Its is particularly useful in revealing that within a particular category there might be a mix of Roses, Thorns, and Buds, or primarily one or the other, or in some cases, participants may differ as to whether the same issue constitutes a Rose, a Thorn, or a Bud. 

This is an excellent exercise for revealing patterns, surfacing priorities, bringing order to disparate complexity, and sparking productive conversation.

DrupalCon Participants Rank Drupal

Let’s look at the input gathered during the first phase of this activity where we collected responses to the question concerning of key advantages (Rose), main challenges (Thorn), and emerging opportunities (Bud) of Drupal as an information delivery platform.

Rose Thorn Bud Ease of development Documentation (2 Post-Its) Templates for quickly building mini-sites Ease of extension (modules for everything) Too many options Migration to D8 Cutting edge Security is really hard for small projects Decoupled architecture opportunities Connecting and referencing data and content with Taxonomy Admin UI is not intuitive to content editors Accessibility! Adoption of Symphony Admin UI Improving documentation Lots of interchangeable pieces/modules Composer vs. Tar install; mismatched workflow Media integration Flexibility (3 Post-Its) Scattershot dev -- unified direction GraphQL in Core Accessibility out of the box Address low-hanging fruit (media integration) Menu System APIs Content modeling Media integration JSON API with Content Moderation Trusted information can be pushed out programmatically and systematically Content Editor Experience Layout Manager Simple to use Layout tough to perfect   Drupal makes information pretty Flexibility   Allows for all sorts of content types High Learning Curve                (3 Posts-Its)   Quick publication of new information Drupal requires a lot of back-end work to make performance better. It’s heavy and slow.  

 

Next Step: Affinity Clustering

Without context and categorization, excellent input tends to never make it beyond words on a page -- or Post-Its. That’s what Affinity Clustering moves us toward. This is a visually graphic exercise that allows for the assimilation of large amounts of information.

Affinity Clustering is a collaborative activity, that occurs within a facilitated Human-Centered Design Workshop, with all participants contributing their thoughts on how and where to categorize the Rose-Thorn-Bud input. Since it was not feasible to move to this phase from the confines of the Promet Source booth at DrupalCon, we sought the expertise of our in-house Drupal experts and came up with the following categories

Back End Front-End Design Content Ease of development - Rose Accessibility out of the box - Rose Connecting and referencing data and content with Taxonomy - Rose Ease of extension (modules for everything) - Rose Lots of interchangeable pieces/modules - Rose Content modeling - Rose Adoption of Symfony - Rose Flexibility (2 Post-Its) Rose Quick publication of new information - Rose Simple to use - Rose Drupal makes information pretty - Rose Content Editor Experience - Thorn Trusted information can be pushed out programmatically and systematically - Rose Allows for all sorts of content types - Rose Flexibility - Thorn Documentation - Thorn (2 Post-Its) Layout tough to perfect - Thorn High Learning Curve - Thorn Too many options - Thorn High Learning Curve - Thorn Admin UI is not intuitive to content editors - Thorn Security is really hard for small projects - Thorn Templates for quickly building mini-sites - Bud Admin UI - Thorn Composer vs. Tar install; mismatched workflow - Thorn Layout Manager - Bud JSON API with Content Moderation - Bud Scattershot dev -- unified direction - Thorn Accessibility! - Bud   Address low-hanging fruit (media integration) - Thorn Menu System APIs - Bud   Media integration - Thorn     Improving documentation - Bud     Migration to D8 - Bud     High Learning Curve - Thorn     Cutting edge - Rose     Drupal requires a lot of back-end work to make performance better. It’s heavy and slow. - Thorn     Decoupled architecture opportunities - Bud     Media integration - Bud     GraphQL in Core - Bud    
Three groups of pink, blue and green post-its to illustrate affinity clustering


 

To summarize, the front-end category had a lot of roses indicating that the overall sentiment is positive, despite a few challenges. This is the kind of revelation that would be readily apparent to participants in a Human-Centered Design workshop -- simply due to a preponderance of pink Post-Its. The content category, on the other hand, was dominated by thorns. In a workshop, the majority of blue Post-Its would quickly clarify the relative dissatisfaction concerning content. The back-end category resulted in a true mix of Roses, Thorns, and Buds, a fact that would certainly spark continued conversation among participants.
 

This is just a start! 

For those of you who were not able to attend DrupalCon 2019, or who did not make it over to the Promet Source booth or who have had new thoughts subsequent to your participation:

  • What would you add to the above Rose-Thorn-Bud list? 
  • Are there categories that you would like to add to the Affinity Clusters? 
  • How does the above align or not align with your experience?

Indicate your comments below or contact us today for a conversation about leveraging Human-Centered Design techniques to Ignite Digital Possibilities within your organization. 

Apr 25 2019
Apr 25

At DrupalCon2019 earlier this month, Promet Source tapped the collective brainpower of attendees with a Human-Centered Design activity that asked this question:

“What are the key advantages, the main challenges, and the emerging opportunities of Drupal as an Information delivery platform?”

Within the context of a Human-Centered Design workshop, big questions such as this one are positioned within a “Rose-Thorn-Bud” framework. Participants are given brightly colored Post-It notes and asked to write everything that they view as an advantage or a plus on a pink (Rose) Post-It. Challenges or downsides are to be written on a blue Post-It (Thorn). Green Post-Its are for collecting input on potential or emerging for opportunities (Bud). 

15 Minutes of Focus

A setting such as DrupalCon, in which participants are needing to constantly shift their attention as they take in tons of information from all sides, is vastly different from a Human-Centered Design Workshop, in which the attention of all participants is laser-focused on a series of activities that build upon the insight and information gathered. DrupalCon, however, represented such a high degree of energy and enthusiasm, that we were able to count on considerable contributions throughout the event. 

The first phase of the Rose-Thorn-Bud activity is simply collecting input. The next phase, called “Affinity Clustering,” is for purposes of reordering and analyzing the input according to agreed-upon groupings. The use of different colored Post-Its is particularly useful in revealing that within a particular category there might be a mix of Roses, Thorns, and Buds, or primarily one or the other, or in some cases, participants may differ as to whether the same issue constitutes a Rose, a Thorn, or a Bud. 

This is an excellent exercise for revealing patterns, surfacing priorities, bringing order to disparate complexity, and sparking productive conversation.

DrupalCon Participants Rank Drupal

Let’s look at the input gathered during the first phase of this activity where we collected responses to the question concerning of key advantages (Rose), main challenges (Thorn), and emerging opportunities (Bud) of Drupal as an information delivery platform.

Rose Thorn Bud Ease of development Documentation (2 Post-Its) Templates for quickly building mini-sites Ease of extension (modules for everything) Too many options Migration to D8 Cutting edge Security is really hard for small projects Decoupled architecture opportunities Connecting and referencing data and content with Taxonomy Admin UI is not intuitive to content editors Accessibility! Adoption of Symphony Admin UI Improving documentation Lots of interchangeable pieces/modules Composer vs. Tar install; mismatched workflow Media integration Flexibility (3 Post-Its) Scattershot dev -- unified direction GraphQL in Core Accessibility out of the box Address low-hanging fruit (media integration) Menu System APIs Content modeling Media integration JSON API with Content Moderation Trusted information can be pushed out programmatically and systematically Content Editor Experience Layout Manager Simple to use Layout tough to perfect   Drupal makes information pretty Flexibility   Allows for all sorts of content types High Learning Curve                (3 Posts-Its)   Quick publication of new information Drupal requires a lot of back-end work to make performance better. It’s heavy and slow.  

 

Next Step: Affinity Clustering

Without context and categorization, excellent input tends to never make it beyond words on a page -- or Post-Its. That’s what Affinity Clustering moves us toward. This is a visually graphic exercise that allows for the assimilation of large amounts of information.

Affinity Clustering is a collaborative activity, that occurs within a facilitated Human-Centered Design Workshop, with all participants contributing their thoughts on how and where to categorize the Rose-Thorn-Bud input. Since it was not feasible to move to this phase from the confines of the Promet Source booth at DrupalCon, we sought the expertise of our in-house Drupal experts and came up with the following categories

Back End Front-End Design Content Ease of development - Rose Accessibility out of the box - Rose Connecting and referencing data and content with Taxonomy - Rose Ease of extension (modules for everything) - Rose Lots of interchangeable pieces/modules - Rose Content modeling - Rose Adoption of Symfony - Rose Flexibility (2 Post-Its) Rose Quick publication of new information - Rose Simple to use - Rose Drupal makes information pretty - Rose Content Editor Experience - Thorn Trusted information can be pushed out programmatically and systematically - Rose Allows for all sorts of content types - Rose Flexibility - Thorn Documentation - Thorn (2 Post-Its) Layout tough to perfect - Thorn High Learning Curve - Thorn Too many options - Thorn High Learning Curve - Thorn Admin UI is not intuitive to content editors - Thorn Security is really hard for small projects - Thorn Templates for quickly building mini-sites - Bud Admin UI - Thorn Composer vs. Tar install; mismatched workflow - Thorn Layout Manager - Bud JSON API with Content Moderation - Bud Scattershot dev -- unified direction - Thorn Accessibility! - Bud   Address low-hanging fruit (media integration) - Thorn Menu System APIs - Bud   Media integration - Thorn     Improving documentation - Bud     Migration to D8 - Bud     High Learning Curve - Thorn     Cutting edge - Rose     Drupal requires a lot of back-end work to make performance better. It’s heavy and slow. - Thorn     Decoupled architecture opportunities - Bud     Media integration - Bud     GraphQL in Core - Bud    
Three groups of pink, blue and green post-its to illustrate affinity clustering


 

To summarize, the front-end category had a lot of roses indicating that the overall sentiment is positive, despite a few challenges. This is the kind of revelation that would be readily apparent to participants in a Human-Centered Design workshop -- simply due to a preponderance of pink Post-Its. The content category, on the other hand, was dominated by thorns. In a workshop, the majority of blue Post-Its would quickly clarify the relative dissatisfaction concerning content. The back-end category resulted in a true mix of Roses, Thorns, and Buds, a fact that would certainly spark continued conversation among participants.
 

This is just a start! 

For those of you who were not able to attend DrupalCon 2019, or who did not make it over to the Promet Source booth or who have had new thoughts subsequent to your participation:

  • What would you add to the above Rose-Thorn-Bud list? 
  • Are there categories that you would like to add to the Affinity Clusters? 
  • How does the above align or not align with your experience?

Indicate your comments below or contact us today for a conversation about leveraging Human-Centered Design techniques to Ignite Digital Possibilities within your organization. 

Apr 23 2019
Apr 23

The ever increasing complexity and functionality of Drupal sites does not need to translate into increasingly steeper development costs.

In the past, Drupal sites were relatively homogeneous with the occasional multi-domain or multi-site implementation. Today, as sites become more complex, with features such as headless integration with non-Drupal software, the overhead of reproducing an environment locally can become very costly.  Docker was created to bridge the gap between a homogeneous Drupal implementation and a complex integration with non-Drupal software.  

Rather than running a full virtual machine locally, Docker emulates a given environment but still uses your operating system for better efficiency. This is done via "containers" for things like MySQL and PHP, enabling you to do things such as set a given PHP version for each site rather than system-wide. As a result, the process of increasing a site’s complexity has less of an impact on onboarding time.

To build on the benefits of Docker, Expresso PHP was created. Expresso PHP is an open-source Docker setup geared toward PHP development, including Drupal. To illustrate the benefits of Docker and Expresso PHP, let’s walk through setting up a local Drupal environment in Drupal 8 using macOS Mojave.

Software Versions Used

  • macOS Mojave 10.14.4
  • Drupal 8.6.14
  • Docker 18.09.3
  • Docker Compose 1.24.0-rc1
  • Expresso PHP v1.1.0

Setting up Drupal using Expresso PHP

1.

The first step is cloning the Expresso PHP Git repo and doing some initial setup.  This installation assumes you are installing docker sites in a "docker" directory within your local environment's home directly.  In the directions for this example,  the site in question is called "my-site."

cd ~/docker
git clone https://github.com/expresso-php/expresso-php.git my-site
cd my-site
git checkout nginx-php

2.

After cloning the repo, specify the desired PHP version here:

~/docker/my-site/docker/php/Dockerfile

The first line will look something like this:

FROM php:7.2-fpm

3.

Next, clone the Drupal site's Git repo or otherwise add the site.  This example assumes the repo will be cloned within a directory called "my-site", so its location would be

~/docker/my-site/my-site

4.

Replace the existing "web" directory with a symlink to the document root:

rm -rf ~/docker/my-site/web
cd ~/docker/my-site
ln -s my-site/docroot web

This example assumes the document root is "docroot" but it could be "www" or something else.

5.

Copy the settings.php file from default.settings.php

cd ~/docker/my-site/my-site/docroot
cp sites/default/default.settings.php sites/default/settings.php
cd sites/default

6.

Edit settings.php and replace

$databases = array();

with the following

$databases['default']['default'] = [
  'database' => 'expresso-php',
  'username' => 'expresso-php',
  'password' => 'expresso-php',
  'host' => 'db',
  'port' => '3306',
  'driver' => 'mysql',
  'prefix' => '',
  'collation' => 'utf8mb4_general_ci',
];

7.

Edit settings.php and replace

$settings['hash_salt'] = '';

with

$settings['hash_salt'] = 'expresso-php';

8.

A local domain can be used to update the host’s file..  You will need to use sudo to edit /etc/hosts and add the following:

0.0.0.0 my-site.test

9.

Optionally, create a directory for a copy of the site's database and place a *.sql of the database into this directory:

cd ~/docker/my-site
mkdir ref_db
cd ref_db


This is only needed if a Makefile or build script will be used, which is recommended; otherwise, DB import could be done via drush.

Note - The designated location for the reference database may be different for a given Makefile or build script.

10.

Add the Drupal files directory here and modify permissions if needed:

cd ~/docker/my-site/my-site/docroot/sites/default

11.

Build the Docker containers; this is only needed during setup:

cd ~/docker/my-site
docker-compose up -d

12.

The next step is importing the Drupal database.  Ideally this would be done via a Makefile or build script.

Alternatively, the DB import can be done via drush:

cd ~/docker/my-site/docroot
docker-compose exec -T php_nginx drush sql-cli < ../ref_db/ecoDB.sql

13.

Once the DB is imported, check the port needed to access the site:

docker-compose ps

It will use the port associated with my-site_nginx_1; for example 32768.

14.

Access the local website to confirm it works; for example, if the IP is 32768 then the site's URL would be:

http://my-site.test:32768
 

Commonly used Commands

To use Drush:

docker-compose exec php_nginx drush cr

To SSH in to the nginx container:

docker-compose exec php_nginx /bin/bash

To restart services:

docker-compose restart
docker-compose ps

"docker-compose ps" is included here since restarting services resets the port used to access the site.

To uninstall the site:

cd ~/docker/my-site/my-site/docroot

docker-compose down -v
cd ~/docker
rm -fr ~/docker/my-site

That's all there is to it.  When a build script or Makefile is used, a new environment can be set up in a matter of minutes. The main, limiting factor is time needed to copy in the Drupal files/ directory and import the database.
    
Expresso PHP and Docker are excellent tools that enable you to maintain a straightforward setup process, even as complexity increases -- serving as another clear indicator of the inherent agility of Drupal.

Looking for further insights on leveraging Drupal to achieve specific outcomes? Contact us today.

Apr 16 2019
Apr 16

Success with Drupal development often depends as much on knowing what NOT to do as much as what to do.

If you are not “Thinking in Drupal," you are likely to develop a Drupal site using strategies that are not conducive to a:

  • Drupal-friendly site that allows changes to be made to configuration without writing code;
  • Site that is as accessible as it could be; and/or
  • A low-maintenance coding strategy.

Let’s take a look at common Drupal development practices that do not reflect “Thinking in Drupal.”

Data Structures

The first category of “Don’ts” we want to share has to do with data structures. Content is the foundation of your site. 

Don’t use the body field to create the webpage vs. regions and blocks.

In order to create a content page in Drupal, you fill out a form called a Content Type. By default, the form includes a title field and body field. If this feature is all you use, technically, you could use traditional HTML strategies and the body field to create the page you need.

For example, copying the code from an HTML page and pasting it into the body field. If that code includes structural elements and supplemental content, that practice is defeating the purpose of using Drupal and limits content reuse.

Don’t forget to use fields to structure content.

This next example overlaps a little with the example above. Assume for a moment that you are using content blocks to place various bits of content in the page sidebars on your content page. Congratulations. You’re “Thinking in Drupal.”

However, if you don’t take the next step and structure your content into more than just the title and body field, you are not setting up your site for easy content reuse. An easy way to explain this issue is with an event content page.

You can use the body field to enter the event description, date, time, location, audience, price, etc. Or, you can add fields to the content type for each bit of content. This strategy helps you create a consistent presentation of data and sets you up for the next issue.

When you split your content into bits of data, you take the next step towards “Thinking in Drupal” and are able to take advantage of the database query and display feature called Views.

Don’t forget to use Views to create dynamic lists of content.

The next step in “Thinking in Drupal” is querying the database to reuse the bits of content you have placed in fields. 

It is true that you can type a list into the body field of a page and make the list a set of links, just as you would do on hand-made HTML pages. However, that defeats the purpose of using a content management system. Enter it once, reuse it many times over. 

Views is the tool that lets you grab data from fields and display them in blocks and pages. Then, in the event the data source is updated, every instance of that data display is also updated automatically.

Don’t miss out on the power of Views.

Styling 

Your data has been stored and queried using Drupal-friendly strategies. Now’s the time to apply your look and feel to your content.

There is no getting around the fact that presentation of content is important to every site owner. Drupal ships with features that allow you to layout both content fields and supplemental blocks of data. It also includes what we call a theme that helps manage the look and feel of the site.

Although it is likely that you will use a theme that is customized to your branding, one needs to be careful not to prevent configuration settings from being overwritten. 

Don’t forget to use semantic HTML and WAI-ARIA.

With the arrival of HTML5, meaningful elements such as <article> and <header> came into play, among others. That doesn’t mean there haven’t been other meaningful elements. The <p> element tells the reader the content is a paragraph. The <h1> through <6>, <blockquote>, <code> and <em> elements also carry meaning.

The most common non-semantic HTML element is <div>. Used to create sections on web pages, it often includes an ID that describes the sections: main, header, nav, and footer. Unfortunately, human ID’s aren’t recognized by assistive technology because, for example, “main” could also be written as “main content” or “content”. Then there are the various formats for “nav” such as “navigation”, “menu”, or “main menu.”

If you want to describe the semantic element, consider using ARIA rules. For example, <header role=”banner”> indicates that this instance of <header> is the banner on the page and not the header for some content.

How does this apply to Drupal? The theme templates and content entered by content authors. Although Drupal 8 uses HTML5, theme developers don’t always use it when customizing the look and feel of the site. When creating templates and content, think beyond Drupal and include strategies that make your pages accessible. 

Don’t avoid using Drupal build features to manage the page layout.

When you were creating your blocks of content, be it manually or with Views, you placed them in regions defined by the theme. 

It is possible to create theme templates that manually render fields and blocks via the same strategies used by other content management frameworks. However, in doing so, you prevent the use of Drupal’s configuration interface from having any influence on that template.

Imagine you have five fields for a content type. By default, you can configure Drupal to display all five using the default templating strategies. Assume you add a field at a later time, or want to hide one of the existing fields, you can do so via the configuration interface.

However, if you deviate from the default and manually render the five fields, changes in configuration will not be realized on the page until the code is updated in the template.

This practice, unfortunately, is one that creates problems for site owners who believe they are receiving the flexibility that Drupal promises. Confusion and frustration ensue. If you are a site owner, insist on a configuration-based page/field layout strategy versus a hard-coded approach.
 

Customization

You can create complex sites without one line of custom code outside the appropriately coded custom theme you may need. However, when you have exhausted all configuration options, including using pre-existing features contributed by the Drupal community, you might have to write some custom code.

Adding or editing features in a Drupal site require developers to follow Drupal coding standards and practices. This means, a coder might not be able to follow the same practices used in other frameworks. Unfortunately, this is sometimes not understood.

Here are just a couple of examples of coding for Drupal.

Don’t forget to use patches to track code changes.

Given the numerous contributed modules available on Drupal.org, it’s likely your site will use one or more. There might be times when a contributed module offers, for instance, 95% of what you need, with a minor tweak of the code and it will do the job nicely.

The best practice is to create your own custom module with code that hooks into the contributed module in question. Your custom module makes the change the Drupal way and will be executed with calls to the site.

Unfortunately, not all contributed modules are coded with hook options. Although “hacking” contributed modules is not a recommended practice, sometimes it’s the best course of action for minor changes. However, this introduces a maintenance problem if not done correctly via patching. 

What is a patch? Simply put, a fix to the code. As issues are reported to the module project lead, recommended coding fixes are often shared as well for the next version of that module. Meanwhile, your site might need that patch so you take the new code and “fix” the module versus waiting for the next module release.

This same practice of patching can be used to keep track of minor code tweaks you need to make in the contributed module. Again, all efforts should be made to use existing code. If not possible, create your own custom module. Then, if tweaking the functionality of a contributed module is what you choose, track the changes you made with a patch.

Lastly, store all your patches (fixes and tweaks) in a file on the server. For example, here sites/all/patches/PATCHES.txt.

Don’t forget the admin interface for your custom module.

If you need a custom module to complete your site’s functionality, does the custom module need variables with values assigned? For example, you create a custom module that allows you to integrate an external service with your site. In order to access the external service, you need to pass a key to the service to gain access.

For some, the first thought might be to put that key into the code, with the assumption that the key will never change. This is a “hard coding” practice and hard coding is never recommended. 

The better approach is to separate the key from the code. Store the key in the database, separate from the code. How? Via an administrative interface. In Drupal 8, entities are stronger than ever. A unique admin interface isn’t necessarily required. In some instances, you can create a content type to collect the data needed to store the key and other configuration options.

Be sure to provide clients with the means to manage custom features versus relying on code edits.


Conclusion

The above are just the basics when it comes to “Thinking in Drupal” and avoiding long-term issues in development and maintenance on your site.

If you are a developer, don’t assume that the coding practices that work in other frameworks are the best approach to developing in Drupal. If you are a site owner, don’t assume your development team will choose strategies that will allow you to easily change and maintain your site without making that request specifically. Make it a point to "Think in Drupal."

Contact us today to continue the conversation about Drupal best practices that achieve distinct goals and create new possibilities.

Apr 07 2019
Apr 07

I couldn’t be more excited about the fact that DrupalCon is in my town this year. I’ve lived in Seattle for more than 25 years and during that time, I’ve discovered some amazing places. 

So if you are looking to avoid the typical, touristy hot spots that cater to conventioneers (and I know that you are) and fast track your knowledge of where the in-the-know locals go, this list is for you. 

 

Drinking and Dining

Knee High Stocking Company

There’s a reason why the Knee High Stocking Co., is at the top of my list. Patterned after a Prohibition-era speakeasy Knee High stirs up some superior libations. Among my faves is the Cup of Awesome. One of these offers some insight into why the crazies, back in the day, thought that they needed to make liquor illegal. I’ve also been known to enjoy the Love and Violets--not currently on the cocktail menu, but if you ask nicely, I’m sure they’d be happy to mix one up for you. The full menu with a Filipino flair has has proven to be a perfect sidekick to some of the best cocktails in town.
Reservations are recommended. Call ahead to “get on the list.” In true speakeasy style, you’ll need to ring a doorbell for someone to invite you in.
1356 East Olive Way
206-979-7049

The Pink Door

Fabulous, fresh, classic, seasonal Italian fare is just the beginning. With a burlesque, cabaret vibe, the Pink Door has basically reinvented the restaurant experience. Delighting all five senses, and then some--the artwork, the lighting, the view of Elliot Bay, the element of surprise, entertainment that includes trapeze, cabaret, music and tarot--the Pink Door is a world unto itself that doesn’t take itself too seriously. What’s even more amazing to: it’s located right along the quaint Post Alley at Pike Place Market.
1919 Post Alley
306-443-3241  Reservations recommended

Dahlia Lounge

Another one of my favorites, Dahlia Lounge is viewed by many as a quintessential Seattle restaurant experience, and I couldn’t agree more. A pioneer of Seattle’s local, sustainable, and organic food movement, Dahlia features world-class wine and fresh-daily  Seafood. The menu feels completely original. The atmosphere is comfortable and casual. In other words, Dahlia Lounge is combines everything there is to love about Seattle in one delightful experience that's only a half mile from the convention center. My team was thrilled to discover that this was my pick for our DrupalCon kickoff dinner.
2001 4th Ave
202-682-4142 

Marrakesh Seattle

IMHO, Moroccan deserves a seat at the table of the world’s finest cuisines. Marrakesh Seattle promises a “True Moroccan Experience” and that includes extreme hospitality, a Sultan’s tent atmosphere, belly dancing Thursday through Sunday, a Hookah Lounge open from 9 p.m. to Midnight, AND dishes that combine a perfect mix of the most fabulous spices--cinnamon, turmeric, ginger, coriander, and cumin--along with culinary ingenuity that dates back many centuries. 
2334 2nd Ave.
206-956-0500 

Queen City Seattle

Located where many claim to be the site of the oldest bar in Seattle, Queen City is a first-class neighborhood bar and restaurant that’s just about a mile from the convention center. The classic black leather and dark wood interior has the feel of a storied spot where ordering a martini just seems like the right thing to do.
2001 First Avenue
206-402-5095

IL Bistro  

In the heart of the Pike Place Market, IL Bistro is authentic, Northern Italian, and there’s nothing not to love about that. While you are there, check out Pike Place Flowers, where you can pick up a phenomenal bouquet for a mere $10--not a bad idea to stop in on your way out of town.
93A Pike Street
206-682-3049

Lowell’s Restaurant

With a tagline of “Almost Classy Since 1957,” Lowell’s is a Seattle institution whose loyal customers (myself among them) are perfectly happy with things staying just the way they always have been. Seafood is delivered fresh daily and incorporated into hearty and delicious breakfast, lunch and dinner menus. What else? Five unique bloody mary creations, a “market mule” that takes the Moscow mule to a new level, three floors of seating with each one offering views of the Olympic Mountains, Puget Sound, and the Port of Seattle. Never will there be a need to change a thing at Lowell’s. 
1519 Pike Place
206-622-2036

Beecher’s Handmade Cheese

The world needs more institutions that use words like Dedication, Passion, Commitment, and Ardent Skill, in reference to their Cheese-Making Mission. Beecher’s Handmade Cheese is a cheese shop and a cheese-focused cafe where you can witness the miracle of cheese making, learn about cheese, taste cheese, buy cheese, and order dishes with cheese as the star ingredient.
1600 Pike Place
206-956-1964

 

Coffee

The Original Starbucks

It all started in Seattle--the elevation of coffee from something you percolated at home to an experience with a vibe that of course included WIFI. The first Starbucks opened in Seattle in 1971. Five years later it moved to this First and Pike Street location in Pike Place. While Starbucks is a few decades away from being considered off the beaten path, a visit to this location is recommended--if for no other reason than to get a glimpse of what LEED® gold certification is all about. Practically the entire interior is constructed from recycled or upcycled materials.  
1002 Pike Street

Caffe Ladro

Seattle takes its coffee very seriously. We are all required to have a favorite coffee place and to have strong opinions about it. For me, it’s Caffe Ladro. No question. With 15 distinct locations throughout Seattle, I am luckily never too far from a Caffe Ladro. The closest one to the convention center is to at
801 Pine St.
206-405-1950

Beyond Food and Drink

UPS Garden Waterfall Park

Hardly among the “secrets” but definitely worth seeing, Waterfall Park is just a little over a mile South of the convention center. Built to commemorate James Casey, the founder of UPS, Waterfall Park features a 22-ft. artificial waterfall--amazing--and a monument to Postal Service workers.   
219 2nd Ave. S
206-624-6096

Freeway Park

Nowhere in the world is there anything like Seattle’s Freeway Park and the excellent news for us at DrupalCon is that it connects to the Convention Center. The 5.2 acre Freeway Park bridges over Interstate 5 and a city-owned parking lot. Brilliant and right in the heart of Seattle.
700 Seneca St.
206-684-4075

Gum Wall

From the sublime to the ridiculous ... Seattle’s Gum Wall is a brick wall covered in used chewing gum. It’s A local landmark, in an alleyway under Pike Place Market, and a popular spot among both non-germaphobe tourists and locals to get their picture taken. 
1428 Post Alley

Apr 06 2019
Apr 06

Having engaged in Human-Centered Design Workshops for web development with amazing clients from every sector, our overarching discovery is this: great websites are made before a line of code is ever written.
 
Human-Centered Design work lays the groundwork for a vast expansion of transformative possibilities.

In its simplest terms, Human-Centered Design is a discipline directed toward solving problems for the people who actually use the site. The focus on the end user is a critical distinction that calls for everyone on the project to let go of their own preferences and empathetically focus on optimizing the experience for the user. 
 
When we engage in Human-Centered Design activities with clients, it becomes very clear very early into the process that getting rid of assumptions and continuous questioning about users and their needs, eliminates blind spots and opens doors with new insights about the concerns, goals, and relevant behaviors of the people for whom we are developing sites. 

And while Human-Centered Design is generally viewed as a discipline for solving problems, we find it to be much more of a roadmap for creating opportunities.
 
Here’s our 7-step Human-Centered Design process for creating optimal web experiences.

1.    Build empathy with user personas

The first and most essential question: For whom are we building or redesigning this site? We work with clients to identify their most important personas. Each persona gets a name and that’s helpful in keeping us constantly focused on the fact that real people will be interacting with the site in many different ways. 

Following the identification of the key persona groups, we proceed to dig deep, asking “why” and “how” concerning every aspect of their motivations and expectations.

2.    Assess what user personas need from your site

Understanding of and empathy for user personas dovetails into an analysis of how they currently use the site, how that experience can be improved, and how enhancing their experience with the site can drive a deeper relationship. 

We continue to refine and build upon these personas during every phase of the development process, asking questions that reflect back on them by name as we gain an increasing level of empathy. As a result, our shared understanding of the needs and concerns of our persona groups helps to direct development and design with questions such as:

  • “Will this page navigation be clear enough for Clarence?”
  •  “How else can we drive home the point for Catherine that we are an efficient, one-stop-shop for the full spectrum of her financial needs? 

This level of inquiry at the front end might feel excessive or out of sync with what many are accustomed to. Invariably, however, establishing a shared language streamlines development moving forward, while laying the groundwork for solutions that meet the needs of users. 


As Tom Gilb, noted in Principles of Software Engineering Management, getting it right at the beginning pays off. According to Tom, fixing a problem discovered during development costs 10 times as much as addressing a problem in the design phase. If the problem is not discovered until the system is released, it costs 100 times as much to fix. 

3.    Map their journey through the site to key conversions

Just as your user groups do not all fit the same mold, what they are looking for from your site will vary, depending on what phase they are in relative to their relationship with your organization – what we refer to as the user journey. 

Too often, website design focuses on one aspect of the user journey. It needs to be viewed holistically.

For example, if the purchase process is complicated and cumbersome, efforts to successfully provide users with the right information delivered in the right format at the start of their journey runs the risk of unraveling. 
 

4.    Identify obstacles in their path

Next step: identify challenges. We map user journeys through every phase, aiming for seamless transitions from one phase to the next.

This step calls for continuous inquiry along with a commitment to not defend or hold on to assumptions or previous solutions that may not be optimal.

  • What have we heard from clients? 
  • Where have breakdowns occurred in conversions and in relationships?
  • How can we fix it with the messaging, design, or the functionality of the website?  

 

5. Brainstorm solutions

Participants are primed at this point for an explosion of ideas. Mindsets are in an empathetic mode and insights have been collected from multiple angles. 

Now is the time to tap into this energy.

We Invite all participants to contribute ideas, setting the basic ground rules for brainstorming. 

Good ideas spark more good ideas and spark excitement about new possibilities.

6. Prioritize Solutions 

No bad ideas in brainstorming, but in the real world of budgets and time, questions such as “how,” “what’s the cost,” “where to begin,” and “what will have the best impact,” need to be considered. 

As ideas are synthesized, these answers will begin to take shape.  

Real world prioritization happens as we clarify whether a client’s objectives will be best met with the development of a new site or revisions to an existing site. Do we want to move forward with “Blue Sky” development that is not grounded in any specific constraints, or a “Greenfield” project that it not required to integrate with current systems?

What does the playing field look like?


7. Create a Roadmap for Development

Too often, web design and development begins at this step. 

With Human-Centered Design many hours, if not days, of research, persona development, empathetic insights, journey mapping, solution gathering, collaborative energy, and excitement about what’s to come have already been invested when we get to this point. 

As a result, clients have the advantage of moving forward with a high degree of alignment among stakeholders, along with a conviction of ownership in an outcome that will be new, and enhance both the experiences and relationships with the humans who rely on the site. 

Want to ensure that humans are at the center of your next design or development project? That’s what we do (among other things). Contact us today

Better yet! If you are at DrupalCon this week, come over to booth 308. We'll be engaging in a human-centered design activity and you'll have the chance to witness human-centered design in action. I look forward to meeting you!


 

Apr 01 2019
Apr 01

For those who don’t work in the trenches of digital accessibility, the guidelines can seem confusing or overwhelming. The fact is, it’s not necessary to know the details associated with the 73 individual Web Content Accessibility Guidelines (WCAG) 2.1 success criterion in order to make design decisions and ultimately contribute to a website planning session. 

Options for Learning About WCAG 2.1

Before we share the seven perspectives, we want to acknowledge that the World Wide Consortium has organized the WCAG criterion into four principles. You can read the principles, their guidelines; however, it might be hard to imagine their true impact without further investigation into the criterion. 

The four WCAG principles are:

  • Perceptionable - “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”1
  • Operable - “User interface components and navigation must be operable.”1
  • Understandable - “Information and the operation of user interface must be understandable.”1
  • Robust - “Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.”1

Another way to shuffle the criterion deck is with the following proposed perspectives:

  1. Physically Interacting with a Web Page;
  2. Understanding the Context of a Web Page
  3. Seeing the Text on a Web Page;
  4. Understanding the Text on a Web Page;
  5. Interpreting Media via the Web;
  6. Controlling Media on a Web Page; and
  7. Using Forms on the Web Page.

1. Physically Interacting with a Web Page

When you visit a web page, you scroll or swipe to move the page through the browser window. When you find a link you want to follow, you click or tap. If you couldn’t do either, what would you do? Perhaps you would:

  • Use keyboard keys,
  • Use mouth sticks, or
  • Use voice recognition.

In order to make these other options possible, you need to give users the ability to ”touch” the page and for their assistive technology to understand your code. For example, you need to:

  • Enable a visitor to skip to the most important aspects of the page right from the start;
  • Plan the path that the tab key on the keyboard will follow;
  • Ensure a visitor knows where they tab has landed;
  • Provide alternatives to common mobile finger gestures such as zoom; and
  • Allow site visitors to choose their own input mechanisms.

One way to imagine these concepts is to picture yourself in a maze. You can only “see” what is in front of you. Where do you go? Once you learn the path to the center of the maze, you can visit it anytime. However, what would happen if someone changed the layout of the maze from day-to-day? You would have to start  over, learn the path to the center again and again.

Consistent page layouts provide consistent in-page navigation. Sometimes layout creativity from page-to-page can cause issues versus offering visitors a new experience.

2. Understanding the Context of a Web Page

With eyes that see, you can discern information from a web page without consciously thinking about it. You take in the layout (e.g, portrait or landscape) of the page and quickly identify the:

  • Header and information about the site owner;
  • Title of the page and if it is a topic landing page or one of your many articles;
  • Menus that provide insight into the information architecture of the site; 
  • Search functionality as well as other ways to find the content you need;
  • Sidebars that contain various items such as lists with purposeful links; and 
  • The main content and its article, event, etc.

When you scroll down the page, you might find that the content is organized into subtopics, allowing you to quickly discern whether the blog post will be of interest.

Then, as you dive deeper into the site, past the homepage, to a landing page, to a bit of content, there might be hints to remind you where you are. With a well-planned site, you will see consistent layouts, allowing you to anticipate which section of the page contains objects with which you want to engage.

WCAG 2.1 provides guidelines and criterion designed to  deliver a similar experience for those who can’t rely on eyesight to navigate a page.

3. Seeing the Text on a Web Page

There are two common visual challenges to which many of us can relate: the need for glasses and color blindness. Even with corrective lenses there might be times when they aren’t enough.  Or, even if you aren’t color blind, there might be times when you cannot read some text sitting on top of an image or color background. 

There are WCAG 2.1 criterion focused on helping you enable visitors to make adjustments to your text so that they can see it. As for color (images or styled), the objective is to ensure enough contrast. 

A contrast example that is easily overlooked is that of links. Blue link works well on a white background; however, that color might not work when it appears on top of a block of color. So, some planning will have to take place regarding the styling of links across the multiple sections of your page or else, some of your links might visually disappear.

4. Understanding the Text on a Web Page

There are two perspectives to the idea of understandable text: the meaning of words and interpreting meaning from the way it is displayed. 

Interpreting the Meaning of Words

We don’t need WCAG 2.1 to motivate us to write well. However, on occasion, even the best writers forget some of the basics such as: 

  • Using unusual words (e.g., regional terms better understood by the locals);
  • Abbreviating without providing insight as to the meaning of the abbreviation;
  • Forgetting the reading level of your audience (e.g., writing to subject matter expert versus someone less schooled);

Then, there are writing aspects that are easy to overlook such as the use of heteronyms. The one that often gives me pause is lead. 

  • Lead, pronounced LEED, means to guide. 
  • Lead, pronounced LED, means a metallic element.

It’s also important to, declare the language of your content. Even if you drop a foreign language into the middle of your content, you need to let the reader know.

Interpreting Meaning from the Display 

What if you couldn’t see visual cues concerning relationships among headers and sub-sections? How would you know there were parent/child relationships?

That’s where header elements versus <strong>, come into play.

Visual and/or auditory cues are just one way to convey meaning. Often times, the order in which content is presented carries meaning. Imagine you have two blocks of content: step one and step two. They appear next to each other in order. 

Here’s the test. Strip away the styling so that they do not appear next to each other. Are they still in the right order? Make sure they are.

5. Interpreting Media via the Web

Images and video are probably the first types of media to come to mind when media is mentioned. There are also shapes (e.g, CSS-based checkmark), animations, and audio files.

Bottomline when it comes to non-text items: anything that is not text needs to be explained or declared as decorative. 

Images

An image might be worth a thousand words, but you can no longer rely on images to convey meaning. If you are using the image to convey 500 out of the 1,000 words, include the 500 words on the page. You have two strategies: a separate “long description” block of text or simply include the information in your narrative.

Video

As for video, you need closed captions at a minimum, be it pre-recorded or live broadcast. Since you have the text, include it in a transcript. Here is an example of an accessible video experience from the World Wide Web Consortium.

Audio

If you upload a podcast to your site, you need to include a transcript. In both video and audio transcripts, you need to include speaker identification if there is more than one, as well as any sounds that convey meaning.

6. Controlling Media on a Web Page

In addition to video and audio player controls, you need accessible controls for items that blink, scroll, or move. There are several “if this, then that” conditions governing where, when, and how controls need to be implemented. 

If you have plans for anything with sound or movement on your page, you need to spend some time to ensure your page is accessible.

7. Using Forms on Web Pages

When you visit a page, it’s likely that the first form you see is a search field. Add a contact form and/or a newsletter signup form, and there is a chance that multiple accessibility issues are lurking.

There are three considerations when adding forms to your site:

  • Labels
  • Instructions
  • Error management

When a label can be ambiguous, instructions can clarify. However, mistakes happen, so your forms need to help users correct their data entry. There are some behind the scenes coding requirements that make these perspectives accessible, but these considerations will get you started.

Conclusion

Making a website accessible isn’t just about code. It calls for a high degree of awareness each time content is added. Maintenance and auditing processes are essential to ensuring accessibility. Need further explanations or insights into accessibility? Contact us today.

Mar 19 2019
Mar 19

In preparation for DrupalCon 2019, Chris O’Donnell, Digital Strategist, for Promet Source shared his views on the vibe of this annual conference, as well as Drupal’s current standing within the ecosystem of enterprise-level CMS platforms.  
 

What are you looking forward to at DrupalCon Seattle?

One of the best parts of DrupalCon for me is the community. It’s an opportunity to connect with people who I might only get to see once a year -- colleagues from other Drupal development companies, previous clients, current clients, and like-minded people from all over the country. There’s a ton of training and all of the sessions are driven by community involvement -- people who are just sharing their knowledge for the fun of it, or as a way to give back to the community.

Last year at DrupalCon, there was a proprietary software company exhibiting for the first time. They seemed really confused by a world where a development company was on the stage with some of its best customers. Why would anyone share great information with potential competitors? They were really confused by the entire thing - competitors coming together to openly share knowledge just didn't compute for them.

How would you explain it?

DrupalCon is more like a Drupal community celebration than a tech industry trade show. 

I think it was President Kennedy who said, “A rising tide lifts all boats,” and the same principle applies within the Drupal Community, or any open source community. The more brain power that goes into it, the better it is for everybody. As an open-source CMS, the Drupal community is driven by the community and the needs of users. Anything that anyone does to improve or add to Drupal is freely available to all. 

I joined the Drupal community in 2014, and I love being among hundreds of thousands of people around the world who contribute to the community in various ways. 


What are your observations on how DrupalCon 2019 has evolved?

There has been a pretty big shift this year as the Con has been organized around specific tracks. Drupal 8 ushered in an orientation toward more of an enterprise-level focus, and that’s been reflected in the kind of training that’s offered and an expanded sphere of people who are attending.

With so much going on, what's your advice for attendees for getting the most out of DrupalCon 2019?

Use the schedule builder feature on the DrupalCon website to build a DrupalCon Seattle schedule for yourself of sessions you want to be sure to catch. Don’t forget to look at the Birds of a Feather events, which tend to be smaller and more informal. And don’t schedule yourself so tight that you miss out on the hallway track. My most interesting conversations at DrupalCon usually happen in the hallways and at evening social events.
 

How would you characterize Drupal’s position today within the world of web content management platforms?

Drupal is an enterprise-level content management platform that delivers much of the functionality you would expect from some of the million dollar proprietary CMS platforms, while still retaining the freedom and flexibility inherent in its open-source roots.
 

What are your thoughts on when, why or how Drupal has achieved this status?

I think it was a coordinated effort related to the Drupal 8 rollout. D8 was a total rewrite of the CMS, with the goal of producing an enterprise-grade CMS that would be on par with the established and expensive proprietary platforms. The momentum is now really strong for Drupal as an enterprise CMS.

What sets Drupal apart from other web content management platforms?

The freedom, flexibility, and lack of license fees that come with open source set it apart from all the proprietary options. It’s different from any other open-source CMS in that it has strong corporate sponsorship, a dedicated security team, and an enterprise heavy install base.


What will the extent of your participation in DrupalCon Seattle?

I’m excited about attending the GovSummit on Monday, April 8, and will be presenting in the Builder Track at 3:15 on Wednesday, April 10, in Room 608. Otherwise, I’ll be in and out of sessions and at the Promet Booth (#308) for the rest of the event. This is Promet’s 12th year as an attendee and 11th year as a sponsor. Once again, we’ll be all over DrupalCon. The entire senior leadership team will be there, along with some of our senior developers and our entire sales and marketing team. I’m particularly excited about the addition of Mindy League to our leadership team this year. The Human Centered Design team that she is heading represents an exciting expansion for Promet. I definitely recommend that anyone who is interested in the very latest in design thinking for digital experiences make it a point to grab some time with Mindy. 


How would you characterize Promet’s client base for whom Drupal proves to be the right solution?

Very much in line with what Dries Buytaert, the founder of Drupal said at DrupalCon two years ago: “Drupal is for organizations that are looking to build ambitious digital experiences.” It’s not so much about the size of the company or the team, it’s about the reach and impact that the site needs to have. 

The fact is, I spend very little time selling Drupal websites. I sell e-commerce solutions that will generate more revenue. I sell accessibility, more streamlined user experiences, sites that are better targeted to the needs of customers, and sites that more effectively reflect an organization brand image.

Be sure to stop by booth #308 at Drupalcon in Seattle, April 8-12 to visit with us, or Contact us today for a conversation about how Promet can create an ambitious digital experience for your organization. 

Photo credit: Michael Cannon

<

Mar 19 2019
Mar 19

In preparation for his fourth DrupalCon, Chris O’Donnell, Digital Strategist, for Promet Source shared his views on the vibe of this annual conference, as well as Drupal’s current standing within the ecosystem of enterprise-level CMS platforms.  
 

What are you looking forward to at Drupalcon this year?

One of the best parts of DrupalCon for me is the community. It’s an opportunity to connect with people who I might only get to see once a year -- colleagues from other Drupal development companies, previous clients, current clients, and like-minded people from all over the country. There’s a ton of training and all of the sessions are driven by community involvement -- people who are just sharing their knowledge for the fun of it, or as a way to give back to the community.

Last year at DrupalCon, there was a proprietary software company exhibiting for the first time. They seemed really confused by world  where a development company was on the stage with some of its best customers. Why would anyone share great information with potential competitors? They were really confused by the entire thing - competitors coming together to openly share knowledge just didn't compute for them.

How would you explain it?

DrupalCon is more like a Drupal community celebration than a tech industry trade show. 

I think it was President Kennedy who said, “A rising tide lifts all boats,” and the same principle applies within the Drupal Community, or any open source community. The more brain power that goes into it, the better it is for everybody. As an open-source CMS, the Drupal community is driven by the community and the needs of users. Anything that anyone does to improve or add to Drupal is freely available to all. 

I joined the Drupal community in 2014, and I love being among hundreds of thousands of people around the world who contribute to the community in various ways. 


What are your observations on how DrupalCon has evolved?

There has been a pretty big shift this year as the Con has been organized around specific tracks. Drupal 8 ushered in an orientation toward more of an enterprise-level focus, and that’s been reflected in the kind of training that’s offered and an expanded sphere of people who are attending.

With so much going on, what's your advice for attendees for getting the most out of DrupalCon?

Use the schedule builder feature on the DrupalCon website to build yourself a schedule of sessions you want to be sure to catch. Don’t forget to look at the Birds of a Feather events, which tend to be smaller and more informal. However, don’t schedule yourself so tight that you miss out on the hallway track. My most interesting conversations at DrupalCon usually happen in the hallways and at evening social events.
 

How would you characterize Drupal’s position today within the world of web content management platforms?

Drupal is an enterprise-level content management platform that delivers much of the functionality you would expect from some of the million dollar proprietary CMS platforms, while still retaining the freedom and flexibility inherent in its open-source roots.
 

What are your thoughts on when, why or how Drupal has achieved this status?

I think it was a coordinated effort related to the Drupal 8 rollout. D8 was a total rewrite of the CMS, with the goal of producing an enterprise-grade CMS that would be on par with the established and expensive proprietary platforms. The momentum is now really strong for Drupal as an enterprise CMS.

What sets Drupal apart from other web content management platforms?

The freedom, flexibility, and lack of license fees that come with open source set it apart from all the proprietary options. It’s different from any other open-source CMS in that it has strong corporate sponsorship, a dedicated security team, and an enterprise heavy install base.


What will the extent of your participation in DrupalCon be this year?

I’m excited about attending the GovSummit on Monday, April 8, and will be presenting in the Builder Track at 3:15 on Wednesday, April 10, in Room 608. Otherwise, I’ll be in and out of sessions and at the Promet Booth (#308) for the rest of the event. This is Promet’s 12th year as an attendee and 11th year as a sponsor. Once again, we’ll be all over DrupalCon. The entire senior leadership team will be there, along with some of our senior developers and our entire sales and marketing team. I’m particularly excited about the addition of Mindy League to our leadership team this year. The Human Centered Design team that she is heading represents an exciting expansion for Promet. I definitely recommend that anyone who is interested in the very latest in design thinking for digital experiences make it a point to grab some time with Mindy. 


How would you characterize Promet’s client base for whom Drupal proves to be the right solution?

Very much in line with what Dries Buytaert, the founder of Drupal said at DrupalCon twy years ago: “Drupal is for organizations that are looking to build ambitious digital experiences.” It’s not so much about the size of the company or the team, it’s about the reach and impact that the site needs to have. 

The fact is, I spend very little time selling Drupal websites. I sell e-commerce solutions that will generate more revenue. I sell accessibility, more streamlined user experiences, sites that are better targeted to the needs of customers, and sites that more effectively reflect an organization brand image.

Stop by booth #308 at Drupalcon in Seattle, April 8-12, or Contact Us Today for a conversation about how Promet can create an ambitious digital experience for your organization. 
 

<

Mar 14 2019
Mar 14

Are you concerned about web accessibility issues that might be hidden within your pages?

We recently gathered input from the Promet accessibility team concerning digital accessibility issues that are most often in need of remediation, and we came up with a Top 12 List of web accessibility mistakes and oversights. They pertain to:

1.  Alt text
2.  Color contrast
3.  Forms
4.  Headings
5.  iFrames
6.  Keyboard accessibility
7.  Landmark roles
8.  Links
9.  Lists
10. Semantic markup
11. Tables
12. File attachments

1. Alt Text

An image might be worth a thousand words, but if someone can’t see the image, then what? So, what’s up with the images on your site? Make sure that they are not missing: 

  • The alt attribute and descriptive text,
  • Enough description in the alt attribute, or 
  • A null alt attribute (alt="") indicating that the image is decorative and thus has no meaning.

If the image is a chart, alternative text that briefly describes it might not be enough. Complicated charts and graphs will require extra effort. The use of the longdesc attribute can be used if the narrative of your content doesn’t already include the information communicated by the image. 

2. Color Contrast

This one can be problematic if you’re heavily invested in your branding. If a color contrast checker reveals that your branding colors don’t create sufficient contrast, there are minor fixes you can employ to achieve accessibility. The two issues we see most often are insufficient color contrast:

  • Between text and background colors and 
  • Between text and UI components (i.e. button) or background image(s).

This type of problem can be headed off at the pass with a well-planned design and teaching your content authors how to incorporate accessibility into the creation of their colored charts and graphs.
 

3. Forms

Forms perform different duties. You have the search box on every page. That’s a form. That “Sign up for our Newsletter” on your homepage is a form. And, let’s not forget “Contact Us.” That’s three forms and we haven’t gotten to the comment forms, e-commerce forms, or event sign up forms. So, you can see, accessible forms require considerable attention.  

Now, add in the long list of issues we see to understand why your forms might be your most vulnerable objects on the page.

  • Form fields found with missing labels.
  • Form labels found with "for" attribute not matching another element’s ID.
  • Select element’s option doesn't have value available.
  • Select element doesn't have initially-selected option.
  • If this selection list contains groups of related options, they should be grouped with optgroup.
  • Checkboxes/Radio Buttons should be contained within a fieldset.
  • Fieldsets must contain a legend element.
  • Form is missing a required submit button.
  • Button elements missing value and/or content.

These are fixable offenses. For example, if your button elements are missing value and/or content, this is what that means.

Inaccessible
<input type=”submit” />

Accessible
<input type=”submit” value=”Submit Form” />

As you can see, the fix is simple. However, the tricky part can be gaining access to the site in such a way that the solution can be applied. If you’re using a third-party plug-in or a content management system, you might not have access to the code that generates your forms. 

4. Headings

Headings in HTML are defined via the <H1>, <H2>, <H3>, etc. elements. 
So often content is chunked in an article by using sub-headers styled with <strong> versus <H2>, for instance. This is not considered accessible. 

When Promet Source audits website pages, we often find:

Heading tags without content, and 
Heading structure that is not logically nested.

What does logically nested mean? Let’s take a look.

Inaccessible 
<h1>About Us</h1>
<h4>Our History</h4>
<h6>Our Future</h6>

Accessible
<h1>About Us</h1>
<h2>Our History</h2>
<h2>Our Future</h2>

This example makes it look like the content is the problem and it might be. However, this kind of issue can creep up in the presentation of page objects that reside outside the main content. 

5. iFrames

iFrames are used to display content on your web page from an external source. In this scenario, you need to think about two things: the iFrame on your page and the external content source, or third-party.

Start with ensuring your iFrame has a title, as shown in the sample code below. Then, ensure that the external content is accessible, which might not be easy if you don’t have an agreement with the source to provide accessible content. Remember, just because it came from someone else, that doesn't mean you are responsible.

Inaccessible
<iframe src=”/images/maine-beach-home.png” width=”...” height=”...” />

Accessible
<iframe title=”Maine beach home” src=”/images/maine-beach-home.png” width=”...” height=”...” />

6. Keyboard Accessibility

You scroll the browser window to see what’s hidden below. You place your cursor on a link or in a form field using your touchpad or mouse. Swiping and screen taps have become actions we take for granted on mobile devices. What would you do if you couldn't click or tap?

The most common keyboard accessibility issues we see are:

Elements that are not keyboard accessible;
Elements that are not visible when it gets focus (e.g., show a dotted border); and 
Forms that cannot be navigated using the keyboard and other accessibility tools. (i.e. accordions).

Let’s consider the first issue. Helping a user navigate to non-link and non-form elements is often overlooked. If your page is divided into sections, allowing the user to tab through the sections can be helpful.

Inaccessible
<div>Complementary content region</div>

Accessible
<div tabindex=”0”>Complementary content region</div>

7. Landmark Roles

So far we’ve talked about aspects of web pages that you are likely aware. This next topic has to do with the W3C’s Accessible Rich Internet Applications Suite (ARIA), and the roles and attributes that you can assign to your HTML elements. 

The W3C says, “With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.” However, it can also create issues if you apply ARIA’s roles and attributes incorrectly. For instance:

  • Elements missing required landmark roles, and 
  • Landmark role "presentation" is applied improperly on an element because its child elements contain semantic meaning.

Let’s consider the application of roles and semantic meaning.

Inaccessible
<div class=”promet-logo” role=”presentation”>
    <img src=”/images/promet-logo.png” />
</div>

Accessible
<div class=”promet-logo”>
    <img src=”/images/promet-logo.png” />
</div>

Sometimes a role assignment makes things worse, not better.

8. Links

When it comes to accessible links, you have two perspectives to consider: code and content. Before we look at the coding issues for accessible hyperlinks, let’s consider content. 

Links such as “Click here” and “Read more” appear often on the internet, but they’re not accessible because they lack purpose. 

Imagine listening to assistive technology reading out the links on a page, “Read more. Read more. Read more.” Read more what? In order for the link to be purposeful it needs to indicate what you would be reading more about. For example: “Read More about Weather Patterns.”.

Regarding coding issues, we see five coding issues on a regular basis.

  • Anchor elements found with valid href attribute but no link content.
  • Anchor elements found with missing href attributes.
  • Broken links to 404 (page not found) pages (e.g., a link to google.co versus google.com).
  • Back to top anchor link doesn't exist.
  • “Skip to main content” link is missing.

The ‘skip to main content’ link accommodates success criterion 2.4.1 Bypass blocks, enabling a user of the page to bypass listening to the menu and any other blocks of content that stand in the way of them hearing the main content. Below is some code that illustrates the problem.

Inaccessible
<body>
     <header></header>
     <main id=”main-content”></main>
</body>
     <a id=”skip-link”>Main Content</a>

      Accessible
<body>
    <a href=”main-content” id=”skip-link”>Skip to Main Content</a>
<header></header>
<main id=”main-content”></main>
</body>
 

9. Lists

f you are familiar with HTML, you might find it hard to believe that bulleted lists are, at times, not created using the <ul> and <li> elements. Just because a list visually appears as such, that doesn’t mean assistive technology will read as that way.

So, remember that:

  • List elements should be marked up as a navigation list, and 
  • Ordered/unordered/definition lists should include list items.

What do we mean by “should include list items?” See the example below.

Inaccessible
<ol>
     <div>Link 1</div>
     <div>Link 2</div>
     <div>Link 3</div>
</ol>

Accessible
<ol>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
</ol>
 

10. Semantic Markup

Semantic markup has to do with meaning. If something is a paragraph, use <p>, not <span> or <div>, for instance. Other examples include <form>, <table>, and <article>. These HTML elements are descriptive and carry meaning. Semantic html matters.

We often see:

Duplicate ID attribute values found on pages, and
Semantic markup used for emphasis or special test (i.e. don’t use <font>).

Let’s take a look at the ID attribute that can be assigned to an HTML element. In this example, a web page has three unique forms and they each have the same ID. 

Accessible
<form id=”search”>
<form id=”search”>
<form id=”search”>

Inaccessible
<form id=”search-header”>
<form id=”search-content”>
<form id=”search-footer”>

The ease with which such fixes can be applied rely on how your website is created and if you have access to the code.
 

11. Tables

Tables are not as responsive as you will need them to be. So, if you don’t need to use a table, don’t. If you need to use a table, note that the following accessibility issues are often found.

  • Table is missing caption elements.
  • Table headers are missing the <th> element.
  • The relationship between <td> elements and their associated <th> elements is not defined.

The last example is easy for content authors to overlook as HTML editor buttons do not insert ID and header attributes. Notice how the data cell references the table header cell that is applicable.

Inaccessible
<table>
    <thead>
        <th>One</th>
<th>Two</th>
<th>Three</th>
</thead>
<tbody>
    <td>Column 1 content</td>
<td>Column 2 content</td>
<td>Column 3 content</td>
</tbody>
</table>

Accessible
<table>
    <thead>
        <th id=”col1” headers=”blank” scope=”col”>One</th>
<th id=”col2” headers=”blank” scope=”col”>Two</th>
<th id=”col3” headers=”blank” scope=”col”>Three</th>
</thead>
<tbody>
    <td headers=”col1” scope=”row”>Column 1 content</td>
<td headers=”col2”>Column 2 content</td>
<td headers=”col3”>Column 3 content</td>
</tbody>
</table>

12. File Attachments

Accessibility is not just about the HTML page. PDFs are commonly uploaded to a page for purposes of download. They, and other files such as MS Word and Powerpoint files, are required to be accessible.

PDF accessibility requirements that we see most often pertain to the following issues:

  • Untagged content,
  • Missing alternative text for images, and
  • Incorrect reading order.

The process to fix non-web files varies, depending on the source document. 

Conclusion

As the above examples demonstrate, accessibility compliance calls for close attention to a wide range of details.

One of the most challenging aspects of making a site accessible tends to be of fixing the technology used to create it. If your site was created from individual HTML pages, you can edit the markup and fix many, if not all of your issues. If not, a site rebuild might be in order.

Before you build a new site, make sure that the content management system is designed to produce accessible pages and forms. It’s also essential that you audit your current pages to identify accessibility issues before they are migrated into the new site. 

Promet Source offers a path to achieving accessibility compliance for your websites, web applications and technical products. With flexible testing and remediation options, we can partner with you to ensure that you are adhering to WCAG 2.1 guidelines.  

Contact us today for a conversation on the level of training or support that best fits your needs.

Mar 06 2019
Luc
Mar 06

You may have heard: Google+ is game over.

Officially, this is directly related to a leak of data that potentially impacted 500,000 Google+ accounts.

Businesswise, the attempts of Google to build a social media platform was not successful. If you had a personal account on Google+ and want to download your data before the shutdown, you can download it here.

The shutdown will happen in two phases:

Your website can be impacted by the shutdown of the Google+ API. This API was used by many providers and libraries to be able to login to a website using Google.

Hybridauth on Drupal 7

If your Drupal site is using Google to log n, it's possible that you are still using the Google+ API. A very popular module in D7 to log in using social media is called Hybridauth (to log in with LinkedIn, and Facebook, as well Google). You need to update that library and your Google key.

Here are the steps to keep your Hybridauth working in D7:

Mar 05 2019
Mar 05

Promet's acquisition of a team focused on user experience and strategy, has sparked a new spectrum of conversations that we are now having with clients. 

The former DAHU Agency’s Human-Centered Design expertise has given rise to many questions and within a relatively short span of time, has driven the delivery of expectation-exceeding results for clients from a range of sectors. 

As the name suggests, Human-Centered Design occurs within a framework for creating solutions that incorporate the perspectives, desires, context, and behaviors for the audiences that our clients want to reach. It factors into every aspect of development, messaging and delivery, and calls for:

  1. A deep and continuous questioning of all assumptions,
  2. A willingness to look beyond the “best practices” that others have established,
  3. An eagerness to find inspiration from anywhere and everywhere,
  4. The involvement and ideas of multiple stakeholders, from different disciplines, along with a process for ongoing testing, iterating and integration of feedback, and
  5. Constant emphasis on the concerns, goals and relevant behaviors of targeted cohort groups.


Within less than a year, this specialized approach has become fundamentally integrated into the ways that Promet thinks, works and engages with clients. We intentionally practice design techniques that combine inputs from our UXperts, the client, and the end user--bringing empathy and human experience to the forefront of our process.

How Does this Approach Differ?

In contrast to traditional product-centered design, where the appeal, color, size, weight, features and functionality of the product itself serves as the primary focus, Human-Centered Design creates solutions that understand audiences from a deeper perspective.  We try to meet more than the basic needs of a captivating design. To do this, we must fulfill greater and more engaging purpose and meaning expressed within the designs we create.


Among the approaches that we’ve found particularly useful is that of Abstraction Laddering, in which we guide interdisciplinary teams through the process of stating a challenge or a goal in many different ways, continuing to answer “how” and “why” for purposes of advancing toward greater clarity and specificity. 


Human-Centered Design fuels simplicity, collaborative energies, and a far greater likelihood that launched products will be adopted and embraced. When practiced in its entirety it helps to ensure success. As such, it benefits everyone and is perfectly aligned with Promet's User Experience (UX) Design practice.

Design that Delivers

As we engage with clients in the process of deepening our understanding of their customers, we draw upon the expertise of our highly skilled and creative team members, and leverage expertise at the leading edge of the digital landscape.


The addition of this new Human-Centered Design team to the Promet Source core of web developers has helped us to proactively approach new websites with a holistic mindset combining our technology expertise with great design and function, along with an essential empathy of how humans interact with technology.  

Contact us today to schedule a workshop or to start a conversation concerning Human-Centered Design as a strategy to accelerate your business goals. 

Mar 05 2019
Mar 05

Promet's acquisition last year of a team focused on user experience and strategy, has opened an exciting new sphere for the types of conversations that we are having with clients. 

The former DAHU Agency’s Human-Centered Design expertise has sparked a many questions and within a relatively short span of time, has driven the delivery of expectation-exceeding results for clients from a range of sectors. 

As the name suggests, Human-Centered Design occurs within a framework for creating solutions that incorporate the perspectives, desires, context, and behaviors for the people whom our clients want to reach. It factors into every aspect of development, messaging and delivery, and calls for:

  1. A deep and continuous questioning of all assumptions,
  2. A willingness to look beyond the “best practices” that others have established,
  3. An eagerness to find inspiration from anywhere and everywhere,
  4. The involvement and ideas of multiple stakeholders, from different disciplines, along with a process for ongoing testing, iterating and integration of feedback, and
  5. Constant emphasis on the concerns, goals and relevant behaviors of targeted cohort groups.


Within less than a year, this specialized approach has become fundamentally integrated into the ways that Promet thinks, works and engages with clients. We intentionally practice design techniques that combine inputs from our UXperts, the client, and the end user--bring empathy and human experience to the forefront of our process.

How Does this Approach Differ?

In contrast to traditional product-centered design, where the appeal, color, size, weight, features and functionality of the product itself serves as the primary focus, Human-Centered Design creates solutions that understand audiences from a deeper perspective.  We try to meet more than the basic needs of a captivating design. To do this, we must fulfill greater and more engaging purpose and meaning expressed within the designs we create.


Among the approaches that we’ve found particularly useful is that of Abstraction Laddering, in which we guide interdisciplinary teams through the process of stating a challenge or a goal in many different ways, and continuing to answer “how” and “why” for purposes of advancing toward greater clarity and specificity. 


Human-Centered Design fuels simplicity, collaborative energies, and a far greater likelihood that launched products will be adopted and embraced. When practiced in its entirety it helps to ensure success. As such, it benefits everyone and is perfectly aligned with Promet's User Experience (UX) Design practice.

Design that Delivers

As we engage with clients in the process of deepening our understanding of their customers, we draw upon the expertise of our highly skilled and creative team members, and leverage expertise at the leading edge of the digital landscape.


The addition of this new Human-Centered Design team to the Promet Source core of web developers has helped us to proactively approach new websites with a holistic mindset combining our technology expertise with great design and function, along with an essential empathy of how humans interact with technology.  

Contact us today to schedule a workshop or to start a conversation concerning Human-Centered Design as a strategy to accelerate your business goals. 

Feb 27 2019
Feb 27

With the increased number of accessibility lawsuits for inaccessible websites, it's no wonder that offers for quick fixes are a hot commodity. Unfortunately, the saying, “You get what you pay for” may not apply to accessibility overlay solutions.

So, what do you do? First, let’s take look at how quick-fix web accessibility overlay solutions actually work.

 

What are Web Accessibility Overlays?

Imagine your HTML web page on your web server. It can be an actual HTML file or a cached version of the page that your content management system creates on your behalf. Now, imagine a Javascript being added to the file and that script makes changes to the HTML rendered in that HTML file.

Tada! That Javascript change is the fix you need and your web page is now accessible. Or, is it? That depends.

  • It depends on what’s wrong on your page.
  • It depends on whether a Javascript can actually fix the issue.
  • It depends on whether the cached HTML page has changed and if the Javascript still works.

 

Are Accessibility Overlays for You?

With all the depends-on-this and depends-on-that scenarios that can come up, we can’t say definitively one way or the other. Therefore, we are going to walk you through a process where you can decide what’s best for your site.

The following four-step process sounds simple, but in the long run, it might not be. We’re sorry, but it’s the nature of the beast.

  1. Find the issue.
  2. Identify the required fix.
  3. Implement a solution.
  4. Test the solution.

1. Find the Issue.

The short description of this step is to conduct an audit, using both automated tools and manual testing. If you don’t have the in-house skills to identify all your potential issues, Promet Source is here to help. 

Common web page accessibility issues that can be caught by automated testing include:

  • Missing Alt text for images
  • Insufficient color contrast
  • Label issues in your forms (there are other types of form issues as well)
  • Incorrect application of headings
  • Missing titles for iFrames
  • HTML elements are missing landmark roles
     

Other issues that are better identified with manual testing include:

  • Insufficient alternative text for images
  • Lists that are not coded as lists
  • Attached non-web content, such as PDFs, are not accessible for one or many reasons
  • Missing media captions and/or transcripts

2. Identify the Required Fix.

So, how do you fix the issues? As you can imagine, given the list above, not all fixes are code based. Let’s look at a few examples.

  • Missing Alt text. It takes a human to see an image and describe it. You would need a Javascript that could apply all the unique descriptions that are missing. 
  • Label issues in forms. Given there are numerous issues associated with this topic, you would need a Javascript for each type of issue. Of course, like Alt text, some labeling requires a human decision as to which fix renders the correct solution.
  • Keyboard focus not visible. In order to see where a user’s tab key has landed, the object needs to change. For example, a border is applied. Borders are managed in the CSS files, not the HTML file. You would need a Javascript that could apply an inline style of your choosing for each tab-able object on the page.

3. Implement a Solution.

Fix the source code or go with an Accessible Overlay solution. This is where a couple more “depends” questions come into play.

  • Depends on whether the cost to locate and configure the Javascripts to fix your pages’ issues is less than the cost to fix the source.
  • Depends on your plans for updating your site.

And, let’s not forget the “depends” questions already asked. Is there a Javascript solution for your issue? If not, fixing the source code might be your only option. 

This is where things can get complicated. Not all systems allow you access to resolve the issue. Therefore, you might have to switch to a system that supports accessibility or allows you to make the appropriate changes.

4. Test the Solution.

Just because a Javascript solution looks like it will work, that doesn’t mean you don’t have to test it. Remember, if your site is running off of a content management system, you might find that the cached HTML page that gets “fixed” by the overlay solution, no longer has the exact same broken code as it did a few hours ago.

So, test, test, test. And then, keep watch. 

Next, remember that new accessibility issues can creep up over time. For instance:

  • Content author introduces a data table in a blog post that is not accessible.
  • Functionality from an external source changes, and not for the good.
  • A security patch is applied and it’s just enough to confuse the overlay you have in place.

Continued monitoring is a must when dealing with quick-fix solutions.

 

Conclusion

Accessibility overlays can serve a purpose. However, before you commit to an overlay solution, perform a cost-benefit analysis. 

  • Is the cost of obtaining a quick fix higher or lower than the cost to fix the source? 
  • Is the cost of monitoring and reapplying the overlay solution less costly than fixing the source? 
  • Is the cost of a lawsuit for an inaccessible page, where your overlay solution has stopped working, worth the quick fix?

At Promet Source, we are serious and passionate about accessibility. We’re here to help you evaluate your options and make decisions that are sustainable and strategically sound. Contact us today 
 

Feb 21 2019
Feb 21

“But I don’t want to think about Drupal 9 yet!”

Adulting sometimes means doing things we don’t want to do, like thinking about CMS version upgrades. 

We can help.

For now, here’s what you need to know about Drupal 9.

1. Drupal 9 is targeted for a June 2020 release.  

Eighteen months following the release of Drupal 9, in November of 2021, Drupal 7 and 8 will both hit EOL status. This means that you will have a little more than a year to move your site from Drupal 7 or 8, following the June 2020 release date of Drupal 9. 

The normal schedule would dictate that Drupal 7 hit EOL shortly after the Drupal 9 launch. However, because so many sites are still on D7, and at this point, many may just skip D8 completely, the decision has been made to extend D7 support for an additional year. As a result, D7 and D8 will both lose support at the same time.

The November 2021 date is significant because that is also when Symfony 3, which is a major dependency for Drupal 8, will lose support.

What this means for you as a D7 or D8 site owner is that you should have a plan to be on Drupal 9 by the summer of 2021.

2. The transition from Drupal 8 will not be painful.

Unlike Drupal 8, which for practical purposes was a new CMS sharing the Drupal name, Drupal 9 is being developed on Drupal 8. That means if you are up to date with Drupal 8.9 the move to Drupal 9 should be relatively easy. It probably won’t be Drupal 8.4 to 8.5 easy, but it should be nothing close to the level of effort of moving from Drupal 7 to Drupal 8. In a lot of ways, Drupal 9 is just the next six-month update that comes after Drupal 8.9, with the added complication of being the version that we use move depreciated code and APIs out of the codebase.

My recommendation if you are still on Drupal 7: migrate to Drupal 8 when it's convenient. As stated above Drupal 9 is really just Drupal 8.10.1. So you kind of are migrating to Drupal 8, even it’s called Drupal 9 at that point. You won’t save any effort by waiting until Drupal 9 is out, you’ll just be on the outdated D7 codebase longer.

Concerning modules: as long as modules aren’t depending on any APIs that are being depreciated in D9, contributed modules should continue to work with both D8 and D9. 

3. Promet Source can help with a readiness audit

The good news if you are on an updated version of D8 the transition to D9 should be smooth. If you are on D7 you are essentially doing the same thing whether you migrate to Drupal 8 or Drupal 9.

We’re here to help! If you want to talk in more depth about what Drupal 9 has in store, and start to make a plan for the transition, contact us for information on our Drupal 9 readiness audit.
 

Feb 21 2019
Feb 21

You're probably thinking, “But I don’t want to think about Drupal 9 yet!”

Well, adulting sometimes means doing things we don’t want to do, like thinking about CMS version upgrades. 

We can make this easy.

For now, here’s what you need to know about Drupal 9.

1. Drupal 9 is targeted for a June 2020 release.  

Eighteen months following the release of Drupal 9, in November of 2021, Drupal 7 and 8 will both hit EOL status. This means that you will have a little more than a year to move your site from Drupal 7 or 8, following the June 2020 release date of Drupal 9. 

The normal schedule would dictate that Drupal 7 hit EOL shortly after the Drupal 9 launch. However, because so many sites are still on D7, and at this point, many may just skip D8 completely, the decision has been made to extend D7 support for an additional year. As a result, D7 and D8 will both lose support at the same time.

The November 2021 date is significant because that is also when Symfony 3, which is a major dependency for Drupal 8, will lose support.

What this means for you as a D7 or D8 site owner is that you should have a plan to be on Drupal 9 by the summer of 2021.

2. The transition from Drupal 8 will not be painful.

Unlike Drupal 8, which for practical purposes was a new CMS sharing the Drupal name, Drupal 9 is being developed on Drupal 8. That means if you are up to date with Drupal 8.9 the move to Drupal 9 should be relatively easy. It probably won’t be Drupal 8.4 to 8.5 easy, but it should be nothing close to the level of effort of moving from Drupal 7 to Drupal 8. In a lot of ways, Drupal 9 is just the next six-month update that comes after Drupal 8.9, with the added complication of being the version that we use move depreciated code and APIs out of the codebase.

My recommendation if you are still on Drupal 7: migrate to Drupal 8 when it's convenient. As stated above Drupal 9 is really just Drupal 8.10.1. So you kind of are migrating to Drupal 8, even it’s called Drupal 9 at that point. You won’t save any effort by waiting until Drupal 9 is out, you’ll just be on the outdated D7 codebase longer.

Concerning modules: as long as modules aren’t depending on any APIs that are being depreciated in D9, contributed modules should continue to work with both D8 and D9. 

The good news if you are on an updated version of D8 the transition to D9 should be smooth. If you are on D7 you are essentially doing the same thing whether you migrate to Drupal 8 or Drupal 9.

We’re here to help! If you want to talk in more depth about what Drupal 9 has in store, and start to make a plan for the transition, contact us for information.

Feb 14 2019
Feb 14

A commercial came on the radio recently advertising a software application that would, basically, revolutionize data management and enable employees to be more efficient. My first thought was, “How can they possibly promise that when they don’t know their customers’ data management processes?” Then, it became clear. The business processes would have to be changed in order to accommodate the software.

Is that appropriate? Is it right that an organization should be required to change the way it conducts business in order to implement a software application? 

Sometimes yes. Sometimes no. 

The following four factors can serve as an essential guide for evaluating the need for change and ensuring a successful transition to a new solution. 

  1. Process Analysis
  2. Process Improvement
  3. Process Support
  4. Change Management

1. Process Analysis

Before committing to the latest and greatest software that promises to revolutionize the way you do business, make sure you’ve already documented current processes and have a clear understanding of what’s working well and what can be improved. Over the last few decades, several methodologies have been created and used to analyze and improve processes. Key among them: Six Sigma, Lean Manufacturing, and Total Quality Management (TQM).

How to Streamline Process Analysis

In simple terms, document the way you create, edit, and manage your data. Task-by-task, step-by-step, what does your team do to get the job done? If you see a problem with a process, keep documenting. Improvements, changes, redesigns come in the next step.

Steps to Document Processes

At the core of all process documentation is the process flowchart: an illustration with various boxes and decision diamonds connected with arrows from one step to the next. Collect as much data and as many contingencies as possible to make this flowchart as meaningful and robust as possible.

Diving Deeper

Integrated Definition (IDEF) methods look at more than just the steps taken to complete a task within a process. IDEF takes the following into account:

  • Input - What is needed to complete the steps in the task? Understanding this information can highlight deficiencies and can highlight flaws in effective completion of a particular step. 
  • Output - What does the task produce? Is the outcome what it needs to be?
  • Mechanisms - What tools are needed to perform the steps in the task? Can new technology make a difference?
  • Controls - What ensures that the steps within the task are being performed correctly?

Swimlane or Functional Flowcharts

In addition to the four items from IDEF data, knowing who performs a task is also important. As you draw the boxes and connect them with arrows, place them in a lane that represents the “Who” of process. Knowing who does what can reveal possible over-tasking and/or bottleneck issues in production and efficiency.

Getting Started

Whiteboards and Post-it can be an easy place to start process documentation. With today’s high definition smartphone cameras, you can sketch flowcharts, take a picture, and then share with stakeholders for their review and input. Once you have collected all relevant information, tools such as Visio or Lucidchart can make complicated process flows easier to create and visualize. 

2. Process Improvement

When you know how your current processes are performed, you can start to make improvements--whether incremental or a complete redesign (A.K.A reengineering). 

Low-hanging Fruit

Some needed improvements will likely be obvious. For example, someone on the process team says, “I didn’t know that you were doing that? I do it, too.” Duplication of effort doesn’t require metrics to be collected to determine that steps can be taken to enhance efficiency.

However, most processes require some form of metric collection to determine where improvements can be made. Metrics can include research costs, development time frames, quality assurance oversights, or frequency of downtime.

Knowing What to Change

If the needed improvement isn’t obvious, metrics can help guide the decision-making process. For example, how much time does it take to complete a process today? Could that be improved? Brainstorm ideas on how to shorten the time. Test the change and remeasure. 

Too often, data is collected with the intent of measuring the success of the process, but the data being collected is does not reflect objectives. For example, if the goal of a website or a particular page is to teach, metrics concerning the number of page visits does not indicate the degree to which that goal is being achieved. A more telling metric would be the amount of time a visitor spends on the lesson pages. Even more revealing would be the number of quizzes passed after a visitor engaged with the lessons.  

Before choosing metrics to be collected, understand your goal, determine the level of improvement you want to see, then start measuring that which will actually inform your goal.

3. Process Support

Key to process improvement is an analysis of how technology is can enhance productivity and efficiencies. 

For example: “We can cut three days worth of effort for three employees if we integrate the XYZ software into our process.” This kind of statement sounds like a worthy goal, assuming the cost to transition doesn’t exceed the long-term savings it can help realize. 

Calculating the Cost of Change

Open source software applications start out with a great price tag: Free. However, unless you use the application as is, there is always a cost associated with turning it into what you need. There are many more factors to consider than the upfront cost of the software. 

Costs can include:

  • Training on new processes
  • Training on the new software application acquired to support the new process
  • A drop in productivity and efficiency until the new process/application is adopted and accepted by your staff
  • Technology needed to support the new application
  • Keep in mind: The list of ancillary costs that are involved in the transition are unlikely to appear at the top of the salesperson’s brochure.

Return on Investment

ROI assessments will vary. Two values are needed to make this computation: cost and benefits. 

Once you've computed the short-term and long-term costs, you need to determine the benefits you gain. In a situation where investment directly translates into profit, this calculation can be straightforward.

However, sometimes the benefits are cost savings: “We used to spend this. Now we spend that.” When this is the case, instead of a cost/benefit ratio, a breakdown calculation might be required to determine how long it will take to recoup costs. 

The most complicated analysis will result from benefits such as an increase in customer satisfaction in which the benefit does not have a direct monetary value.

4. Change Management

When a team cannot see the benefit or resists change, new initiatives face an uphill battle. That’s why circling back to the process analysis phase and ensuring the buy-in of those who are being counted on to use the new application is a critical success factor.

Keep in mind that employees may not have access to the big-picture business goals that management sees, but change has the greatest chance of being realized if those who will be required to support it are informed as to why it needs to happen and included, at some level, in the decision-making process. 

Indeed, change management doesn’t start when the new application is ready to be implemented. Change management starts when:

  • All the costs of change are considered;
  • The full scope of process changes are identified;
  • Training is planned and delivered; and 
  • The campaign for change acceptance is designed and initiated.

Conclusion

You might be the boss. You might believe that the software application just discovered is what  your company or your department needs. As much as that matters, you need buy in. You need the support of the people who make your business possible. You also need to engage in a disciplined analysis of the processes that will be impacted, along with anticipated improvements and the level of support that will be deployed.

From ensuring that clients’ entire online presence is compliant with ADA accessibility guidelines to web solutions that optimize impact in the ever-evolving digital environment, we at Promet Source serve as a powerful source of transformative digital possibilities. Contact us today to learn what we can do for you.

Jan 23 2019
Jan 23

Besides Title, the most common field label found on a content type form is Body. Of course, this is where you place the body of your content. It’s your blog post, your how-to instructions, or maybe an event description. You know exactly what needs to be provided in this field because you are the trained author. What happens when the scenario includes many authors with varied skills?

Without clearly visible instructions for the form and the form fields, content authors can make mistakes. There are four default features in Drupal 8 that provide instructions for content authors.

Help

Body field configuration interface

When configuring a field, all fields except Title, you can include help text. The help text appears under the field, just like you see here on the configuration form where the help text for the help text field says, “Instruction to present to the user below this field on the editing form.”

Pros

The label of a field might not communicate the full intent or purpose of the field, so adding instructions in the help field can go a long way to ensuring an author uses the field correctly. 

For example, the Tags field on the Article content type provides default help text: Enter a comma-separated list. For example: Amsterdam, Mexico City, "Cleveland, Ohio" This provides instructions for entering tags correctly. 

However, if you need to add additional instruction regarding the context of the tags, you can include a statement like, “Do not use terms already offered in the Topics field.” 

Cons

The common placement of instructions below a field isn’t always noticeable. For example, the screenshot below shows the body field with help text below. Is it eye catching? Obvious?

Body field on the Add node page.

The size of a field can make providing easy to see instructions a challenge. And, if you need to make an accessible content type, the help text feature needs a little work to make it WCAG compliant. 

Placeholder

Configuration options for Body field on the Manage form display

Using placeholder text inside the field is another option. Although this feature is not available for all field types, it does enable you to include 128 characters of instructions. Located on the Manage Form Display tab for the content type, it’s just one configuration option available.

Pros

As mentioned in the Help section above, the Title field doesn’t have a help text option. However, the placeholder feature is available to provide tips on title strategies. Or, if the instruction is short and simple, such as a date format of MM/DD/YYYY can help users quickly understand the sequence of the date parts.

Cons

It’s only 128 characters and if the field size is less that that, not all of the instructions will be visible. On the topic of visibility, the Placeholder feature is not read by a screen reader. And, unless you do some browser specific CSS overrides, the contrast of Placeholder text might not meet WCAG color contrast criterion.

Lastly, when a user clicks in the field to enter data, the placeholder text disappears.  

Default Values

Body field default content configuration interface

The default value feature for fields is a great way to speed up data entry when the same entry is expected frequently. However, it can also be used to communicate instructions to the content author. You can go as far as providing a content template where the appropriate formatting has already been applied. 

Pros

Uniformity. Clarity. An experienced author will have their own way of conveying their thoughts, but that way isn’t always what’s best for an organization. Or, a newbie writer might need a little help to get started.

Notice the instructions for the often forgotten Summary feature. If you require a summary, include instructions like those shown in the example above and the Summary field will be open and ready when the content author uses the content type.

Also, unlike the Placeholder option, clicking in the field does not make the instructions disappear. 

Cons

The content author needs to remember to delete the instruction text. A small price to pay.

Content Type Explanation/Guidelines

Submission field settings for the content type

According to the Form Instructions tutorial provided by W3C, “Where relevant, provide overall instructions that apply to the entire form.” Each content type has the option to include a form explanation or submission guideline, as the field label suggests. 

Pros

Content add form with submission guidelines sample text.

The form explanation appears just above the Title field and outside the <form> element, which is needed for accessibility. You can also include HTML elements to format your instructions. 

Cons

If you need to format your form instructions, you will need to enter your own HTML as there is no HTML editor bar.

Conclusion

Not all forms are self-explanatory. Not all field purposes can be easily deduced. Drupal provides several options for providing guidance to your content authors, each with their own pros and cons. 

As you plan the way your finished content will be presented to site visitors, remember to plan your content type forms. Just because a content author receives training when the site is delivered, that doesn’t mean they will remember everything they learned. Form instructions help.
 

Jan 17 2019
Jan 17

Promet and Drupal go way back. We were at some of the first DrupalCons. We were an Acquia partner back when nobody had heard of Acquia. Most of our work today is building large, complex Drupal sites. (We are branching out though. Feel free to talk to us about Wordpress or other web development needs!) We love Drupal, and we’ve used it to build everything from simple to very complex websites.

However, Drupal 8 has changed the Drupal ecosystem. Drupal 8 is designed for engaging digital experiences. What does that mean? Mostly it means complex or mission-critical web applications. You can be a 2-person company working out of a basement, but if your website is everything to the business, there may be a good argument to build that site on Drupal 8. 

Drupal 7 was a swiss army knife. You can effectively do anything from a small blog site to the largest most complex sites online with it. Drupal 8 is more like a finely sharpened carbon steel Chef’s knife. It still does a lot, but you really shouldn’t use it to peel an apple.

Was that analogy too tortured? Anyway, we are still a Drupal first agency. However, there are definitely use cases where Drupal 8 is not the answer. Compare your project to the examples below to get an idea if Drupal 8 may be the right CMS for your website.

A small 5-10 page “brochure” site that may be updated once a quarter, if that.

This should not be a Drupal 8 site. Wordpress is probably the most common recommendation in this situation, however, I would recommend a different route. If you truly won’t be doing more than the occasional quarterly update, I’d recommend a static site generator (SSG) such as Pelican or GatsbyJS. Wordpress still comes with the overhead of keeping a database-backed web application updated and secure. For a few pages updated a few times a year, I would generate that site with the SSG and push the resulting HTML pages to a web server. With just HTML exposed on the server, your only security concern is if somebody compromises your server account. There is no database or CMS to hack. Your hosting costs are minimized this way too.

A small 50-250 page website that is updated frequently.

On the small end of this spectrum, Wordpress is the most common recommendation. As you get to the 250-page end there starts to be an argument for Drupal 8, especially if you are dealing with some more complex content types. Be careful though. A cheaper Wordpress shop will buy a $30 theme and tweak it to fit your needs. This can work fine, as long as the theme they buy was well constructed based on Wordpress best practices. Often those purchased themes are kind of a mess at the code level. 

If the site is small with static content that is highly trafficked, you can do something really interesting by using the GatsyJS SSG as a front end to Drupal. You can manage the content via Drupal, but publish it as static HTML pages via Gatsby to minimize hosting overhead and improve performance.

A large site with hundreds or thousands of pages that are updated rarely.

Drupal 8 will be the normal recommendation here, and it’s a perfectly valid recommendation. Drupal will allow you to publish structured content across the entire site, plus use taxonomy to relate content. If you need to manage user permissions about who can do what with the content, Drupal 8 becomes a great answer.

But what if you are publishing documentation that will almost never change? Do you really need the overhead of an enterprise-grade CMS that will get used rarely once the site launches? I think the static site generators are a really interesting solution to this use case. Pelican, to reference the SSG I’m most familiar with, can implement tags to relate content, and can identify different authors if it is a multi-author scenario, It has no concept of user permissions though. I’m not aware of any major sites that have been done this way, but it seems like a very low overhead answer to the publish a lot of content once and then mostly forget about it scenario. If you have a project like this let’s talk!

You have a large complex site that has a variety of content types that integrate with 3rd party systems, and it’s crucial to your business that the site stays available and performant.

This is the Drupal 8 wheelhouse. This is what Drupal 8 does best. You can think of Drupal 8 as a box of standard Lego bricks. What you build with it is only limited by your imagination, time and resources. (How big is that box of Lego bricks?) A few of the scenarios that Drupal excels at include:

  • Multi-author websites where you need granular control of publishing and editing permissions by either individual users or groups. This extends to workflow issues where you need a publishing workflow for editorial oversight.
  • E-commerce applications where you are generating significant revenue from the website.
  • Integrated solutions where the website needs to share or sync data with other business systems such as a CRM or AMS.
  • Multi-site applications where you need to manage dozens to hundreds of websites that will all share common elements while allowing for localized control of specific content elements on specific websites.
  • Multi-output applications (decoupled Drupal!) where you need to deliver the same content to disparate devices such as web browsers, mobile apps, digital signage,  voice-activated devices such as an Amazon Echo or Google Home device; and future devices we might not have thought of yet. I can see us interacting with websites via voice activation in our cars in the not too distant future, if it's not already being done. 
  • Multi-lingual websites where you need to manage translated content.

Hey Chris, you didn’t mention SquareSpace, Wix and similar services for smaller sites.

That is correct, I didn’t. Promet is an open source consulting firm, and personally, I’m an open source advocate. I avoid proprietary solutions when an open source option exists. That said, if you need to publish a small static website and want to take the path of least resistance with SquareSpace or similar, I don’t think it’s a particularly bad idea.  If your content got locked up in one of those services the site is presumably small enough that starting over won’t be that painful. But I’m not going to recommend those services, at least not in writing ;)

If you have any questions about what to do with your website please get in touch.
 

Dec 19 2018
Dec 19

Imagine if you will, you have an Events link on your main menu. Someone clicks on it and the Events landing page is loaded in their browser. How was this page built? With Drupal, you have several options. 

If you are the kind of person who likes to have a say in the way things are done, be it from a previous bad experience or idle curiosity, the following will help you engage in the planning aspects of your Drupal site. So, let’s look at five recipes for building landing pages in Drupal.

  • Node page
  • Node Plus View Block
  • A View Page Plus a Block
  • Panel Page
  • Custom Theme Page

Node Page

Content pages in Drupal are called nodes. You fill out a form (e.g., a content type) online, save, and you have an article or event or some other kind of page. This page has a URL. That’s important to remember. Every page in a website has to have a URL. 

How

Using Drupal’s default Basic Page content type, you fill out the form. Give the page a title of About Us. Fill in the body field with information about you or your company. Add it to the main navigation menu with a check of a box. Lastly, you create an URL alias. Instead of the default format of /node/3, you want /about-us. Save and you see your new landing page.

Yes, it’s boring, but we’re just getting warmed up. 

Why

Simple page. Simple technique. Easy to create and edit. Easy to translate in a multilingual site. And let’s not forget the other cool things you can do with a node.

Node Plus a View

Building on the previous example, let’s build an Events landing page. Obviously, this kind of page is going to be a little more complicated. Here are the requirements: a title, some introductory text, and a list of Events that you created using an Events content type. You will have many events so using a manual approach to creating and updating a list of events is not a fun idea.

How

With this scenario, you use the Basic Page content type and create a node titled Events. Using the body field, you add some text that describes your events. Like before, check the box to add this node to the main navigation. Give your page the URL alias of /events. Save and the first part of the configuration is complete.

The next step in the configuration process is a little more complicated, but it’s the concepts you need, not the details at this time.

Drupal has a module called Views. It’s an incredible tool that lets you create an SQL query on the database and then create a display for the results of that query. For this landing page, you need events for the future, not the past, so you filter accordingly.

Given we already have a Drupal feature with its own URL (the event node), we don’t need another. That means you will create a block display for the SQL query results. Blocks can be small bits of information or larger, more complicated displays. They can even hold forms. What they don’t have is a URL. They only show up because a page is there to host them.

Without going into all the particulars, you will place the block so it appears under the body field. If you want to know more about how this done, please join us in a Drupal 8 Site Building Best Practice training class.

When you go to the yoursitename.com/events URL, you will see the Events node and the view block that lists the upcoming events. With some styling, you can make the two features (node and view) appear as one, seamless page.

Why

Some will argue that you could have made a View page versus using this two-step process. And, in the next example, you will. In this scenario, you looked ahead and saw that the introduction text would not be a fixed blurb. You will change it from one season to another and your staff will not have the skills to edit a View.

So, this scenario worked nicely for your business process and staff.

A View Page Plus a Block

Let’s change up the requirements as a means of introducing another build option. You need a list of events, but instead of some introduction text, you need an image banner. There are several ways to accommodate this new image requirement, including adding to the previous scenario. In this example, we will use a View page and a block.

How

Create an SQL query, grabbing all the events scheduled for the future. Instead of displaying the list of events in a block, you create a page with a URL of /events and place it on the main navigation menu.

Next, create the block that will display your image banner. Like with most requirements, Drupal provides several alternatives to meeting them. For this scenario, assuming you are using Drupal 8, create a new block type called Image Banner. Add an image field to the new block form and set the field display to show only the image.

Create a block, using your new block type. Upload the image you need for the Events landing page. This process is very similar to creating a node. The input form looks similar as well. 

Place the banner image block either above or below the page title block to match your design. This is a quick and easy way to insert an image above the title of the page if that is your choice. 

Why

A View page isn’t like a node. It doesn’t have fields. You can add a header and footer text, but it’s not the same as adding a field to a node. Bottom line, a View show the results of a query - typically that of nodes. So, if you need to display information other than the query results, you might need to use methods like described above, by adding blocks or combining a node with a view.

Another reason for mixing and matching features to create a landing page is display. By default, a Drupal page - node or view - is broken into two parts: Title block and Main Page Content block. If we had chosen to add an image to the available header text box in the view, the image would appear below the page title. Yes, you can do some template coding and rearrange things a bit, but why would you if you could simply place a block and accomplish the same goal.

The point of all this is, remember that content comes in parts in the Drupal world, and quite often, a simple mix and match strategy is all that needed.

Taxonomy View Page

A technique that can be overlooked is the use of the default taxonomy term page. A term is a word or phrase used to describe the content in the node. By default, a term page displays when someone clicks on a term link shown on a node. The page provides a list of nodes tagged with that term. 

Let’s see how this default feature might be used to create landing pages by changing our focus from Events to types of content.

How

Imagine that you have three types of content that will be placed in a body field: How-to Lessons, News, and Blogs. Instead of creating three separate content type forms, you add a field that assigns terms to the content, declaring it a How-to Lesson, for instance.

By default, the How-to Lesson term has its own landing page. In Drupal 8, the term page is a View page and can be modified to meet your display layout needs.

Let’s take this scenario one step further. It’s come to your attention that you need a banner image and introduction text to appear above the list of nodes tagged as How-to Lesson. In this scenario, you can add an image field to the term and use the description field for your introduction text.

The results are very similar to what we have created in the previous scenarios: a page title, and image, some text, and a list of nodes. Place the page URL on the main menu and you have a landing page. 

Hopefully, this demonstrates the need to think about your processes before choosing a configuration strategy. There are several steps involved but it’s actually quite easy to learn how to do in a Drupal training class.

Why

Websites can be complex and that might mean multiple content types. However, imagine that one of your staff is blogging the latest insight on gardening strategies and it morphs into a how-to lesson. If they created the blog post in the Blog content type, they would need to move that content to the How-to Lesson content type instead. 

If this is something that might happen, create one content type for narrative content and use terms to distinguish between them. If you do, you can then take advantage of the term’s default pages, as demonstrated in this example.

Panel Page

So far, our examples assumed simple displays. What if you want to create a landing page whose content is built solely from blocks. Basic text blocks. View blocks. Blocks from other modules. Again, there are several ways to make this happen, especially if your theme (that bundle of code that controls the look and layout of your site) has the appropriate regions to organize your blocks in the way you need.

For now, let’s assume you need something unique.

How

Panels is a module that you can add to Drupal. It provides a graphic user interface (GUI) and allows you to create a page with its own URL that can be assigned to the main menu. Remember, if you need a page in Drupal, it has to come from something that can have its own URL. You can also create a custom layout to display blocks.

The process to complete this task is too complicated to step through here, but it can be learned in a Drupal training class.

Why

Some will say that you should create the theme regions you need versus using Panels, and they would have a valid point. However, if by now you are intrigued with the build process and are wondering if you might be able to do it yourself, then a tool such as Panels doesn’t require you to know how to customize a theme. 

Of course, with training, a custom theme is something you can manage. In fact, let’s consider one way of using a custom theme to create a page on your site.

Custom Theme Page

Let’s take a moment to consider the Drupal theme. Without going into all the details of theme development, at a minimum, you need to know that the theme defines the regions (header, navigation, sidebars, content, footer, and more) used to organize and display blocks. It also manages the templates used to say what gets rendered in the region.

For example, there is a page template. This renders the region if there is a block assigned to show in said region. You can add as many regions you want in order to accommodate the various block layouts you need.

You can also create a template for a single page. Let’s consider this strategy for a moment. 

How

Assume that you created a node using the Basic Page content type and titled it Resources. In the theme, you create a template specific to this node. At this point, it’s all about hand coding. You create a template that renders all the blocks you have created to display on this page. Then, with some CSS, you style the blocks in a layout of your choosing.

With the Resources node assigned to the main navigation menu,  you have the page you need because its custom template is hard coded.

Why

To be honest, although this blogger has seen this approach used, it is not conducive to making quick changes to the page. Why is it listed as an option? Because, depending on who you hire to create your site, you might end up with a vendor that uses this technique. Be it on purpose to gain maintenance business from you or just from lack of Drupal building experience, you could end up with a site that does not take advantage of Drupal’s flexibility.

Make sure you are specific in your requirements regarding the use of custom code if this is a concern.

Planning and Promet

The five options conveyed here are not the only options you have available. Moving forward, consider taking an active role in the development strategies chosen to create your site to ensure you receive a solution you can manage. 

Remember to build in time in your schedule to have development strategies discussed before they are implemented. If your developer is reluctant to let you in on their plans for meeting your requirements, they might not be the vendor for you. 

If you still have questions, check out Drupal 8 Makes it Easier and The Path to Migration to learn more about your options and considerations for your project.

Promet offers a unique planning engagement that we call our Architecture Workshop. This workshop is a customized engagement that engages all of your stakeholders in the Discovery Process. We do a 3-5 days of intensive onsite exercises with stakeholders (for your busy C-level folks we customize the agenda to bring them in where they are needed during this onsite). Then the team goes away and produces a set of deliverables that includes a full-field level Architecture Blueprint of the website(s). Whether you choose to use a waterfall or agile development methodologies - you have everything you need to build the website everyone has agreed upon. 

Not building your site and stressed out about getting an accurate quote? Investing in this kind of Workshop will make sure that you get the right Partner, and the best price.

For more planning information email [email protected].

Dec 19 2018
Dec 19

Have you ever tried logging in or registering to a website and you were asked to identify some distorted numbers and letters and type it into the provided box? That is the CAPTCHA system.

The CAPTCHA helps to verify whether your site's visitor is an actual human being or a robot. Not a robot like you see in the Terminator movie but an automated software to generate undesired electronic messages (or content). In short, CAPTCHA protects you from SPAM.
 

Distorted texts and numbers, for example, could not be recognized by bots so by providing this we are sure that only a human can log in or register.


This works! But there are some downfalls to this. For one, it's not user-friendly to visitors who are visually impaired. Reading distorted numbers and letters can be annoying to regular users, how much more to a user with a visual disability. The last thing we want from our visitors' is form abandonment, that is, leaving without even the chance to enter.
 

The solution? reCAPTCHA!
 

Drupal's reCAPTCHA module uses the Google reCAPTCHA to improve the CAPTCHA system. The reCAPTCHA module is a very efficient addon to the original CAPTCHA module.

With reCAPTCHA, we have the choice to provide a simple checkbox that asks our users if they are a robot or not. this is so much easier than asking our users to read distorted characters. We can also provide several random images and ask our users to check a specific image. This kind of test could not be passed by a robot, but we humans can!

Why trouble with bots? You may ask. The CAPTCHA system provides security, including but not limited to:

                -  Preventing Comment Spam in Blogs.
                -  Protecting Website Registration.
                -  Protecting Email Addresses From Scrapers.
                -  Online Polls.
                -  Preventing Dictionary Attacks.
                -  Search Engine Bots
                -  Worms (malware computer program) and SPAMs (undesired messages/content).

So how do we set up reCAPTCHA for our forms? Read along for an easy and detailed guide in setting up reCAPTCHA for your forms. this tutorial provides screenshots of every of every step of the way.
 

Install
 

Download and install CAPTCHA and reCAPTCHA module.

Using your favorite installation mode the Drupal UI, copy/paste from drupal.org, Drush, or Composer. Just remember that to use reCAPTCHA, you need the CAPTCHA module.

If your site is set using the PHP dependency manager called composer (like we do at Promet Source), add reCAPTCHA and the CAPTCHA module will be added automatically as dependencies:

$ composer require drupal/recaptcha


 

Enable
 

With Drush, you can enable the reCAPTCHA module by running the command in your terminal.

$ drush en recaptcha

Drush is fantastic to interact with Drupal and work faster. Learn more: Drush Made Simple).

You can also enable the module in the UI at "/admin/modules".

Search for Recaptcha, Click the checkbox and click 'install'.
 

Enabled reCAPTCHA module


Configure
 

Go to "admin/config" and choose CAPTCHA module settings.
 

CAPTCHA module settings


In the form protection default challenge type drop-down, choose reCAPTCHA from module reCAPTCHA. Don't forget to click 'Save configuration'.
 

CAPTCHA settings


After saving, click the reCAPTCHA tab.
You will be asked for the 'Site key' and 'Secret key'.
Click on the link Register for the reCAPTCHA, you will then be automatically redirected to Google.

Register your website for reCAPTCHA

Write your domain name in 'domains'.
 

A screenshot of the form where the site has to be registered for reCAPTCHA


You will be provided with the site key and secret key. Go back to "admin/config/people/captcha/recaptcha" and fill up the "Site key" in the general settings.

Click save.
 

CAPTCHA keys

Then go to CAPTCHA Points.

Choose which form you would like to use your reCAPTCHA.

TEST!!

To test, simply open your website and try visiting the form where you enabled the reCAPTCHA.

In this tutorial, the form that I choose to use reCAPTCHA is the login form.

reCAPTCHA displayed in a login page

Additional step: For local testing ONLY

If you want to do the above steps in your local environment, you have to disable the domain name validation in your reCAPTCHA configuration in google.com

Click the Advance settings and disable the domain name validation.
 

CAPTCHA for local testing


Don't forget to test by accessing your form in an incognito browser.

And there you have it, reCAPTCHA configured! Your Drupal 8 project is now protected by Google's reCAPTCHA system.

Say no to bots, yes to human...

Questions?
Drop them in the comments section below this article :)

Special thanks to Luc Bezier for contributing to this post before publication.

 

Nov 15 2018
Nov 15

Did someone test your website for accessibility conformance without your knowledge and then inform you that your organization is prime for an accessibility lawsuit? Are they offering to help you fix the issues found on your website? 

That notification and offer might be valid, but it also might not be the entire picture. One free test grade might not reflect how your site is doing in all its accessibility subjects because automated testing tools can't find all the problems. We believe in assessing all topics of accessibility before recommending a sit down to discuss your options on how to proceed.

How do we do it? 

We don't rely on automated testing to reveal the true nature of a website's issues. We manually test it as well. We look at what makes your website unique and try to understand its mission before creating a scorecard you can use in your decision-making process.

This card reflects several perspectives including the issues anyone with an automated testing tool can see, including you. Many are free to use and quite robust in their feedback. Give one a try. For example, Code Sniffer.

But don't stop there. Our scorecard also reflects a sample of other accessibility issues not seen by the tool.

Last but not least, we look at how you are delivering your website. This part of the review is critical to understanding whether fixing or rebuilding the site is going to be your most cost-effective solution.

Website Grade

Just like the report card you got as a kid, we use grades to convey the accuracy and quality of your work, or in this case, your website. As you can see below, there are degrees of quality: A through D. No F, for failure. We assume no site is that bad.

A – Accessible & modern platform, main issues residing solely in the content
B – Accessible & modern platform, but issues with template items such as menus, sidebars, and in-line styling
C – Accessible & modern platform, but many features need to be replaced or reworked to achieve compliance
D – Antiquated platform, non-responsive, easier to rebuild vs. fix

The Scorecard is not intended to act as a thorough report or formal recommendation, simply a high-level overview. It's our tool to facilitate a conversation with you and help you choose the best path to remediation.

For example, we might find that you are using a content management system tuned to meet the accessibility criterion, but your content developers aren't using appropriate techniques when posting. Fixing existing content issues without “fixing” the reason the issues exist just means your site will continue to have problems.

Or, the example could be far worse. We hate to say it in this day of accessibility lawsuits, but there are still platforms out there that don't follow the rules. If your site was created using an antiquated approach, it might be more cost effective to rebuild rather than create workarounds in your current system.

Our Passion

Here at Promet Source, we are passionate about accessibility. We offer an array of services and remediation options that can be shaped to fit your needs. But, be warned, we are not a quick fix/band-aid company. We believe in enabling you to move forward knowing that you have a fully accessible site and the means to keep it accessible.
 
The decision process associated with such an undertaking can feel overwhelming. That's why we offer the scorecard as part of your remediation process. It's your tool to use in helping others in your organization to understand the level of effort you are facing by moving forward. 

We find that when all stakeholders have an understanding and are vested in doing the right thing, the future of a website is easier to envision. 

We look forward to talking to you about that phone call you got by surprise or that unsolicited email full of ill tidings. Don't worry, we can help you understand and make informed decisions.
 

Nov 15 2018
Nov 15

Did someone test your website for accessibility conformance without your knowledge and then inform you that your organization is prime for an accessibility lawsuit? Are they offering to help you fix the issues found on your website? 

That notification and offer might be valid, but it also might not be the entire picture. One free test grade might not reflect how your site is doing in all its accessibility subjects because automated testing tools can't find all the problems. We believe in assessing all topics of accessibility before recommending a sit down to discuss your options on how to proceed.

How do we do it? 

We don't rely on automated testing to reveal the true nature of a website's issues. We manually test it as well. We look at what makes your website unique and try to understand its mission before creating a scorecard you can use in your decision-making process.

This card reflects several perspectives including the issues anyone with an automated testing tool can see, including you. Many are free to use and quite robust in their feedback. Give one a try. For example, Code Sniffer.

But don't stop there. Our scorecard also reflects a sample of other accessibility issues not seen by the tool.

Last but not least, we look at how you are delivering your website. This part of the review is critical to understanding whether fixing or rebuilding the site is going to be your most cost-effective solution.

Website Grade

Just like the report card you got as a kid, we use grades to convey the accuracy and quality of your work, or in this case, your website. As you can see below, there are degrees of quality: A through D. No F, for failure. We assume no site is that bad.

A – Responsive & modern platform, main issues residing solely in the content
B – Responsive & modern platform, but issues with template items such as menus, sidebars, and in-line styling
C – Responsive & modern platform, but many features need to be replaced or reworked to achieve compliance
D – Antiquated platform, non-responsive, easier to rebuild vs. fix

The Scorecard is not intended to act as a thorough report or formal recommendation, simply a high-level overview. It's our tool to facilitate a conversation with you and help you choose the best path to remediation.

For example, we might find that you are using a content management system tuned to meet the accessibility criterion, but your content developers aren't using appropriate techniques when posting. Fixing existing content issues without “fixing” the reason the issues exist just means your site will continue to have problems.

Or, the example could be far worse. We hate to say it in this day of accessibility lawsuits, but there are still platforms out there that don't follow the rules. If your site was created using an antiquated approach, it might be more cost effective to rebuild rather than create workarounds in your current system.

Our Passion

Here at Promet Source, we are passionate about accessibility. We offer an array of services and remediation options that can be shaped to fit your needs. But, be warned, we are not a quick fix/band-aid company. We believe in enabling you to move forward knowing that you have a fully accessible site and the means to keep it accessible.
 
The decision process associated with such an undertaking can feel overwhelming. That's why we offer the scorecard as part of your remediation process. It's your tool to use in helping others in your organization to understand the level of effort you are facing by moving forward. 

We find that when all stakeholders have an understanding and are vested in doing the right thing, the future of a website is easier to envision. 

We look forward to talking to you about that phone call you got by surprise or that unsolicited email full of ill tidings. Don't worry, we can help you understand and make informed decisions.

Email us for help!
 

Nov 13 2018
Nov 13

Partnership combines comprehensive UI design, UX, and digital strategy, with web development proficiency, to produce a holistic experience for clients.

Chicago, Illinois — November 13, 2018 — In September 2018, Promet Source acquired DAHU Agency, a strategy-focused, user experience and design agency that enhances the services offered to its clients. By expanding their services in UX and UI, and bringing new offerings in-house for digital strategy, WordPress development, messaging, and branding –  Promet aims to better serve their clients evolving needs as marketing and web technologies continue to converge and the need to provide functional, dynamic websites increases.

 

In his vision for Promet to be a strong digital agency focused on creating great user experiences through meaningful web applications, Andy Kurcharski, President of Promet, seeks to accelerate growth and innovation by providing comprehensive digital services to his clients.  Andy has more than 20 years of technical leadership experience from startups to Fortune 50 firms with industry experience in banking, telecommunications, government, and association technology management. Andy’s e-commerce experience dates to 1998 with the implementation of highly scalable enterprise solutions.

 

“In today’s technology landscape, we are seeing that our clients and their customers expect more from their websites” Kurcharski expressed. “Our addition of a new team to our existing core of web developers will help us to proactively approach new websites with a holistic mindset combining our technology expertise with great design and function to ultimately increase client success online.”

 

DAHU Agency, based in Dallas, Texas, not only provides Promet with an office central to service their clients in the Southwest region but also brings expertise in design and digital strategy to help optimize user experience within an organization’s website.

 

Mindy League, CEO, and founder of DAHU Agency offers a highly thoughtful and adaptive approach to constantly evolving technologies and user behaviors. Her experience in building solutions for clients such as HP, Emerson, IBM, and Home Depot, contribute to a depth of perspective into the challenges and opportunities faced by top global brands. Mindy will join Promet as the Director of User Experience and Design.

 

DAHU’s distinct approach to engaging with clients has been described as “radical empathy” and it is this philosophy and mindset that complements Promet’s dedication to delivering groundbreaking results to their clients. Whether examining the impact of corporate strategies on customers and the broader enterprise or developing products, Promet aims to step into their clients’ businesses with a fervent dedication to excellent experiences and high-impact results.

 

Click here for full press release. 


 

Nov 01 2018
Nov 01

Your company brand encompasses the entire perception of your organization through the eyes of your customers, clients, and employees. Branding consists of more than just your logo and typeface selections; it is how the public (usually users and/or customers) experiences your business. How you position your brand can certainly define the customers’ experience of your organization. However, consider first planning great experiences for your users and customers in order to develop a more customer-centric brand identity. Changing to this strategy requires a solid understanding of your users and customers as well as a thoroughly considered mission statement prior to developing your brand.

UNDERSTAND YOUR USERS AND CUSTOMERS

Knowing who your business is intended to cater to will help you to plan all the touchpoints your customers and clients will have with you, from the in-person experience to the web and social media experience to even the look and feel of business cards you hand out. For example, if your target audience consists of Millennials, your language and messaging would be different than if it consisted of top-level executives and managers. User experience research techniques can be used to help define different customer/client personas. These personas can be used essentially as avatars for your customer base. As new services or features are developed, keep these personas in mind to ensure that these new offerings align with their needs and desires. At times, new personas might replace or get added to the list.

RELY ON YOUR MISSION STATEMENT

Your mission statement defines the core purpose of your business. There’s a delicate balance required between keeping it broad enough to encompass your long term vision, yet narrow enough to define your identity for both your employees and your customers. A good mission statement represents what you stand for in specific, actionable ways. It paves the way for how your employees interact with your customers. The length of your mission statement may range from a sentence or two to several paragraphs, a good rule of thumb would be to keep it as succinct as possible in order to avoid providing too narrow a focus and thus reducing strategic flexibility. Also, keep in mind that your mission statement can evolve over time to adjust for the market, your competitors, and your customer’s needs and desires.

DESIGN YOUR USER AND CUSTOMER EXPERIENCES

The broad definition of User and Customer Experience includes how your customers interact with all facets of your business. Rely on your mission statement and understanding of your customers to help define how you want those interactions to occur instead of leaving it to chance and risking a negative experience. For instance, if you wish to present your organization as caring and supportive to your user base, friendlier language and a welcoming user interface on your website or software would communicate your caring and empathic intent.

User and Customer Experience is about setting and meeting the users’ expectations through clarity of messaging and purpose. Keeping the customer experiences in mind at all times when developing your business processes will help ensure that your customers stay positively engaged with your organization.

By tailoring your business strategies around your customers’ expectations and the driving force behind your mission statement, you can create specific user and customer experiences.  These experiences reinforce their expectations and your mission statement, creating a sustainable, healthy feedback loop. For example, McDonalds recently responded to customer requests by running focus groups to test the viability of providing all-day breakfast service to their fans. Before simply agreeing to these requests (the first of which were posted in 2007!), McDonalds tested the viability of the service through focus group and user testing in small markets in order to ensure that the service could be provided within customer expectations. This is a great example of using feedback and relying on thorough user and customer research to improve brand perception through ensuring consistent customer experience, even for new offerings.1

By leveraging this valuable feedback loop to guide the underlying framework of your business decisions, you can ensure that your organization adjusts to changing expectations and trends, keeping your brand fresh and relevant for as long as possible – while keeping your customers engaged.

1The Story of How McDonald’s All-Day Breakfast Came to Be

 

 

Oct 20 2018
Oct 20

The most common way to post content on a web page is via HTML text, images, audio, and video. No matter your approach to content delivery, you probably know that your approach needs to be accessible. Did you know that non-web content such as Adobe PDF documents needs to be accessible as well?

Is your restaurant menu downloadable? Do you post your meeting agendas? What about event brochures or product catalogs? PDF files are great for such purposes and need to be accessible.

Did you know that the rules you follow to create accessible HTML content, also apply to non-web content such as Word and PDF files? You might be wondering how one makes non-web files like PDFs accessible. That’s where the Web Content Accessibility Guidelines (WCAG) comes into play. Of course, not all will apply such as Bypass Blocks and Captions for video but the WCAG criterion will be your guide. 

Let’s consider some of the guidelines that will apply to non-web documents.

Applicable WCAG Criterion

When creating documents, you need to cover the basics. 

  • Declare the document’s language.
  • Include a title for your document
  • Use Header styles instead of manually bolding a header or changing its font size
  • Ensure that said headers are orderly, that you don’t jump from header 2 to header 4, for instance
  • Include a brief description of your images via alternative text 
  • Ensure color contrast ratios are met
  • Identify the meaning of shapes and icons that you might use
  • Declare header row in any data tables you create
  • Resist the urge to use tables to manage your content layout
  • Ensure that embedded links have a clear purpose (no “Click here” links)
  • Remember not to leave inline bookmarks hanging without its partner link

The more complicated the PDF, such as those with forms, you will need to meet another criterion.  However, for your basic content document, hopefully, you are thinking that this list doesn’t sound too bad. If not, you have help. If you miss something while creating your PDF, Adobe Acrobat has an accessibility testing tool that will remind you to check things it can’t, tell you if it sees something wrong, and will give you help to fix the issues.

But, let’s not get ahead of ourselves. The first step in the process of creating the accessible PDFs.

Create a Source File

Microsoft Office, Corel, Google, and Adobe are just a sampling of product vendors whose applications can create PDF files after its user has created a source file. Perhaps you are using one of these or some other application. As long as your source file can be made to accommodate the requirements listed above before you export a PDF, then you are well on your way to creating an accessible document.

Save As or Export a PDF

If you create an MS Word document, for example, the process is to save as a PDF. If you create an InDesign document, the process is to export. Whatever the vernacular, convert your source file into a PDF.  

Convert does not mean print to PDF, nor does it mean scan to PDF. Both of these options create an image of the text. That means assistive technology cannot see the text. 

Sadly, not all conversion processes work perfectly. That means testing and repair is required.

Test and Touch up the PDF

Even if you have a simple Word document with sections and subsections divided by headers, you can still run into issues once the file has been converted to PDF. Use the accessibility testing tool in Adobe Acrobat to check for hidden issues. 

For instance, by default, the Acrobat accessibility test result will likely tell you to check your color contrast - assuming you are using color in your document. It might also say you don’t have a title when you do. FYI, the title being requested is part of the document’s metadata. Lastly, it will likely ask you to check the logical reading order of your content. 

You might think that checking the logical reading order can be ignored. You created a document whose content is presented in a logical order. How could it have possibly changed? Just to be sure, you scroll through the PDF and see that all is well. 

Logical reading order isn’t about what you see, it’s about the order assistive technology will read the content. So, be sure to click on Reading Order in the Accessibility options in Acrobat. Make sure that the numbers assigned to each item on the page convey the actual order. You would be surprised how often the reading order differs from what you see.

There could be other issues the test reveals. Don’t worry about not knowing how to fix all the issues it finds. Acrobat provides links to short tutorials that explain how to remedy an accessibility problem it has found. 

However, before you fix something in the PDF, make sure it was formatted correctly in the source of the source file. It if is not, fix it there and convert again.

Conclusion

If you have a choice between placing content on your site via a PDF versus HTML text, consider the HTML text first. HTML text is more accessible than a file that has to be downloaded. Plus it is easier to format HTML text and images to be accessible.

If faced with a multi-page source file that can’t easily be ported into HTML text, then plan ahead. Allow time to inspect your PDF’s reading order and remedy any accessibility issues before you put it online.

Not sure you have a problem? Email our Accessibility Experts - they can evaluate your site, and provide you with an Accessibility Scorecard. If you know your documents are a problem, we can estimate the cost of remediating those documents. 

Oct 18 2018
Oct 18

A web page in Drupal is made up of several parts. For instance, you have the header and navigation that appears on each page. You have the main content region that holds your articles or the details associated with your events. On either side of the content, you might have sidebars with blocks suggesting related content or a call to action. 

Typically, each part of the page is created or managed by different members of your website team. The developers that originally created your site will have set up your header and menu, for example. You might have a trained IT member of your team tasked to create and place blocks in the sidebars as needed. Then, when a content author publishes an article, those blocks appear as planned on the article.

A setup like this taxes your IT team and limits your content authors. Let’s explore how content types, fields, and views can empower your authors to influence the block that appears in the sidebars from article to article.

Planning Your Blocks

A simple exercise in the planning process is to ask the question, when X-type of content is published, what blocks should also appear? Traditionally, this would mean a fixed set of blocks configured to be visible on that content type or based on the URL alias.

But, what if you need a more granular approach to creating and enabling blocks? What if you wanted your content author to create and enable blocks without having to train them to be a Drupal builder?

Let’s explore an example scenario where you list all the blocks you might need from one article post to another:

  • More like this
  • Related training
  • Call to action
  • Archive
  • Guest speakers

A few of these blocks can be set up during development to activate automatically. For example, if the article is tagged as a container garden, then other articles tagged as such will appear in a "More Like This" block. But what about Calls to Action? Let’s take a closer look at those blocks that can’t be predicted with ease.

Related Training

You could design a Related Training block much like the More Like This block where training events would be listed in the block just because they have been tagged with the same term. 

What if the content is a how-to piece giving a sneak preview to one of the more simpler tasks that will be taught in a series of training events? In this scenario, the author wants to control which event to advertise, but she doesn’t want to include that advertisement in her narrative.

So, in the narrative content type, you add a field that allows the author to reference the training event nodes that are directly associated with the content of the how-to lesson. Following the same concept as in the previous example, you hide the event reference field and print it via a Views block. The block appears in a predestined spot on the page.

With this approach, with some planning, the block can be configured to include a thumbnail image taken from the events in question along with date and time information, making it more than a list of the titles that appear in the reference field.

Call to Action

Your content author has created an article about a new technology that will be presented at the conference. You are not presenting a session, but you will be hosting a networking event for attendees who want to extend their conference experience and meeting others in the field. The article is not the event. There’s an event node in another section of the site.

You want a Call to Action block to appear with this article, giving site visitors a link to sign up for the networking session. The common practice would be to create an advertising block and then place that block to be visible for this specific article.

Another strategy would be to add a field set to the content type you use for your narratives such as blogs, news, and how-to lessons. You would add an image field, a text field, a link field, and an on/off field. They would not be set to show. Instead, a contextual view block would be created, one on the lookout for someone to fill in the call-to-action fields and turn it on.

The Call to Action block will show up at the author’s discretion in a place on the page decided by the User Experience designer during the planning phase of your website development project.

Archive

Drupal 8 ships with a predefined View called Archive. It provides a block that lists months and includes a number representing how many nodes were published in that month. By default, all nodes are included but that doesn’t mean you can’t add filters to limit what gets included in the count.

Not all narrative content will be enhanced by including an Archive block, therefore having it enabled by default, could take up screen space needed for other more useful blocks. So, how does a content author turn this block on and off as needed? 

First, identify the scenarios where your users would benefit from being able to find previous narratives in common with the one they are viewing.  Then, using the same strategy applied for the Call to Action block, add an on/off field for the Archive block. Edit the Archive View to look for this field to be set to on.

This scenario and the previous one will depend on your trust in the author to know when to turn on Call to Action and/or Archive. That’s where business rules come into play and ensuring all know how to follow them. 

Guest Speakers

This time, your content author is creating an event with multiple guest speakers. You have decided that creating a speaker page for every guest could amount to many nodes that aren’t worth maintaining. Instead, you want to link to the speaker’s own website.

Of course, you could make this information available is a list of links as part of the event, but given all the data you are already including, it’s been decided that highlighting the speakers in their own blocks is a better option.

Using the same strategy enabled in the Call to Action scenario, you create a set of fields: image, text, link, on/off. This time, however, you need the ability to have multiple speakers so you need this set of fields to repeat. There is a module called Paragraphs that will be your friend in this example.

Paragraphs allow you to create a set of fields that can be repeated on the page. Instead of including them in the display, you use a View to show the information in a block.

Performance

You might be starting to wonder about the performance of your site with all these queries on the database. And, you would be right to be concerned if you had no caching plan in place. Outside of Drupal, you have caching tools such as Varnish that can help deliver your pages quickly.

Have a Plan

When it comes to Drupal, using your imagination is key to empowering your content authors. Start by mapping your processes. Ask yourself what has to be available in order to execute the process differently.

Remember, you don’t have to teach your content authors how to create and place blocks. You can plan ahead and give them simple options within the environment they will already be working. Assuming default processes are your only option can frustrate your users.

Need Help?

Promet offers best practice Training to help give your team the know-how to be prepared for these scenarios. Want to run scenarios like this by our experts to get advice on pages, or even plan a new website from the ground up? Promet is happy to create small and large planning exercises for you and your team to get the most out of your Drupal site.

Oct 15 2018
Oct 15

If someone sues you because your website has accessibility issues, it usually means they need you to fix said issues. Sadly, there will be those lawsuits where the complaint is trigger more by the desire of monetary compensation from a settlement than the present accessibility issues, but in either scenario, there has to be grounds for the complaint which means something needs remediation on your site. 

Why are we stating the obvious? Because it's not obvious to all who find themselves with a letter or lawsuit claiming that their website is inaccessible and therefore discriminates against individuals with vision, hearing, and/or physical disabilities under ADA Title III.

Defenses against inaccessibility claims that have been seen in the news include:

  • Websites aren’t included under ADA Title III
  • Even if they are, it’s moot in this case

ADA Title III Defense?

On October 31, 2017, a letter was sent to The Honorable Jeff Sessions, Attorney General, United States Department of Justice, and signed by sixty-one Members of Congress, urging the DOJ “to restart the process of issuing regulatory guidance regarding the Internet under Title III of the ADA.”1

Restart? Yes. 

In this same letter, the sixty-one Members of Congress reminds the Attorney General that the DOJ, in their 2010 ANPR, states “Although [DOJ] has been clear that the ADA applies to websites of private entities that meet the definition of ‘public accommodations,’ inconsistent court decisions, differing standards for determining Web accessibility, and repeated calls for [DOJ] action indicate remaining uncertainty regarding the applicability of the ADA to websites of entities” included in Title III. 

Unfortunately, the 2010 Advance Notice of Proposed Rulemaking2 where “the Department encourages small entities to provide cost data on the potential economic impact of adopting a specific requirement for website accessibility and recommendations on less burdensome alternatives, with cost information,” has been given a status of inactive under Trump’s Unified Regulatory Agenda released in July 2017.3 

On July 19, 2018, another letter was sent to the The Honorable Jefferson B. Sessions, III by the Attorneys General of 18 states and the District of Columbia on the same topic sent by the Members of Congress.4

If the DOJ recognizes that Title III is unclear, is it no wonder that site owners still try to claim that websites aren't included in Title III? No. 

However, as you read about website accessibility cases in the news, it’s clear that the courts have decided that it does. Whether it was the Winn Dixie case in June of 20175 that set the precedence or that the plaintiff in this case has brought other similar suits since then, it doesn’t matter. Compliance with the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG), level AA is here to stay. Whether its WCAG version 2.0 or the recent 2.1, courts are ruling that these guidelines must be met.

So, what other defense can a business make to stop a website accessibility lawsuit? Other than remediating the problem?

Moot Defense?

If you aren’t a lawyer, you might be scratching your head right now. Moot? Don’t worry, you’re not the only one. Let’s start with a simple example.

Carroll v. New People's Bank, Inc.6

Filed in November, 2017 and terminated in April, 2018. First, please note the length of time required to adjudicate this case, only to have it dismissed. Here is a brief look at what transpired.

  • “NPB's website contains accessibility barriers, which Carroll alleges prevent him from using screen reading software to freely navigate the site.”
  • “NPB informed Carroll of its intent to develop a new website by letter in November 2017, prior to the filing of his lawsuit. In this letter, NPB stated that they had "voluntarily made a number of improvements" to the website and had "retained a third-party to develop a new website for the bank which [would] further improve [the website's] accessibility and client service feature-set."”
  • “Carroll argues that this new website does not render his claim moot because there is no guarantee that NPB will not revert to its former inaccessible website in the future.” 
  • “NPB has moved to dismiss the Complaint for lack of standing.”
  • “NPB contends that, in any event, Carroll's claim is now moot based on its voluntary upgrades made to the website after this action was filed, which upgrades Carroll does not dispute.”

Obviously, there’s more to this case than the snippets provided here. In fact, the case is interesting reading. Bottomline, NPB responded to Carrol’s letter, fixed the site, and the case was dismissed.

Haynes v. Hooters of America, LLC7

This next case isn’t as straightforward as Carroll’s claim being moot. This one is about getting sued twice for the same issue. Here is brief look at the ruling.

  • “On April 4, 2017, Haynes sued Hooters in the United States District Court for the Southern District of Florida …” In short, Haynes wanted Hooters to fix the accessibility issues on their site.
  • “Prior to the initiation of Haynes’ suit, on August 22, 2016, a different plaintiff filed a separate and nearly identical website-inaccessibility lawsuit against Hooters. Less than three weeks after the filing of that suit, the parties reached an agreement and settled their dispute (“Gomez Settlement Agreement”) ...”
  • “Hooters moved to dismiss Haynes’ suit, arguing that, because Hooters was in the process of actively implementing a remediation plan for its website, pursuant to the Gomez Settlement Agreement, there was no live case or controversy and Haynes’ claim must be dismissed on the mootness grounds.” They had until September 2018 to fix their site.
  • The district court agreed with Hooters and dismissed the case.
  • But, Haynes didn’t agree, and neither did the Eleventh Circuit in their June, 2018 ruling that “the case is not moot.” 

Again, there is more to this case that is briefly summarized here. In short, Haynes had no way to know or to ensure that the remedies being planned would resolve the issues he was having with the site. Therefore, his claim was valid. Yes, you can get sued twice for the same thing if the issue is still present on your site. 

Lessons Learned

There are four lessons worth mentioning. 

Audit Your Site Before You Get Sued

There is no argument that it’s going to cost you money to have your site audited appropriately for accessibility issues and ultimately remediated if problems exist. You could wait to see if you get caught but at that point, your costs include legal fees plus the audit and remediation.

Other costs include the negative publicity that can ensue. Web accessibility cases are hot topics and will remain so due to the lack of specific ADA regulations from the DOJ. People want to know how courts are ruling and that means numerous blog posts and speculation where your business’ name is spattered over the Internet.

Website Accessibility Insurance

Insure your site. You heard right. Insurance. You have a site right now. You think all is well. You have processes in place that audit content as it goes live to ensure there aren’t any issues. You have run an automated tool on sample pages and everything looks okay.

However, as a person that drives a car or owns a home knows, you can never predict when something is going to go wrong. That’s why you have insurance.

Don’t believe that such insurance exists? Think again. Beazley Insurance is working with Promet Source to offer insurance against ADA website compliance claims. Said policy includes up to $25,000 coverage for an accessibility audit and remediation if someone files a claim against you.

“In 2017, 7,663 ADA Title III lawsuits were filed in federal court — 1,062 more than in 2016.”8 “If ADA Title III federal lawsuit numbers continue to be filed at the current pace, 2018’s total will exceed 2017 by 30%, fueled largely by website accessibility lawsuit continued growth.”9 Add to these numbers the cases brought in state courts and it’s not hard to believe that you could get sued in the near future.

Move Quickly

If you get a letter, move quickly to remediate those items specifically noted. In the case of Carroll v. New People’s Bank, even if Carroll could prove standing, in the long run, NPB responded quickly and fixed the issues in the letter. 

Has Hooters moved quickly? How much money do you think Hooters could have saved in legal fees by taking down their inaccessible website and quickly replacing it with a simple, accessible website until their new site could be designed, developed, and launched? You decide.

Quick Might Not Be Fast Enough

It’s clear that people with disabilities are no longer hesitating to file suit for an inaccessible website. Whether they have standing or not, you could be faced with one lawsuit after another until you can audit your site and remediate it accordingly. And, given the findings in Haynes v. Hooters of America, LLC, the courts might let each lawsuit stand. So, circling back to the first lesson, have your site audited using automated and manual testing, get it fixed if issues are found.

Conclusion

Until the DOJ responds to the pleas of lawmakers across the nation to create specific regulations regarding website accessibility, courts will continue to review other cases to determine what’s moot or not. Don’t wait to find out. Get audited. Fix the issues.

If you don’t know what to do, Promet’s Accessibility Audit, Remediation, and Training Roadmap will help you end a current lawsuit and prevent any future lawsuits.
 

Footnotes

1. https://www.cuna.org/uploadedFiles/Advocacy/Priorities/Removing_Barriers_Blog/ADA%20DOJ%20ES-RD%20Letter%20-%20FINAL.pdf
2. https://www.ada.gov/anprm2010/equipment_anprm_2010.htm
3. https://www.reginfo.gov/public/do/eAgendaMain
4. https://www.cuna.org/uploadedFiles/Advocacy/ADAAGLetter71918.pdf
5. https://www.adatitleiii.com/tag/winn-dixie/
6. https://casetext.com/case/carroll-v-new-peoples-bank-inc
7. https://law.justia.com/cases/federal/appellate-courts/ca11/17-13170/17-13170-2018-06-19.html
8. https://www.adatitleiii.com/2018/02/ada-title-iii-lawsuits-increase-by-14-percent-in-2017-due-largely-to-website-access-lawsuits-physical-accessibility-legislative-reform-efforts-continue/
9. https://www.adatitleiii.com/2018/07/website-access-and-other-ada-title-iii-lawsuits-hit-record-numbers/
Sep 19 2018
Sep 19

You can’t build a website without a plan. A plan derived from requirements collected and a design created. You also need a development and testing plan that reflects the appropriate strategies for meeting said requirements and design. After you launch your website, you need a maintenance plan to ensure that your code remains secure, your content remains accessible, and your future features are integrated correctly.

Of all the development methodologies, past and present, there is not one that supports the development of software without requirements and design. When choosing a methodology, be it one based on the 12 principles listed in the Agile Manifesto, or not, you will not be able to avoid the effort of creating plans.

Agile Misunderstandings

Among the many misunderstandings regarding Agile methodologies is the aspect of planning. The belief that upfront planning isn’t needed and therefore time can be saved on a project is a misunderstanding of the iterative and incremental approach to software development. Think about it that for a moment. Can you create or build anything without some kind of plan? Be it simple or extensive?

It’s also a misunderstanding that said plans, if any, don’t need to be documented. If you choose an Agile methodology, you will quickly learn about Epics and the Backlog. Epics are large user stories while the backlog is a list of requirements derived from said user stories.

So, Agile isn’t about skipping the planning aspects of the project. It’s about changing the way the planning and development are conducted. And, the first step in the process of planning your site is gathering the appropriate players together.

The Right People

If you are going to put out a request for proposal, you need to include some of the requirements. Perhaps not all the details, but enough that a vendor who wishes to bid on your project can anticipate potential costs. Later, these initial requirements will fleshed out with the vendor whose bid you choose.

So, who needs to be in the room when you start brainstorming what you need? Who will ensure all requirements are identified? 

  • The money person would be good. They will know the budget and can remind you of the fact as the ideas start to mount.
  • The content manager is important. You will need to understand the tasks involved in creating and posting your content. For instance, how will you manage the publication of your content once it is uploaded to your site?
  • Let’s not forget the person who is in charge of your current site. This is the stakeholder who knows where the bodies are buried. They know why the current site is what it is and if certain aspects of the site can't change.
  • Other process owners. Depending on the tasks that your site will support, such as e-commerce or document download, who knows the most about how these tasks should be performed?
  • The naysayer. The squeaky wheel. Who is your Eeyore. “It will never work.” Get them in the room because you want the devil’s advocate. You want to hear what might not work and why.

Bottomline, anyone responsible for an aspect of the site, be it backend support or frontend interactions, get them in the room. You want to cover all your bases.

Agile Upfront Planning

“In 1998, Alistair Cockburn visited the Chrysler C3 project in Detroit and coined the phrase ‘A user story is a promise for a conversation.’”1 Then, in 2001, Ron Jeffries, one of the original signatories of the Agile Manifesto, proposed a ‘Three Cs’ formula for user story creation: card, conversation, confirmation, making user's stories part of the world of Agile methodologies. Coupled with use cases, Agile planning seeks to identify requirements and design before development begins.

However, as you will see, the level of requirements detail depends on several factors such that not every minute decision is made at the start. Let’s look at this idea more closely.

User Stories

User stories are typically brief statements written from the user’s perspective. For example, “As the content author, I need to be able to edit a page so that I can add a header image.” The documentation of such statements can be facilitated with index cards, Post-it notes, wireframe sketches on printer paper, or anything that meets your team’s needs.

A collection of such user stories helps to confirm the scope of the project and can reveal foundational requirements such as which framework or platform to use. Such stories also reveal relationships and thus where shared code will be used, for instance. 

At this point in the planning process, the team might decide to start developing. Such a decision is made possible by today's systems and platforms with plugin and play capabilities. They provide a way to support the user story tasks so that said tasks needn't be reinvented via a use case.

If user stories are unique and more detail is needed, creating use cases is the next step.

Use Cases

If system default tasks are not what is envisioned or additional tasks need to be supported, the team may choose to clarify the user stories via use cases - details of actions and events that define how a user interacts with the system. 

Deeper investigation into the requirements can help define a development path that supports both the overall system architecture required but also the specific tasks required of the system.

Once the stakeholders and development team have gained a common understanding of what is required, the user stories and use cases are converted into epics and the necessary backlog of development tasking.

So, Agile methodologies support the requirement and design phases listed in the Waterfall methodology, it just does it by engaging methods that have proven easier for end users to envision as they communicate what it is they want from the product being created. 

Of course, this isn’t the only time during the iterative and incremental development approach where planning takes place.

Agile Planning in Development

With epics and a backlog populated, the development team plans a series of iterative and/or incremental development efforts, commonly referred to a Sprints. The way the Sprints are defined depends on the overall development strategy required to build out the product, in this case, a website.

Before each Sprint, the existing requirements (based on user stories and use cases) are reviewed and specific strategies are chosen for meeting said requirements. This might include a conversation where details are clarified or added to use cases.

After each Sprint is complete, the product owner is asked to confirm that expectations have been met. If not, requirements and design aspects can be changed to correct misunderstandings or to acknowledge a new idea or need. In other words, additional planning is interjected into the development cycle and the project is adjusted.

In addition, lessons learned are collected and decisions are made regarding how-to strategies for the next Sprint. You might be thinking that enabling changes to the original plan might introduce scope creep. And, you would be right. It can.

Planning and Scope Creep

Scope creep is similar to what happens when you think you are buying the base model of a new car and you leave the lot having spent 20% more than planned because you decided on several add-on features. 

Several factors can influence the possibility of scope creep on a website. Let’s consider two related to planning.

  • Insufficient upfront planning. We aren’t talking about getting into the details of how features on your site are developed in this instance. Instead, it’s about ensuring that all user stories have been identified along with supporting decisions. For instance, if the user needs to be able to categorize an article, has the supporting requirements such as the information architecture been defined? 
  • Incorrect stakeholders at the planning table. The budget folks will have a different take on requirements than say an end user. Content manager will be able to enlighten decision makers on processes that are required to ensure a specific level of content quality. Without the appropriate people involved in the planning process, you might find that a Sprint doesn’t meet expectations.

Conclusion

An Agile approach to website development relies on planning to be successful, however, not all planning is required before development starts. Of course, there are risks associated with moving quickly into development, one being scope creep. 

The power of Agile methodologies isn’t about being able to skip steps that a waterfall methodology is criticized for enforcing. It’s about being flexible. It’s about being able to adjust as forgotten requirements are remembered. And, it’s about continuous feedback, ensuring what was originally thought to be a good idea, still works. 

Promet and Planning

Promet offers a unique planning engagement that we call our Architecture Workshop. This workshop is a customized engagement that engages all of your stakeholders in the Discovery Process.We do a 3-5 days of intensive onsite exercises with stakeholders (for your busy C-level folks we customize the agenda to bring them in where they are needed during this onsite). Then the team goes away and produces a set of deliverables that  includes a full-field level Architecture Blueprint of the website(s). Whether you choose to use a waterfall or agile development methodologies - you have everything you need to build the website everyone has agreed upon. 

Not building your site and stressed out about getting an accurate quote? Investing in this kind of Workshop will make sure that you get the right Partner, and the best price.

Footnotes

1 
https://en.wikipedia.org/wiki/User_story
Aug 30 2018
Aug 30

Perhaps you’ve heard that the W3C (World Wide Web Consortium) has updated their Web Content Accessibility Guidelines (WCAG) 2.0. 

  • On April 24th, 2018, W3C posted a proposed extension of Web Content Accessibility Guidelines (WCAG) 2.0, referred to as WCAG 2.1.
  • On June 5th, 2018, WCAG 2.1 was no longer considered a proposal. WCAG 2.1 includes 2.0 and 17 new criterion.

When will I need to update my website?

Is there a law someplace that answers this? An official interpretation? A lawsuit that references the new criterion?

To date, in the United States, there is an understanding that WCAG 2.0, levels A and AA, is the required version and levels of accessibility required to create an ADA compliant website. Court case summaries posted by the legal community say this is so.

But, as of August 2018, this reviewer can’t find a court case that references WCAG 2.1. 

Should you sigh in relief? No. Right now, the courts are interpreting Titles II and III and hearing complaints. Will a judge bring his or her hammer down on one of the new criterion if you aren’t compliant with it? Quite possible. One would hope for a reasonable ruling: no penalties and perhaps a date allowing you time to fix the issue given the newness of the additional criterion.

As soon as this happens, you have your precedence. You have your clock. Of course, until Section 508 is updated, federal site owners are protected, but that doesn’t mean said site owners should ignore the new criterion as they update or rebuild their sites.

What kind of changes will we see?

WCAG 2.1, according to https://www.w3.org/TR/WCAG21/, “was initiated with the goal to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices.”

The fact that these new criterion were added with mobile devices and users in mind should not come as a surprise. In 2015, the W3C released Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile. They’ve been working accessibility for mobile devices for some time. 

Are we talking about a lot of change?

Depends on what you are doing on your site. It’s possible you have nothing to do or change in order to meet one or more of the 17 additional criterion. Perhaps you are hoping that most of the 17 criterion are level AAA and you won’t be held accountable. Let’s clear this one up right now. Twelve of the 17 are A or AA.

At this point, we could simply list the new criterion by the principles of POUR (Perceivable, Operable, Understandable, Robust) or by level, leaving you to mentally map the criterion to how you think about your site and its functionality.

Instead, the following is offered in hopes to provide a unique and helpful perspective on the new criterion.

  1. Interactions and Orientation
  2. Content Structure
  3. Visibility
  4. Cognitive

Each criterion will be briefly explained. You will benefit from reviewing the criterion’s Understanding pages as that is where you will find a more precise set of instructions.

Interactions and Orientation

Your site is “touched” and “viewed” using multiple methods.

The oldest method being via mouse or touchpad and the pointer they control on a computer monitor. Next up is the keyboard and monitor. WCAG 2.0 included criterion 2.1.1 Keyboard, for example, to address keyboard tabbing on websites. 

Given the fact that mobile devices and touchscreens are pervasive in the world today, it’s no surprise that several of the new criterion are focused on “touching” and “viewing” said technology.

  • 1.3.4 Orientation (A)
  • 1.3.5 Identify Input Purpose (AA)
  • 2.2.6 Timeouts (AAA)
  • 2.1.4 Character Key Shortcuts (A)
  • 2.5.1 Pointer Gestures (A)
  • 2.5.2 Pointer Cancellation (A)
  • 2.5.4 Motion Actuation (A)
  • 2.5.5 Target Size
  • 2.5.6 Concurrent Input Mechanisms (AAA)

Success Criterion 1.3.4 Orientation (AA)

Bottom line, don’t prevent someone from viewing your content in the display orientation of their choosing. Of course, there are exceptions, but if you don’t have to lock your content in portrait or landscape display, then don’t. This isn’t a feature you would accidently enable, especially if your site is responsive.

Success Criterion 1.3.5 Identify Input Purpose (AA)

You know when you fill out a form online that includes your name and maybe your address and all you have to do is start typing and you are given the option to autocomplete the form? Autocomplete is a feature in HTML5.2. This works because there is a defined purpose to the field.

Criterion 1.3.5 is about ensuring the purpose of the field is clear. They reference the autocomplete technology as a means of satisfying this criterion. However, the intent is “to help people recognize and understand the purpose of form input fields. … form input fields require programmatically determinable information about their purpose.”

If you have forms on your website, you might want to look into whether you are already using HTML5.2 and providing input purposes.

Success Criterion 2.2.6 Timeouts (AAA)

Not everyone can interact with your site forms quickly. It can take time to fill in a field thus creating lengthy interactions.

So, are you collecting job applications online via a form? Are your visitors entering data for anything that might take more than a minute or two? This one's for you. 

It’s likely that you are already advising your visitors that there is a time limit for interacting with your site, if indeed there is one. If not and there is a chance that their efforts will be in vain if the session times out, you need to warn them. If you are storing their data as they go along and thus there are no concerns if they walk away and return the next day, providing a timeout notice is not required.

Success Criterion 2.1.4 Character Key Shortcuts (A) 

Are you adding keyboard functions to your pages? No? Then you are good to go. If yes, then you have a new criterion to review. You don’t want to override an existing keyboard shortcut implemented by assistive technology. This criterion give you guidance in the changes you might need to make.

Success Criterion 2.5.1 Pointer Gestures (A)

What are pointer gestures? Have you ever used two fingers to zoom in or out on your mobile device screen? If you are providing an interface, such as a map, where the user would want to zoom in or out, you might need to add a single input option. According to W3C, including [+] or [-] buttons will accommodate this criterion. For other examples, visit 2.5.1’s Understanding page.

Success Criterion 2.5.2 Pointer Cancellation (A)

Have you ever clicked on a link and upon pressing down you wish you hadn’t? Perhaps you know that moving away from the link as you release your click will cancel your request. Well, in this criterion, they are focusing on actions you might have added to your page via Javascript, for example. Actions that would prevent a click or touch from being cancelled.

If you have, you need to edit your code to not include a down event such as touchstart or mousedown. W3C includes other alternatives to tweaking your code. Instead of repeating the official details here, please visit 2.5.2's Understanding page.

Success Criterion 2.5.4 Motion Actuation (A)

Do you have an app? Is your site presented via an app? If yes, this one might apply to you. This criterion is focused on interfaces that respond to device movements. Not a common feature on websites presented via a browser but definitely a possibility in apps you might be using to present your content.

If you have added functionality to your app that, for example, advances a user to the next page when they tilt their devise, then you need to pay attention to this one. Users need the option to advance to the next page via the user interface and not when their hand accidently moves, mimicking a tilt.

To prevent your application from behaving as such in a mobile device,  you need to add a setting that disables the response to movement.

Success Criterion 2.5.5 Target Size

On a full screen display, it’s easy to imagine large buttons, for example, being acceptable from a design perspective. Shrink that web page down into a small mobile device and that button can become a tiny dot that someone has to hit with a finger or other handheld pointer.

If you have buttons or links or other features that require interaction, they need to be big enough to be touchable - even on the small mobile screens. The Understanding page for 2.5.5 presents a couple scenarios that you should review if you have such interactive links on your pages.

Success Criterion 2.5.6 Concurrent Input Mechanisms (AAA)

To say this is a level AAA criterion seems odd to this reviewer. Why would you prevent someone from using an external keyboard to enter data or interact with your site versus the in-device touchscreen? If you aren’t doing this on purpose and your site doesn’t care what a user uses (mouse, keyboard, touch), then you can check off a level AAA criterion.

If you have an essential reason for such a restriction, then, okay. Although the criterion doesn’t say you have to explain yourself, the instructions for such interactions might be a place to make this clear.

Content Structure

It’s not just words that convey meaning. It’s the style and shape of the content. You might recall two criterion introduced in WCAG 2.0 that focused on ensuring that a user of a website would not miss out on what the content is saying or implying.

  • Criterion 1.3.1’s intent is “to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes.”
  • Criterion 1.3.2’s intent is “to enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning.”

Two new criterion have been added on this note. 

  • 1.4.10 Reflow
  • 1.4.13 Content on Hover or Focus

Success Criterion 1.4.10 Reflow 

If your site or app is already responsive, you are well on your way with this one. As long as your content fits in a user’s screen such that only one form of scrolling is required, then you are set.

Your goal is to accommodate a 320 CSS pixel vertical width. Or, 256 CSS pixel height. 

Criterion 1.4.10 is extending the efforts made by criterion 1.3.1 Info and Relationships and 1.3.2 Meaningful Sequence in hopes of ensuring content and functionality are not lost. This time, it’s about resizing versus removing visual and layout styles. If your responsive breakpoints are such that a user need to scroll in two directions to experience your content, then you need to update your code.

Success Criterion 1.4.13 Content on Hover or Focus

Do you provide popup content such as tooltips? You know when you hover over an image or text and you get additional information clarifying the image or text?

If you need to use this type of content delivery, WCAG 2.1 is recommending guidelines that will make such content easier to “see.” For example, when the popup tip appears, ensure that it remains until the user moves away from it. Also, don’t let the users pointer block the content in the popup. 

Of course, more details and explanation can be found on the criterion’s Understanding page.

Visibility

Not everyone can see small text. Not everyone can easily distinguish text from its colored background. WCAG 2.0 gave us three criterion to follow in an effort to accommodate such users of web content.

  • 1.4.4 Text Resize
  • 1.4.3 Contrast (Minimum)
  • 1.4.6 Contrast (Enhanced)

In WCAG 2.1, the following are added to this list.

  • 1.4.11 Non-text Contrast (AA)
  • 1.4.12 Text Spacing (AA)
  • 2.5.3 Label in Name (A)

Success Criterion 1.4.11 Non-text Contrast (AA)

You are already abiding by the contrast criterion for text and images of text if you are meeting WCAG 2.0. 1.4.11 makes some addition to contrasts.

First, you know when you hover over a button or link and it changes? That is a state change. You are going to need to ensure the change meets a 3:1 contrast ratio. Next, it’s not just about color on color but now there is a need to consider color next to color.

The Understanding page for 1.4.11 gives examples such as pie charts and icons lined up next to each other. The potential design impacts discussed on this resource page are definitely worth a read. Too many considerations to list here.

Success Criterion 1.4.12 Text Spacing (AA)

Similar to 1.4.4 Resize text, 1.4.12 wants to ensure that changes in the spacing between lines, paragraphs, letters, or words, they won’t lose content of functionality. So, you might need to check your CSS to ensure the following are possible:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Success Criterion 2.5.3 Label in Name (A)

This next criterion isn’t as direct as the last two when it comes to visibility of content, but reminds us of the fact that there is more than one way to “see.”

Depending on how your pages were made, you might have both visible and invisible labels on your site. Visible for those who can see the label, such a sign-up button, and invisible, a version of the label that assistive technology reads. Similar to when you create a link to a page and ensured the link and the page title were the same, visible and invisible labels need to match.

What happens when they don’t? A user speaks the label they see and their assistive technology looks for the same words. When visible and invisible labels differ, the technology can’t find what the user needs. 

Cognitive

You don’t have to have cognitive impairment to not understand something. In WCAG 2.0, three criterion are worth noting when it comes to understandable writing.

  • 3.1.3 Unusual Words (AAA)
  • 3.1.4 Abbreviations (AAA)
  • 3.1.5 Reading Level (AAA)

Just because they are AAA level criterion, that doesn’t mean they should be dismissed. They are three of the easiest AAA criterion one can strive towards.

WCAG 2.1 has added criterion that this reviewer feels fits with enabling users of your content to gain a better understanding of what it is your are conveying.

  • 1.3.6 Identify Purpose (AAA)
  • 4.1.3 Status Messages (AA)
  • 2.3.3 Animation from Interactions (AAA)

Success Criterion 1.3.6 Identify Purpose (AAA)

It’s likely that you have at least one of the following on your site: user interface components (e.g., buttons, link, fields), icons, or regions. And, if you are following the requirements of 4.1.2 Name, Role, Value, you are defining most if not all of these.

However, what you might not being doing is providing information about what the component represents, such as an image link represents a link to the homepage. This criterion wants you to convey more than a name, even if the name seems to convey the applicable meaning. Remember, assistive technology is not Artificial Intelligence. It’s needs you to tell it what it can’t surmise on its own.

Success Criterion 4.1.3 Status Messages (AA)

If you are using a content management system designed for accessibility, like Drupal 8 for example, then you should be okay. If not, you will need to update your code to declare your system messages via a role or other appropriate properties that can be understood by assistive technology.

Success Criterion 2.3.3 Animation from Interactions (AAA)

Does this criterion address an interaction or is a cognitive distraction? Perhaps both.

Do you have things that move on your pages? Do objects fly in from the side as someone scrolls? Criterion 2.2.2 Pause, Stop, Hide from WCAG 2.0 applies when the page initiates an animated object. You might have heard of this one. 2.3.3 is intended to prevent animation from being displayed on the pages in the first place.

If you have a dynamic page with moving parts, you need to look into this one. You might need to add to existing animation controls and allow users to keep them from appearing. Of course, this is level AAA, but it’s worth considering as sudden movements can trigger vestibular (inner ear) disorders and cause dizziness, nausea, and headaches.

Conclusions

If you manage a federal site subject to Section 508, that doesn’t mean you shouldn’t take the additional 17 criterion into consideration when updating or building your site. As for everyone else, WCAG 2.1 is the recommended set of criterion. With the chance that someone might claim your site is non-compliant based on 2.1, you need to look into bringing your site up to date.

Remember, some of the new criteria are, by default, not going to be in play on your site. Many of them have to do with added bits of code that override default browser behavior that at one time were deemed acceptable. So, WCAG 2.1 doesn’t have to be scary.

Aug 30 2018
Aug 30

Since its launch, many have written about all the great technology that has been added to Drupal 8. You will find articles online talking about such added features as headless and responsive and accessible. You will read about modules that have been added to core, contributed modules once part of the standard recipe for configuring a Drupal site.

And, that's all good news if you are developer assessing building blocks and code. But, what if you are a business owner, marketing executive, or technical decision maker and don't speak Drupal yet? 

You have a laundry list of features and functionality you want supported by your site and you just need to know if, and a little bit of the how, Drupal 8 is going to meet your needs. Although a planning workshop and Drupal builder course could help you gain a strong understanding of Drupal, you aren’t there yet.

Recognizing this might be you, this article:

  • Shares some of the most common and not so common requirements that you might be facing, and
  • Talks about how Drupal can help support your processes and goals.

Common and Uncommon Features Don’t Scare Drupal

Drupal is a content management system, content being the operative word. However, Drupal doesn’t see content as a blog post or an event. It sees content as data. Data comes in all sorts of shapes and sizes. It carries multiple types of meanings, from the spoken word to value that triggers an action.

When it comes to identifying that which Drupal can’t do, this reviewer only has to stretch her imagination and a solution presents itself, often using existing functionality either from Drupal’s core and from millions that call themselves part of the Drupal community.

In order to demonstrate Drupal’s potential without the aid of video, the remainder of this article will address several capabilities - simple and a little more complex - in hopes that it will help you recognize that Drupal can meet your needs.

When working with managers such as yourself, request often start out as, “I want …” and finish with one or more of the following:

A Mobile Friendly Site 

You are likely one of the majority who surf the net using a mobile device like a smartphone and thus you know what it's like to visit sites that don't fit your screen. Perhaps you have decided that you don’t want to be that business that can't be easily experienced from any device.

Screen shot of default Drupal 8 homepage in it's most narrow display.

Drupal 8 makes it easier than ever to make responsive sites. Responsive means your web pages flex and reshapes automatically to fit your screen. Although responsive functionality was available in previous versions of Drupal, Dries Buytaert, the inventor of Drupal, decided that Drupal 8 would bring mobile to the top of his improvement list.

One of the first steps taken to make this possible was making the jump to HTML5 in order to gain such advantages as engaging the applicable input device when a site is viewed on a tablet or smartphone. 

Check out the screenshot showing Drupal 8 default homepage reduced down to fit on a smartphone.

Different Types of Content

This request often goes without saying and when it comes to Drupal, its response is, “Bring it on!” Any type of content you want, it’s yours. Plus, there is more than one way to get it done depending of the type of data you want to use to define said content.

Let’s consider an example. Story telling. This could mean that you have bloggers, new reporters, media reviewers, etc. At the core of this type of content, they are the same. It’s just the words and tone and organization that often makes these different. 

If you want a separate form to collect each type of content, then you can do that. Even if all the data fields you define are the same in each, Drupal doesn’t care. You can also collect this type of content using just one form with an additional field that lets you categorize the type of content.

This is a very simple example, but hopefully it’s already making you think about how your content can be viewed as data collected in fields versus what you might be used to doing with MS Word or other content management systems.

Since Drupal 7, this type of functionality was part of Drupal’s core. In Drupal 8, the coding structure has changed, enabling your developers to tap into the objects that make this possible and invent unique content collection tools that integrate with Drupal’s permissions and other default features.

Accessible Content Formatting

There are two methods associated with formatting worth mentioning: field-based and manual application. When content formatting comes to mind, you likely think of making text bold or creating bulleted lists. That’s cool. Drupal 8 has that covered by default.

Drupal 8’s text formatting is better than ever. Style your content in MS Word and copy/paste it into your Drupal 8 content form. Don’t do this with previous versions of Drupal, you could end up with a mess of code. Also, Drupal continues to offer settings that control which content author can, for example, add images to their blogs, or not. 

When it comes to using fields other than the traditional long text fields, you can apply styling via templates and CSS. Or, you can rely of the fact that Drupal 8 is WCAG 2.0 ready (likely to be 2.1 ready in the future) and much of the formatting you need is already in place.

Collecting Data Other Than Content

Drupal 7 not only added the ability to add fields for content collection forms, but it also added the ability to add fields to user accounts so that additional data can be collected and possibly displayed for your content authors. Drupal 8 continues this functionality but with the same object oriented strategies implemented for content.

Categorize Content

Categorizing content is at the heart of Drupal. Each Drupal site ships with one Taxonomy that can host multiple vocabularies (containers that hold terms). You can have as many terms (words or short phrases that describe or categorize content) as you need.

Drupal 7 included the ability to add fields to terms so, for example, you can associate an image of an orange with the term: orange. Drupal 8’s contribution, besides better backend code, it a new display page. When someone clicks on a term, they land on a page that displays all content tagged with that term. Drupal 8 makes it possible for you to easily modify that display right out of the box. 

Block Content 

Blocks are bits on content or functionality that can be added to a page. They typically appear alongside the main body of content, or below it, above it. Historically, you would create a block, for example that says, “Welcome to my site. Become a member …”. That block could be placed in one location, let’s say the right sidebar. By default, there wasn’t much more your could do without additional modules.

Drupal 8 has changed the block system. When this reviewer learned by how much, she couldn’t stop smiling. Okay, she might have shouted with glee. 

Anyway, not only can one block be placed in multiple regions at the same time, - in a sidebar and in a footer and in the region that displays the main content - it can display something other than the text. You can now display an image via a field. Or, a video. Or, an attached PDF file.

Yes. You heard right. You can add fields to blocks, made possible by the same object oriented strategies put in place for content, users, and terms. You can also have different types of blocks, just like you can have different types of content forms.

But that’s not all! If you have a block intensive website and you ever want to get a list of said blocks and the content they content in one report, you can query the database and get that list by using the feature called Views. The Views module used to be a contributed module, a staple in 99.9% of all Drupal sites - in this reviewer’s opinion.

Multilingual Site

With each major release of Drupal, the ability to develop a multilingual site got easier. Drupal 8 has not disappointed. Where Drupal 7 required up to eight or so contributed modules to create a multilingual site that was 99% correct, Drupal 8 has four in its core to make it happen.

Coding practices that used to prevent text from being translated are a thing of the past if a module contributor wants their module to be accepted by the community.

It was possible in the past and even easier now.

Manage Content Development

It’s one thing to be able to structure your data you see fit, it’s another to manage the development of said content or data. Aside from the creative nature of content development, you have the ever present need for copy editing. And, if you believe that your content authors can easily catch their own typos, think again.

It’s fortune that the Drupal community recognized the need to manage the process from “I have an idea” to a published work. Drupal 8 has jumped on the workflow wagon by including a workflow option you can turn on and configure. 

Whether your authors compose in MS Word or in Drupal’s content form, the first, second, or even the third draft shouldn’t be seen by the public. You can tell Drupal to save as unpublished. You can collect copies of every draft version by default and switch between them until you are ready for editing.

With additional functionality from the community, you will be able to do things like send notices with draft content is ready for review. You wouldn’t be the first to have this requirement and users of Drupal have been making this happen for years.

Reuse Content in Multiple Displays

This is not the first mention of content reuse. Drupal is all about content reuse. Break your content into structured data and you can find and filter until your heart's content. And, you can then share your queries with the whomever you wish.

Views has been around since Drupal 4, but has always been a contributed module. There are good reasons for waiting to integrate Views into Drupal’s core and now that it is here, Drupal out of the box is that much better.

Most notable is the administrative pages. Hard-coded in the past, the pages that list content and blocks and users and more are now made with Views. They are database queries made into page displays and thus allow you to easily customize your admin pages.

ADA Accessible Site

Accessibility has been mentioned already, but if you didn’t notice, it’s worth mentioning again. Taking a mobile first perspective when designing Drupal 8 was only one priority. Accessible web pages was right up there as well.

The developers of Drupal 8 have taken accessibility seriously. They have reviewed WCAG 2.0 and W3C’s WAI-ARIA. The Drupal community wants your site to be easily read by assistive technology and ARIA was a big step in the right direction.

Deep down, you know how important it must be to make web pages that everyone can experience. What you might not have heard about is the fact that the number of lawsuits for non-compliance has increased and continues to do so.

It’s not just about federal government sites anymore. It’s all sites. Drupal 8 provides a strong foundation to creating an accessible site from the start.

One System, Multiple Frontend Interfaces

You don't want two systems: one that will present your information in a web browser and one that will present your content in a mobile app. Data reuse is a key feature in Drupal and Drupal 8 takes the next step.

Drupal is now what some call “headless” and others call “decoupled”. It doesn't matter which word you use as this functionality is a technical thing that your developers can take advantage of when they present your data through multiple interface frameworks. 

What does this mean? It means you can serve up your content to an app who’s interface was created with a framework designed for mobile devices while at the same time, present content in a browser the traditional way. One blog post, two tools to manage said display. 

This simple example does not suggest that you can only have two frontend interfaces to your content. If you are looking for a central repository for your digital content and you want to deliver it to multiple platforms, Drupal 8 makes it easier than ever before.

Wow, talk about content management. Create it and edit it once and use it over and over.

Affordable Upkeep

This might be the last topic, but that doesn’t mean it’s an afterthought. Like many software applications, significant changes occur from one major release to the next. Unlike many software applications, you don’t have to start over to use the next version.

For a time, you could actually upgrade your Drupal site to the next major release. This reviewer went from Drupal 4.5 to 4.7 to 5.0 to 6.0 before migrating to Drupal 7. Drupal’s backend restructuring to keep up with today’s technology introduced some challenges when it came to taking a Drupal site from version 6 to version 7 and the developers listened to the complaints.

So, Drupal 8 has a few features worth noting as they can impact the cost of managing and maintaining your site.

  • Drupal 8 ships with a Migrate modules to help you tap into Drupal 8’s new functionality by making it easier to migrate.
  • Drupal 8 ships with a Configuration Synchronization module that allows you to launch a version of your site and easily add new features as resources allow.
  • Drupal 8’s path to Drupal 9 isn’t going to come in one giant leap like past major releases. Drupal 8’s development is taking semantic path with releases such as 8.1, 8.2, 8.3, and so on until 9.0 is reached.

These three strategies alone make Drupal more cost effective than ever before. Your development team will have a learning curve to come up to speed on the semantic coding process, but otherwise, they will find Drupal 8 to much more conducive to long term commitments. 

Conclusion

If you want a system that can build just about anything, like one can do with LegosTM , then Drupal 8 is where you want to be. If you have a simple blog site or a content rich site viewed by the world, Drupal can handle it.

The advantages discussed above just scratch the surface of what is possible. Other requirements that Drupal can handle include:

  • Advanced permission settings
  • Powerful content development and layout options
  • Integration with other systems
  • Mash ups - pulling content from other sources
  • eCommerce
  • And more

So, if your requirements are anything like what was discussed above, or if you have something truly unique, let us know. We love a challenge.

Jul 31 2018
Jul 31

When it’s time for a new site, the word “migration” is often dropped in conversations. Every organization looking at a migration in the future will have their own reasons for doing so, their own history, their own future goals. In this article, we will present the following topics as a means to empower you to recognize aspects of website migration you might otherwise overlook.

  • What can a new site look like after a migration.
  • Triggers for a migration project.
  • Paths that might be taken.
  • Creating the right team.

The first two topics are going to feel like the chicken and the egg. Which one comes first? Given the linear nature of articles, they will be presented in said order, but that does not mean the order will match the scenario faced by many.

What can a new site look like after a migration?

Amazingly, not everyone has the same vision of what a new site might mean. Managing expectations from the start is critical to a successful migration project. Below are some common scenarios that can constitute a “new site” and/or “migration” that you might face in your project.

You will find that the following three categories can account for most changes.

  • Server environment change
  • Web platform change
  • Design and/or functionality change

After this, the triggers that might cause one or more of these changes is presented.

Server Environment Change

The process of taking an existing site and moving it from one web server to another would be considered a server environment change. It could entail moving your site from your own web servers to an external vendor.

From a new site perspective, this scenario doesn’t seem to fit. Technically, it doesn’t. Same code, same site. However, to your users, it might feel new if the site’s performance has improved. Your site could actually look different, assuming pages weren’t loading fully due to slow performance.

From a migration perspective, this is text book. You physically move - migrate - to a new server. In the process, you will receive upgraded or new web server features that will need to be configured to work with your site. A few examples include:

  • Caching services
  • Security configurations
  • Development, testing, and production processes.

Your website’s code might be the same, but the environment in which it lives has changed and therefore it cannot be assumed that there won’t be some work to make everything fit and function as required.

Web Platform Change

First, let’s assume that web platform refers to some type of content management system (CMS). The process of migrating from one CMS to another can yield a site that looks the same, but is it?

From the new site perspective, at a minimum, the code-base is different. The configuration strategy is different. The opportunities to improve or enhance your current circumstances can be different. Given the expense, your new system should be ready to allow for your growth in order to justify the expense.

From a migration perspective, to move your site structure, content, interactions, etc. from one CMS to another is a migration, by definition. Depending how similar the systems and how complicated the existing website, the effort to make the move can be extensive.

Example migration and level of effort scenarios might include:

  • Blog Site - Migrating a blog site from one CMS to another is likely the least complex scenario. Most CMSs are designed around enabling users to post their stories, articles, and blogs with ease so the leap should not be overwhelming.
  • e-Commerce/Product Site - The level of effort for this type of move will likely be more labor intensive than a blog site. You might be thinking, “A product is a product,” but the way the sale is managed can vary from system to system. Check out processes may differ. The way the product is loaded into the system may be simple in one, but the other CMS might offer more sales options that you need to consider.
  • Multi-function Site - Sites that provide some combination of blogs, products, events, community, manuals, custom integrations, and more will present even more challenges when moving from one system to another.

The pattern should be clear. The more complex the site that is being migrated, the greater the level of effort. This can include new planning effort, where you dig into the metadata level of content and features. Some CMSs are designed for data micromanagement and you will want to take advantage of the data reuse functionality such a system provides.

Design and/or Function Change

This is one place you will want to manage expectations up front. The scope of work implied by the word design can send your migration project into overruns very quickly. And, the idea of functionality (from a site visitor perspective or a content author’s perspective), can be interpreted many ways.

So, from a new site perspective, design and function will create the most obvious new-site feel. Whether it’s the layout of your pages, your branding, the way your information is organized and accessed, or the new online tools you add, a significant change will occur.

From a migration perspective, the move is to go from one site to another. This scenario is often combined with the first two: server change and platform change. Even if it is not, the effort for such a move is not unlike the process of planning, designing, and building a site from scratch. Even if ideas and content and branding are transferred unchanged, a version of the original website’s implementation process will need to be executed.

Triggers for a migration project.

Based on the discussion above, it might seem obvious what the triggers for change might be. That is true, to some extent. However, there are triggers that can cause a server change while others can cause a system change. Or, both.

Performing a trigger review is a good way to explore the potential, “What about …,” comments that can bubble up during development and trigger yet more change and scope creep. In this section, five triggers for change are presented, along with the type of migration that might be required:

  • Analytics
  • Search engine optimization
  • Technology
  • Mobile first
  • Organizational goals

Analytics Triggers

Web analytics are the statistical data collected about website usage. If the site is not being used, can an organization justify the expense of maintaining said site? Not likely, unless the implied triggers for change from said analytics are implemented.

Triggers of this nature can include:

  • Bounce rate - Site visitors are not spending enough time on site pages. They aren’t reading or watching or interacting as desired.
  • Low or no visits - Pages on the site are not being visited at an acceptable rate. They are either not being found, or their topics don’t meet the visitor’s needs.
  • Low or no mobile device visits - Of the visits, users are arriving on the site via a laptop or desktop. This could be justified given the site purpose, or it could be connected to the bounce rate concern, where people leave the page because it is not easily visible in a mobile device.

To remedy these situations, an analysis needs to be completed. Depending on the findings, the following migrations might apply.

  • Server change - If statistics are off due to poor performance - pages not loading in a timely manner, for example - a new server environment might do the trick. Cached pages are easier and faster to send.
  • Platform change - If statistics are off due to inaccessible pages, pages read by accessibility technology, new code is likely needed. Be it the code for the page structure or the code used to present the content, non-accessible pages can be costly in the long run due to lawsuits, for example.
  • Design and/or function change - If statistics are off due to an unfriendly Information Architecture that make site navigation cumbersome, or due to page layouts that don’t fit in the small screens of today’s mobile devices, a new design will be on your list of changes.

Search Engine Optimization Triggers

When a website lands on the first page of Google’s search results, you can claim success. You have made it. Your site will have visitors. You product will sell. You can now lean back and relax. Not really. Vigilant monitoring is needed as search algorithms are constantly changing.

What happens if when you aren’t on the first page or if you slip from your pedestal? Something will need to change. What kind of changes? If only there was an easy answer to this question, you would be rich.

There are some efforts you might need to undertake, however. For example:

  • Platform change - Using a system that can deliver a semantic web solution is one step towards making a website more understandable. If a search engine can interpret the content of the website (e.g, “price” actually means product price), it’s more likely to index the content of its pages such that they can be delivered to users in search results. How do you think Google creates the images display or the shopping display? With page content it can understand.
  • Design and/or function change - In a 2018 blog post, Google stated, “Our advice for publishers continues to be to focus on delivering the best possible user experience on your websites and not to focus too much on what they think are Google’s current ranking algorithms or signals.”

The changes you need to make will come from an analysis which will include analytics and possibly user feedback. At the end, you should know what is wrong with your current site and how you might make it better.

Technology Triggers

Technology issues can trigger a website migration. With the current rate of change in web-related technology, an older website might already be facing issues that are triggering questions like, “Will our site crash in the near future and leave our customers hanging?”

There are several technology triggers that might send you into migration mode. Here are three examples:

  • Non-secure code - Hackers are always looking to see if they can break into your site. Be it a server hack or a site hack, it can happen. And, if you think only open source products are vulnerable, think about the number of security updates you accept from Microsoft on a regular basis.
  • Too much success - Your CMS was meant for blog posts, not community forums or product sales. You are growing. Your system needs to grow with you.
  • Accessibility problems - Yes. This has been mentioned before but given the increased number of accessibility related lawsuits against website owners, it’s worth repeating. Accessibility is just about page hits, it’s the law.
  • Lack of mobility - “Mobile first” is the phrase of the day and rightly so. Most web users today are using mobile devices to surf the net. Are they surfing you?

The type of changes that might be triggered from the list above can span all three: server change, platform change, and/or design and functionality change.

Mobile First

This drum has already been thumped, but it’s worth mentioning again. We have seen it. “Hey, I was on my phone the other day and saw this cool site. It fit great on my little screen. Can we do that for our site?”

The answer is yes. Given the trend for users to use a mobile device before they reach for their desktop computer, you need join the party. Several technology changes will need to be made to your site.

  • Layout plans - Where do the sidebars go when the page is in a narrow display?
  • Responsive breakpoints - When does the layout of your page change?
  • Menus - That horizontal menu bar will need to change shape in order to be viewable.
  • Media adjustments - Are you still offering up media that doesn’t run on a mobile device? Videos, Flash animations, not all formats work. And, don’t forget images. Those 4MG images aren’t going to fly to a mobile device with ease.

What does this mean for migration? Assuming you have the server environment that can manage the increase in your page hits from going mobile, you might need the following:

  • Platform change - If you aren’t working in a CMS that allows for mobile first design, you will need to change your CMS.
  • Design and/or functionality - As hinted above, page layouts,menus, media will need to be redesigned to accommodate the smaller environments.

Organizational Goals Triggers

The last trigger worth mentioning is the need to meet organizational goals. There is some overlap here with goals pertaining to Analytics and SEO. Other goals might include:

  • Additional services - An organization that talks about books might want to add the option to purchase said books versus providing links to external e-commerce service.
  • Additional resources - Instead of just selling products, the organization wants to provide an education focused community and tutorials.
  • Membership services - Some content might be worth selling right from the browser. The addition of a membership to the website and its valued resources might be the next step to reaching organizational goals.

In each of the examples above, all three types of changes might be required. A new system to provide the new functionality hosted on a server environment that can better handle said changes. Plus, when such changes are required, it’s likely that other design aspects will need to change, hitting all three types of migration.

Paths that might be taken

Once the migration requirement is identified, there are basically two paths to be taken:

  • Do it all now
  • Do it in phases

Do it all now

There are two scenarios that easily lend themselves to this approach.

  • Migration projects such as server changes are at the top of this list. Copy the site to the new environment, test it, fix it if necessary, and go live.
  • If the site will undergo minimal changes, getting it all done now is the likely path.

Of course, any scenario discussed above can follow this path to completion. With the right plans, anything is possible.

Do it in phases

There are several scenarios where this approach might be the best approach. Here are three examples.

  • Technology threats - The current site has been hacked and off line. Instead of spending time trying to fix a potentially outdated website, select the most important features of the site and spin up a new site as quickly as possible. Then, bring the remainder of the features online as they are completed.

  • Legal issues - Lawsuits against non-accessible websites can encourage the need to move quickly. While a new site is being created on a platform that supports accessible websites, two things can occur:

  • Budget - The business is growing, but the budget is still tight. Start with the new look and feel on the new platform and server. Get the basics up and running. Then, bring the new features online as resources permit. Two goals to meet in this scenario”

Creating the Right Team

Last, but certainly not least, is the team of managers, user experience experts, designers, developers, and possibly trainers. Who will you need? Without a plan, without an exercise of “What about …?” and “What if …?” scenarios, you aren’t going to know who you will need.
 

Architecture Workshops

From Stakeholder Mapping to the Delivery of Field-Level Blueprints the Architecture Workshop is designed to take your goals and objectives for your website and provide you solid plan. Whether you develop your website in-house or use an outside firm, this workshop will help you get your stakeholders on the same page, and give your website/project manager a blueprint to ensure you get the most out of your developers.

Private Drupal 8 Immersion Training for your team

  • Get your developers trained on the latest technology by the best Drupal trainers
  • Learn what new innovations you can implement with Drupal 8

 

 

May 31 2018
May 31

Does an accessibility issue on my website mean I need to build a brand new one? This might be one of many questions rolling around in your head as you read the email or letter informing you that your site has an accessibility problem.

 

Don’t panic just yet. It could be something simple, but you need to have all the facts. You need a plan of attack and that starts with a site audit.

Site Audit

Unless that letter is the result of a site audit, you need to set that wheel in motion. Conduct both automated and manual testing to confirm the claim and to determine if there are other problems waiting to be discovered.

Once you have a list of issues you need to address, you can decide if a new website would be easier and more cost effective than trying to fix your current site. Even if the list is long, starting from scratch might not be the answer.

Factors to Consider

Two simple factors in the rebuild decision process:

  • The content management system used to create your site pages
  • Content items in those pages.

After these are considered, site functionality and design can raise its ugly head and influence the direction you need to take. Let’s take a quick look at each factor to get you started.

Content Management System

If the issues reported are being generated by the content management system and are not a reflection of how the site was configured by the developer, ask yourself the following questions to see if there is cure.

  1. Is my CMS proprietary or open source?
  2. If proprietary, did the CMS provider promise accessibility when you purchased the system aso you can get the provider to resolve the problem?
  3. If open source, is there a patch or update you can apply to solve the problem on your own?

 

Simplistic questions? Yes, but they are merely a starting point. If you don’t see a solution after asking these questions, then you will likely need a new site on a different CMS. This doesn’t mean that you can’t transfer your current design to a new system, but it might be time to evaluate your site functionality to see if improvements can be made.

Content

If the issues presented in the letter and/or audit point to types of content that you created and inserted into the CMS, then there’s a chance that you won’t need a rebuild. Again, assuming the site has been configured to accommodate accessibility requirements, then it’s a matter of fixing your content and reposting. For example, if the issues focus on the following, then you can create a plan to fix your issues.

  • Content structure
  • Images
  • Downloadable files
  • Video
  • Audio
  • Uploaded animation

You still might need some developer time if configuration changes need to be made. For example, did someone forget to include the option for the alt attribute to be included with an image? If the changes are extensive, again, it might be time for a new site. Sometimes it’s actually easier to create than it is to edit.

Functionality

Are the issues you are facing tied to site interaction or services, i.e. online forms or interactive maps? Circling back to the CMS, could the issue be that the CMS wasn’t designed to do what you need it to do and will never let you meet accessibility requirements?

At this point, you can decide to either remove the functionality that is causing the problem or you can move to a system that can accommodate your needs.

Design

Just because you can, that doesn’t mean you should. Visual, flashy stuff on the page can be enticing to the user who can actually experience it. Are the issues you are facing linked to the that cool slideshow or mega menu? Depending on your CMS, there might be fixes to your cool features or there might not be.

Like with functionality, ask yourself what is required of your site and then what your CMS can do. You might be applying fixes to your design or you might be moving onto another solution.

In closing …

Facing the need to rectify accessibility issues on your site can feel overwhelming. Even the idea of tweaking all those PDF files to be accessible might want to send you to an early happy hour to drown your frustrations. Don’t worry. You don’t have to face this challenge alone. With training and expert help, you can avoid costly problems in the future.

Pages

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