Web Design / Development

2017-05-04

US Capitol

On January 5th the US Access Board announced that the OMB (Office of Management and Budget) had cleared the Final Rule for ICT (Information and Communication Technology) Standards and Guidelines, a.k.a. the "Section 508 Refresh". The new standards and guidelines were published in the U.S. Federal Register on January 18th and will become effective and enforceable starting January 18th, 2018.

You may be thinking: "What does this mean for our site?"

1. Not all content/code will have to be updated right away, because there is a safe-harbor provision, specifically:

"legacy ICT that complies with the existing 508 Standards and has not been altered after the compliance date (i.e., one year after publication of the final rule) need not be modified or upgraded to conform to the Revised 508 Standards. However, when existing ICT is altered after the compliance date, such alterations must comply with the Revised 508 Standards."  

This means that if only some elements on the page are changed after January 18th, 2018, then only those changed elements need to comply. Any newly added elements will need to fully comply.

2. WCAG AA 2.0 is to be the new standard to follow. Previously WCAG A 2.0 was sufficient, but now you must comply with AA. This applies to all new or altered web, software and electronic documents, and includes digital content delivered to personal computers and mobile devices.

3. The Final Rule includes a provision for situations where some content might technically pass, but in reality be unusable by non-sighted / low-vision web site visitors, web visitors with cognitive disabilities, limited strength or limited manipulation. In such cases alternate content must be provided. This is in line with previous regulations, but is now more explicit as to which situations warrant this, and for what types of users. The Final Rule states that the:

"revised requirements include functional performance criteria, which are outcome-based provisions that apply in two limited instances: when the technical requirements do not address one or more features of ICT or when evaluation of an alternative design or technology is needed under equivalent facilitation"

In other words, in cases where the guidelines don't touch on whatever technology you may be implementing, the situation must be evaluated on a case-by-case basis to ensure the outcome is one that provides ALL web visitors with comparable, if not identical content. For example, if you have a video with narration, it must include closed-captioning or an alternate way for the deaf to to follow along. 

If your company or team is running into Section 508 issues, feel free to get in touch or check out or Section 508 services.

2017-04-04

Lately, you may have noticed some sites getting labelled as "Not secure" in Google Chrome:

Google Chrome: Not Secure (SSL)

Or in Firefox:

Firefox not secure - SSL

As of January 2017, Chrome and Mozilla (the makers of Firefox) have implemented this policy to inform people that they should be careful when filling in forms containing sensitive data such as passwords or credit card details. 

In the coming years, the Chrome Security team plans on marking all HTTP (non-SSL) pages (not just login pages or credit card forms) with a red icon indicating the connection is not secure.

You should strongly consider adding SSL to your entire site, and enforcing it site-wide so that any HTTP requests are redirected to HTTPS URLs.

Since 2014 Google has been giving a rankings boost to sites with SSL.

This means that aside from the obvious benefits of increasing security on your site, you can also improve your ranking in the SERPs (search engine results pages) on Google. Other key factors for ranking are mobile-friendliness and speed. Beyond that "content is king" - meaning your site should be an authority on its subject, be updated regularly, and ideally have some other sites with decent PageRank linking to it.  You don't need a zillion inbound links, especially if they're low-quality / low PageRank. Focus on quality content, speed, security, and mobile-friendliness / responsiveness.  

What it takes to add SSL on your site:

1. An SSL Certificate

You will need an SSL certificate. You can buy one from any number of vendors. We like RapidSSL but you can buy these from loads of vendors. Our favorite option, letsencrypt.org, is entirely free, but does require setting up a cron job. That can prove difficult in some hosting environments (e.g. shared hosting). You can buy single, multi-domain, or wildcard certificates. A single certificate will generally work for both yourdomain.com and www.yourdomain.com, but not any other subdomains (such as xyz.yourdomain.com). This option is the most common, and the cheapest.

2. Use 2048-bit key certificates

This refers to the RSA key pair using 2048-bit encryption. A typical SSL certificate would be 2048-bit with 256-bit encryption. Double-check Google recommendation before purchasing a certificate, since these parameters change over time and get continuously more secure.

3. Use TLS 1.2+

Older SSL protocols are considered insecure and will trigger browser security warnings.

4. Use relative URLs for resources that reside on the same secure domain

For example, if you have an image, you'd want to use a path of "/images/some-image.jpg" and not "http://www.mysite.com/images/some-image.jpg". This way you can change to https:// without having to change all those absolute paths to https://. If you're using a CMS such as Drupal, this will often be root-relative already  by default, or it can be configured to be that way. 

You should double-check that your site has no pages with embedded internal resources (images, JavaScript files provided by your domain) that use http://. Change those to root-relative before enabling SSL, or you will get "mixed content" browser warnings.

4. Use https:// URLs for all other domains 

Before switching to SSL, check your site for any embedded JavaScript files, iframes, or other external resources that use http. Change those to https. You could also just use protocol-relative URLs (e.g. "//google.com" rather than "http://google.com"), but then you'd better double-check that the domain being referenced actually has SSL in place. Some third party script providers don't have SSL, and it pays to make sure before switching to SSL.

5. Check out Google's advice on moving your site, since switching from HTTP to HTTPS will be considered a site move by Google. 

If you don't use Google Search Console, check it out. With Search Console you can get a sense of how Google sees your site. Google expects you to set up separate properties for each domain/protocol variation, even though it does consider them to be the same site. For example if your domain is "mysite.com" and you initially built it without SSL, you'd have two properties: mysite.com and www.mysite.com. If you then add SSL, you will need to also add properties for https://www.mysite.com and https://mysite.com. There are options you can set to instruct Google to prefer www over non-www URLs. Google will automatically prefer https, if it finds https. 

6. Make sure your SSL site's robots.txt does not block search engine crawlers

This advice only applies to sites that have different docroots (file paths) for HTTP vs HTTPS versions of the site. For example, you might have the HTTP site at /var/www/html, but the SSL/HTTPS version at /var/www/html_secure. In that case, you will need to check that /var/www/html_secure/robots.txt does not include "Disallow: /" or similar lines.

If you just have a single site (e.g. at /var/www/html), then you should already have a properly formatted robots.txt file in place which does not block search engine crawlers. It should not contain "Disallow: /" or similar lines.

7. Avoid the noindex robots meta tag, and allow indexing of your pages by search engines whenever possible

You can put noindex rules in robots.txt, which is preferable, but not always feasible. 

8. Redirect any HTTP requests to HTTPS

You can and should enforce SSL site-wide so that any HTTP requests are redirected to HTTPS URLs. This can be done using rules in your Apache or Nginx virtual host, or (if using Apache) with .htaccess.

2017-03-11

One of the things that makes Drupal a great CMS is the quality and robustness of its modules. Today I wanted to shine a spotlight on the Pathauto module. From Pathauto's project page;

"The Pathauto module automatically generates URL/path aliases for various kinds of content (nodes, taxonomy terms, users) without requiring the user to manually specify the path alias. This allows you to have URL aliases like /category/my-node-title instead of /node/123. The aliases are based upon a "pattern" system that uses tokens which the administrator can change."

Tokens require the Token module, which you'll likely need anyway, because it's required by many modules. You also should really install Redirect, so that whenever an item's URL alias is changed, the system will automatically created a redirect (so you don't start racking up 404 errors). After installing Drupal core, we ALWAYS install Pathauto, Token, and Redirect at a minimum; they are that essential.

Now let's stop and think for a moment why we might want to be able to set URL patterns. Imagine you have a blog and you want to control the URL pattern.

Custom URL patterns in WordPress and Joomla

In WordPress you can adjust the Permalinks, and it does offer an option called Custom Structure with token-like placeholders. This is rather limited though in terms of the available placeholders. You can of course change the slug (a.k.a. alias) for each individidual post/page/category manually, but that's silly to even contemplate on large sites. Long story short, there's no WordPress equivalent for defining across-the-board URL patterns with ease the way that you can with Drupal's Pathauto module.

We have had to deal with URL patterns in Joomla before as well. That can be a frustrating experience on larger sites, because Joomla relies so heavily on its menu system, meaning a page must be in a menu for its URL alias to be set to what you want. You can set up categories and subcategories, which Joomla will use for the generated URLs. There have been attempts at making Joomla's URL structure more customizable (sh404sef comes to mind here), but these are complex and they take over some core functionality, making it incredibly difficult to uninstall should you decide to uninstall it later on. And they never quite offer the same level of control and ease of use that Pathauto does.

Pathauto Example

Let's start with the Pathauto admin screen:

Drupal PathautoThe above screenshot is from Drupal 8, but it's pretty much the same in Drupal 7. It shows a few URL patterns tied to specific content types, followed by a default of [node:title]. This means that if I add a node such as News that has no pattern defined, it will still get an SEO-friendly URL based on its title, so if its title is "My Great News Item", its URL would be "/my-great-news-item". But if it's a picture with title of "Our New Gallery", it would be "/pictures/our-new-gallery". 

Pathauto is really great in combination with Views, specifically Views page displays. In the screenshot above you see we have a content type called Person, with a URL pattern of "bios/[node:title]". We also have a view page display with URL of "/bios". So visitors go to "/bios" and then they click on a bio, and that bio will follow the above URL pattern. Using Pathauto and Views together in this manner we can enforce consistent URL patterns across the site, without forcing editors to think about URLs as they're editing. It just works.

If you want to show 'breadcrumbs' e.g. "Home > Bios > Some Person", the Pathauto/Views combination is particularly useful when combined with Easy Breadcrumb. It relies on your URL patterns for generating its breadcrumbs. 

While we use Pathauto primarily for nodes (content / pages), it can also be used for users, taxonomy, and other Drupal entities. I highly recommend it and consider it essential to any Drupal site.

2016-04-26

Engaged learning microsite selected among nearly 13,000 entries

A Rider University microsite has been selected as an Official Honoree for the 20th Annual Webby Awards. The distinction puts Rider in the top 20 percent of nearly 13,000 entries from 66 countries around the world. 

The microsite focuses on engaged learning at Rider, showcasing the multiple ways in which the University creates opportunities for profound learning experiences. The site highlights the opportunities and results of students participating in internships, study abroad, service learning, student/faculty collaboration, the arts and leadership development.

“The engaged learning microsite takes users through a series of high-impact visuals, which include video and interactive storytelling, that portray how our students take part in a vibrant learning community and cultivate the foundation needed for future career and personal success,” says Rider’s director of enrollment digital strategy, Tara Laposa, who oversees every aspect of the website, including design, strategic planning and execution. 

Plethora built this microsite from the ground up and designed its UI with jQuery, CSS, and a responsive layout.

2016-03-02

That's right, Drupal 6 is at 'end of life' (EOL). 

Drupal 8 and 7 have both had security patches. Drupal 6 got a final security patch as well.

If your Drupal installation has not been updated in a while, make sure to get it taken care of soon, or drop us a line. 

2016-01-31

Our design for EIT Avionics was recently featured on Drupal.org's Featured Showcase. It is currently displayed on the drupal.org home page and as the first item on https://www.drupal.org/case-studies . In our case study we go into detail about the process of building a Drupal 8 site before the full release was out, which certainly posed some challenges. View case study »

2016-01-17

Drupal just celebrated a major milestone - its fifteenth birthday!

The Drupal project has grown tremendously over the years and with Drupal 8 it is now 'off the island'. Since its early days, Drupal has held on to its own internal ways of coding and using PHP, but with Drupal 8 this change changed dramatically. Now Drupal uses Composer, OOP, Twig, YAML, and Services to name a few. This new policy of openness will help Drupal grow and improve. It will allow themers to do their thing and coders to do theirs - better than before.

Drupal founder Dries Buytaert's post about Drupal's 15th birthday

2015-10-31

We receive our fair share of RFPs and often have mixed feelings about how to respond to these. All too often such RFPs are just companies or organizations going through the motions, when they may already have an agency selected. Other times the client has done a lot of internal work and stakeholder discussion to get to this stage, but have not yet involve an agency. We feel it's important for clients to know that early involvement of a web agency can be the difference between project failure and success.

Clients often start a project with pre-conceived notions.

By the time clients contact web development agencies, they often will already have formed ideas about problem definition as well as the correct solution. Many times, these are based on incorrect assumptions about the nature of the problem, subsequently exacerbated by deciding on a solution without first asking some important questions. This often takes the form of an RFP (Request for Proposal), which may mean the project is already fairly far along. This is a shame, because it would benefit clients to work with a web development agency earlier on, to define the problems, goals, and scope. Such planning can save a lot of grief later in the process.

Asking the right questions to understand the client's needs:

Following are a few examples of typical issues that come up, and how we might ask questions about these:

Client: “We need this site built with XYZ.” (insert Drupal, WordPress, or Joomla here!)
Us: “Why XYZ rather than {insert other CMS name here}? How did you come to that conclusion?”
(The point of this question is to understand WHY the client selected WordPress. Ideally this decision-making process would involve input from the eventual web developer, who could advise on the merits of one CMS over another.)

Client: “Here is a list of 10 pages we must have in the new menu.”
Us: “Why so many items? Users won’t know what to focus on. We need to cull this list.”
(Often older sites will contain a slew of menu items, which make visitors’ eyes glaze over as they hit their browser’s Back button, or they continue to search your site in frustration. The short answer here is that less is more, and giving visitors fewer choices initially is much better than throwing a dozen of different things on the screen at once.)

Client: “Please make our site SEO-friendly, too.”
Us: “What are your goals, in terms of SEO? Which keywords matter most, and which pages are top priority? Who on your end will be editing content?”
(SEO is not just a one-time technical implementation, but a process. It requires ongoing content addition and editing, so it is as much a workflow training issue as it is a technical implementation issue.)

A project is never just about one goal or one thing.

There is always more than meets the eye, and it is our job as information architects, web developers and project managers to uncover all of those aspects of a project.  

First, we find out what the client believes the problems, needs, and goals to be. Then we set out to uncover items the client may not have considered, or may have overlooked. This can lead to some very different project scopes by the time this discussion is over.

Asking the right questions early on can make the difference between a bloated scope, a lean and mean scope, and a "staged happiness" approach. This helps the client know what their options are, and know that they have considered their options carefully and with sufficient technical input. 

2015-10-20

Clients often ask us to set up CSV feeds / exports of views (lists of data). Now that Drupal 8 rc1 is out and we're starting to use Drupal 8 more and more, we're running into more and more requests for CSV export on Drupal 8. 

For example, let's say the site has a page that lists a company's staff directory, and HR wants to be able to download CSV containing all the staff member details for use elsewhere. This is a perfect use case for the Views Data Export module, together with Views. Views is built into Drupal 8 core. 

We can just add that CSV export onto an existing view

As of about one month ago there is now a Drupal 8 port of Views Data Export - have a look here and here. We have used it to put together a basic CSV export display in a Drupal 8 view, and it works as expected. This module is still very much under development, but it is looking quite solid and promising so far.

2015-10-08

Coming right on the heels of DrupalCon Barcelona, Drupal 8 release candidate 1 is here!

Drupal 8 comes with many improvements and features, including:

  • Object-oriented backend leveraging Symfony components
  • Built-in configuration management (the Features module)
  • The Views module is now part of Drupal core
  • Theming is much improved now with Twig and MVC separation of logic from design.
  • Multilingual support was given much more attention in this release.

We are already running Drupal 8 on several small client sites and are excited to start adopting it more widely in the near future.

Full details here

Pages