Currently Viewing Posts in Development and Programming

Is Your Website ADA Compliant? Part 3 – Programming Best Practices

So far we covered the high-level guidelines that should be followed to conform with the Web Content Accessibility Guidelines 2.0 AA (WCAG 2.0 AA) and design best practices. This post will focus on coding and ADA compliance.

Developers should make best efforts to make website accessibility part of their everyday workflow instead of a last-minute task. It’ll save development and testing time. Here are a few guidelines to follow for modern website accessibility development:

  • Use proper document structure
  • Allow users to skip to the main content area
  • Set language attributes
  • Enable zoom
  • Describe images where applicable
  • Keep animations simple

Use Proper Document Structure

Do you remember when you learned how to code your first HTML page? There were, and still are, semantics that must be followed.

  • Be sure to follow the proper hierarchy of h1 to h6, and don’t use these tags solely for styling purposes. Doing so will also provide an SEO benefit. The following code shows a few headings with some content under them.

    Proper use of heading tags
    Proper use of heading tags
  • Use Ordered Lists when importance is needed
  • Use Unordered Lists when no importance is needed

Allow Users to Skip to Main Content

“Skip to main content” allows users to bypass the nav when using tabbed navigation.

    Tip: If this interferes with design aesthetics, hide it with CSS via a hidden attribute.

Set Language Attributes

Every page of your website must have a language assigned. Setting every page’s HTML language is an easy way to help your users, including those using assistive technology, to browse your website. Screen readers will pronounce words depending on the HTML language assigned to your website. You can set the language in your template by using the tag <html lang=”en”>.

Enable Zoom

For a website to meet the WCAG 2.0 AA standard, a user should be able to scale the page up to 200%. Be sure to enable your mobile users to zoom freely on their devices, and also check that your layout looks good in desktop browsers.

Describe Your Images Where Applicable

Alt Tags

By default, images are not accessible. Be sure to use alt text for images that need it, up to 140 characters in length. While alt tag descriptions are not necessary for decorative images, it is acceptable to use alt=””.

<img src=”bird.jpg” alt=”Parrot perched on a branch.”>
<img src=”decorative-image.jpg” alt=””>

For logos that link to the homepage, use alt=”Homepage” rather than “logo.”

Aria Tags

Charts and graphs can use an aria-describedby tag and link elsewhere.

<img src=”graph.jpg” aria-describedby=”desc” alt=”graph”>
<a href=”GraphDesc.html” id=”desc”>Get Graph details”</a>

Scalable Vector Graphics

SVGs should be accessible for everyone. In order to describe vector images, use the <title> and <desc> tags for short and long descriptions.

Keep Animations Simple

It’s important to allow the user to skip/pause the animations and avoid excessive use of animations and parallax. Make sure your video, animation, or other multimedia product does not contain flashing, strobing, or flickering elements as they can cause some people to experience seizures, dizziness, and nausea. You can use the Photosensitive Epilepsy Analysis Tool (PEAT) Tool to see if your content falls in these ranges.

6 Umbraco Packages You Need to Install

image of hand hovering over laptop keyboard

One of the reasons Umbraco is a great content management system is the wide range of packages and extensions that are available for building sites — many of which, like Umbraco, are free and open source.

As Umbraco developers, we’re always watching out for the latest and greatest packages. Here are a few of our favorites. This is not meant to be an exhaustive list or even a top 6 list, but rather a glimpse into the great ecosphere of Umbraco extensions.

Articulate

Want a blog on your Umbraco site? Since Umbraco 7.1, Articulate has been the blogging package of choice. It supports many of the features that make up a great blog including categories & tags, themes, Live Writer support, BlogML import/export, RSS feeds and author profiles. Developed as a free, open source project by Umbraco HQ core developer Shannon Deminick, Articulate has been actively maintained and is widely used.

ASP.Net Identity for Umbraco

Looking to add single sign-on, so your website users can log into your site using their Facebook, Google (and other) accounts? You can use ASP.Net Identity for Umbraco. This enables Umbraco to work with ASP.NET Identity and use something called Owin Middleware to enable external logins with OAuth providers including Facebook, Google, Microsoft, Twitter and more.

Is Umbraco the Right CMS for you?

Is Umbraco the Right CMS for you?

FIND OUT

Azure Blob Cache and UmbracoFileSystemProviders.Azure

These packages offload static files in the media section to the Microsoft Azure cloud so when an editor uploads a file in Umbraco, instead of saving the file to the media folder on the local drive, the file gets saved to Azure Blob Storage which can then be served via the Azure Content Delivery Network (CDN). Another package, Azure CDN Toolkit for Umbraco, makes it easy to link to resources on the Azure CDN from Umbraco templates.

Merchello

Merchello is one of the e-commerce offerings for Umbraco (the others are uCommerce and teaCommerce). Since we started using it 2 years ago, it has come a long way, adding many features expected in a modern ecommerce platform including support for promo offers and improved reports. We love it because the flexible programming API makes it great for customizing. The new FastTrack starter kit makes it easier to launch a storefront with Merchello.

Umbraco Forms

If your editors need to have the ability to create their own forms and export data submissions, Umbraco Forms is what you’re looking for. The form editor provides an intuitive user interface for creating responsive forms. As with most things Umbraco, Forms offers flexibility and extensibility with its ability to setup advanced workflows that can integrate with other systems via web services. While it is the only commercial package listed here, we think it’s worth the 99 Euros.

Vorto

Building a multilingual site? Then you’ll want to use Vorto. Vorto is a property editor wrapper that wraps an existing property editor and converts it into a multilingual property. This provides a great user interface for managing content in different languages.

 

These are a just a few of the many packages and extensions available for Umbraco. There are many, many others — most of them listed here. Interested in learning more about Umbraco? Flightpath will be hosting an Umbraco meetup on October 18 at 7 p.m.

See if Umbraco is Right For You

Need a new CMS?
See if Umbraco is
right for you.

GET THE WHITEPAPER

DrupalCon New Orleans Recap

DrupalCon is the name given to global conferences where members of the growing Drupal community, including developers, system engineers, designers, project managers, functional analysts, and more, gather to participate in learning sessions, talks, code sprints, and social events. Last week, Flightpathers Denise and Bart were part of the 3,102 attendees who attended DrupalCon in New Orleans.

DrupalCon Takeaways

Drupal 8 launched last November with hundreds of improvements, making it easier to use for both developers and site administrators. Translatability and localization out of the box, enhanced accessibility and WAI-ARIA compliance, REST-first native web services, and mobile-first, responsive, HTML5 output are just a few features that make D8 better than D7.

Drupal 8 has a large adoption rate. Within the 3 months of release, 60,000 websites have been developed. Popular companies that use Drupal include Tesla, The Weather Channel, Pfizer, Cisco and Nike.

 

Drupal 8 Features and Enhancements

Common Drupal 7 modules are now part of the Drupal 8 core like Display Suite, custom blocks, and views. This makes it easier for developers to build websites. There will no longer be a need to search for common modules and installing them. We loved the Lego cruise ship analogy presented by Josh Koenig of Pantheon:

DrupalCon New Orleans D7 Analogy of modules - you have to pull different modules to build a site. Looks a little sloppy doesn't it?
D7 Analogy of modules – you have to pull different modules to build a site. Looks a little sloppy, doesn’t it?
DrupalCon New Orleans D8 Analogy of modules - you get a better looking cruise ship
D8 Analogy of modules – you get a better looking cruise ship

Markup

All markup is now in Twig templates. That means developers can control HTML output and attributes like classes, data, IDs, and more. In Drupal 7, HTML was messy and there was no control over classes or IDs you had no control over it, making it hard for a developer to add/remove classes from HTML elements. Now with D8 you can easily control HTML elements and classes with TWIG templates. Only downside is that need to learn twig template engine but once you learn it, it will make everything easier.

CSS and Javascript

Drupal 7 typically outputs all CSS and Javascript files regardless if it is called on the page/node. Drupal 8 now has libraries that will include global or node-specific files.

Pattern Lab

Pattern Lab is a custom static site generator. We have used it for several projects and were pleased to learn that developers can combine a Twig version of Pattern Lab with Drupal 8. You can build out front end code once designs are produced and there no longer is a need to wait for a backend developer to build the site. You can just copy and paste the Pattern Lab CSS and code (or sync it with Grunt) to your Drupal theme, change a few class and ID names, and, voilà, you’re done.

Integration with Javascript Frameworks

Since you have full control of the markup and attributes, you can integrate with Ember, Angular, or React.js.

Other Takeaways

Security

We all know credit cards are important. Security on your site is more than just a credit card – that’s not what hackers want anyway. If you’re collecting Personally Identifiable Information (PII) such as a name and an email address, don’t store this information. By default, use SSL for your website – it will be a win for security purposes and also beneficial for SEO. Let’s Encrypt offers free SSL certificates so there is no excuse not to secure your site. Using CloudFlare, SSO (Google, Facebook) and other modules can help with security. Security is a good business investment.

UX Best Practices

Numerous presenters have stated that developers and designers should build a site together, especially after the wireframes have been created. With D8, Twig and Pattern Lab can help build wireframes to life.

Keep the user in mind. If you focus on the user, all else will follow. Set urgency to prioritize appropriate calls to action.

Accessibility

Creating an accessible web experience improves SEO, usability, and increases the size of your market by opening it up to the vast number of people who have restraints on their ability to interact with web content. D8 has numerous accessibility improvements, such as alt text being a required field.

A few tips:

  • Color contrast – Take note of text color over images, avoid low contrast, take note of font weight.
  • When writing image alt text, use descriptive phrases. Think of it like a tweet. go up to 140 characters.
  • Closed captioning on videos. YouTube has automatic captioning. Subtitles are great for silent autoplay.
  • Headings – avoid use of headings for styling. Use headings for hierarchy.
  • When writing link text, train your content editors to avoid using “Here” “Click Here.” Use descriptive links, like “For more info, email Joe.”
An example of how link text is typically written and how it appears on screenreaders
An example of how link text is typically written and how it appears on screenreaders

 

An example of how link text should be written and how it appears on screenreaders
An example of how link text should be written and how it appears on screenreaders

There was a lot learned at DrupalCon, with topics of interest to all parties within an organization. Beyond all the trainings and sessions, there was an emotional touch. DrupalCon ended with a marriage proposal at the closing session and a D6 funeral procession and mourning party.

We enjoyed our time in NOLA and we look forward to the next DrupalCon North America, which will take place in Baltimore next spring. Did you attend DrupalCon this year? Have you attended any noteworthy sessions? Let us know. Tweet us @FlightpathNY, message us on Facebook, or find us on LinkedIn.

Flightpath Certified as NYC’s First Umbraco Gold Partner

We are pleased to announce that Flightpath has been designated as a Certified Gold Umbraco Partner. We are one of a handful of gold partners on the east coast of the U.S. and the only digital agency in NYC certified as an Umbraco partner.

Umbraco is a free, open-source web content management system (CMS) built on the ASP.NET platform with an emphasis on simplicity and ease-of-use. It has the flexibility to run anything from microsites to complex applications for Fortune 500’s.

Flightpath has been building sites with Umbraco since 2008 and we have increasingly turned to it to build easy-to-maintain content managed websites. The Umbraco CMS has matured considerably since the launch of Umbraco 7 in 2013. The CMS has improved in almost every way including:

● Improved editor’s interface including a grid editor great for building responsive web sites

● Powerful developer programming interfaces using modern technologies (ASP.NET MVC, Angular JS)

● A rich ecosystem of plugins that provide enhanced functionality including support for multilingual sites, e-commerce, and much more.

Over the last three years, as we have seen the Umbraco CMS improve, Flightpath has invested in becoming Umbraco experts. Three years ago we became certified Umbraco partners — a designation that signifies that we have obtained at least four developer certifications. We are also active within the Umbraco community: for the last two years we have hosted the New York Umbraco meetup and every year we have participated in uWestFest, the annual North American Umbraco conference which began in 2014.

Becoming a Gold Partner was a natural next step in our continued commitment to the platform. Becoming a Gold Partner benefits all our current and future clients that want to use Umbraco. First of all, Gold Partners such as Flightpath support Umbraco by financially supporting Umbraco HQ, the company that maintains the open source project. This directly translates into ongoing improvements that benefit all Umbraco users. Secondly, by being a Gold Partner, Flightpath gets direct access to the Umbraco core developers and exceptional support for our Umbraco projects.

We are excited about the future of Umbraco and look forward to growing and riding our association with it in the years to come, for clients in the New York City area and beyond.

Building Great Editor Experiences with Umbraco

At Flightpath we love building websites with the Umbraco content management system (CMS) because it gives us complete control over how the site is rendered while providing the content editor with a great, easy-to-use experience. Last year the core Umbraco team overhauled the ‘back office’ with an improved interface and they have continued to refine the editors’ experience with subsequent releases.

Continue reading “Building Great Editor Experiences with Umbraco”

The State of Umbraco

Umbraco roots are growing in North America! Flightpathers recently participated in training and sessions at the second uWestFest in Orlando, Florida. uWestFest is the annual North American Festival centered around all things Umbraco. For those that don’t yet know, Umbraco is an open source content management system (CMS) built on the .NET stack with commercial support available from Umbraco HQ based in Copenhagen, Denmark.

Continue reading “The State of Umbraco”

5 Reasons You Should Consider Umbraco For Your Next CMS

With so many options available, deciding on a CMS platform can be a daunting and frustrating task—think wedding planning or car buying.  While there are certainly reasons people go with big players like WordPress or Joomla, we think CMS upstart Umbraco is worthy of your consideration if your website wishlist includes hassle-free customization, a user-friendly interface and great customer support.

Umbraco logo

Flightpath recently attended uWestFest 2014, North America’s first Umbraco festival, to learn about their latest software, Umbraco 7, and gain some insight on the benefits of this CMS platform.

1. Easy-to-use interface

The platform prides itself on being extremely intuitive and fast, which makes it an appealing platform for non-developer, non-designer users.  Translation: Less time learning the technology equals more time focusing on your business.

Alex Lindgren at uWestFest

 2. Great search and indexing service

Flightpath’s very own Senior Director of Technology, Alex Lindgren, spoke at uWestFest 2014 about the reasons to love Umbraco’s search capabilities.

“Umbraco provides a powerful API for building custom search because let’s face it, site visitors want to find relevant content quickly,” said Lindgren.

3. Passionate developer community 

While the cult-like community of Umbraco developers is rapidly growing, they remain a tight-knit group eager to answer questions and get involved in forum discussion.

4.  Highly customizable for content managers

Umbraco allows designers to build websites that are equal parts beautiful and customizable.

Screen-Shot-2014-04-16-at-6.04.53-PM

Flightpath recently created an Umbraco site for WageWorks that centers around interactive tiles that can be easily updated by the content manager and provide flexibility for page layout.

5.     Extensive support system

Getting things fixed on your website is a lot easier thanks to Umbraco’s support tools.  Users have access to a library of over 100 video tutorials as well as an umbraco wiki filled with step-by-step tutorials.  (If you’re willing to dish out some cash, Umbraco also offers a premium support service for around $4000)

If this seems like a perfect match for your website needs, Umbraco has a helpful list of developer recommendations on their site—including Flightpath who is now an official Umbraco Certified Partner.

Lowe’s Black Friday Facebook Sneak Peak Party Takeaways

Black Friday is the biggest shopping day of the year.  People wake up early from their food comas and rush to the big retail stores in the hope of scoring a great deal. But why wait until November 26th for special deals? Lowe’s Home Improvement realized this and leveraged Facebook to run a promotion called “Lowe’s Black Friday Sneak Peak Party.”
Lowe’s idea was to get Facebook fans to RSVP for the event a week before and get the buzz going.  Then, starting November 5th at midnight, customers waited for Lowe’s to post links to 90% off coupons on various products on their website.  There were thousands of coupons available for the duration of the event, so if you acted fast, you were bound to get a deal.

Being the avid shopper that I am, I RSVPed for the event but actually forgot about checking in at midnight to see what offers were up for grabs.  Turned out to be a good thing, because later that day, I found a stream of negative comments on Lowe’s Facebook wall.  Apparently, at midnight on Friday, 11/5, Lowe’s Black Friday Sneak Party kicked off according to plan.  Then, the first deal for 90% off a KitchenAid stand mixer went up, causing hundreds of shoppers to rush to lowes.com.  That first wave of shoppers caused the site to go down.  And not only that, but Lowe’s did not post the coupon code promptly after announcing the deal, leaving users impatiently waiting and confused.  Another big slip-up was Lowe’s not sticking to their word by posting deals when they said they would, leading to more than 1,000 angry comments on their Facebook wall.

How the promotion failed

A great campaign can easily go sour if not executed properly.  Here are a few hiccups that made anticipated fun turn into a harried ordeal.

  • Lowes.com went down when people were in the middle of the checkout process
  • Confusion on how to get the deal, e.g., Is that automatically added to the cart? Will Lowe’s post the coupon code? When will the code be posted?
  • Lowes.com Facebook and Twitter messages were not in sync
  • Facebook messages were not timed right:
    • Lowe’s said they would post a code within 20 minutes; it took close to an hour
    • Over 1600 comments were posted by frustrated fans who sat at their PCs constantly refreshing the Facebook page to see if the code had been posted

How to do it right

From my past experiences as a shopper, and working on many client websites, here are some tips to take into account when launching a promotion:

  • Be prepared: Account for a surge of traffic which will tax the webserver
  • Be honest: Don’t post misleading information
  • Be timely: Sync your Facebook posts and tweets; you don’t want to confuse your customers
  • Stay in touch: If you are having issues, let customers know right away
  • Set expectations: Disclose the time the promotion will be announced and stick to it
  • Control backlash: Find a way to manage the anger from people that felt entitled to win and didn’t, or they’ll overshadow the happy winners

Social media platforms are a viral medium.  People spread the word on good experiences and bad ones, too.  So even if there is a bad experience, try to turn it around.  Acknowledge you slipped and make it up to the customer.

From this Lowe’s promotion, I did not get the 90% off coupon that I originally wanted, but I received a consolation prize of 20% off a specific product.  And I received $10 off my purchase.  Was $10 worth my time?  Maybe not.  Will I participate in another Lowe’s promotion?  Probably, but that’s up in the air, too.