Sep 13 2018
Sep 13

on September 13th, 2018

Website redesigns are a common occurrence in growing businesses, but many people get confused as to when they’re supposed to do one. Your website is a window for the world to get a look at your company. It’s a very important part of your business' marketing efforts. It’s critical to get the timing right.

While there’s certainly space between a redesign being a nice “want-to-have” and it being a “need-to-do,” here are some signs that will tell you when it’s time for a refresh.

Mobile Unfriendliness

Over half of all internet traffic is now coming from a mobile device. If your website is not formatted effectively to be viewed and used on a wide variety of screen sizes, then the redesign should come much sooner rather than later. Having a design that makes the content illegible on a mobile device will send your user elsewhere.

Responsive layouts, navigation links that break up into big, tap-friendly menus, data plan-friendly image optimization, and other considerations for mobile users are what constitutes a mobile-friendly design. Google provides a Mobile-Friendly test tool you can use to check your own website.

Mobile Versions or Responsive Design?

One approach to address this is to develop two versions of your website, one for mobile and the other for desktop users. The web server detects the device that your visitor is using and routes them to the correct version. The advantage of this system is that the mobile version can be optimized to be lightweight in data and speedy to load, specifically for mobile users. That means you can sideline any non-applicable considerations in your design. The biggest disadvantage is that you need to then maintain twice as many web pages: your mobile site and your desktop site.

We recommend responsive web design for our clients, instead. It's just more efficient.

Rather than developing both a desktop and a mobile version, you should have one website that will adjust its layout and navigation based on screen size. Skilled web developers can deliver fast websites to both platforms by optimizing and compressing images, using minified code (which means to strip out all unnecessary code), and other speed improvements.

By setting 'breakpoints' in the layouts, you can also have different layouts and navigation for different screen sizes. A giant drop down animated menu that looks great and is super useful on a desktop is gonna drive your mobile users bonkers.

Via breakpoints, you can set the navigation menu to collapse into a simpler menu with big finger-friendly buttons when it's served to someone on a phone.

Unprofessional Design

Your website is the first impression your company makes on a user, and you want that impression to be a good one. Customers are qualifying companies as much as companies are qualifying customers. They use channels like social media, company websites, and online reputation platforms to see if the company is a good fit for their needs. Compare your website to that of your competitors. Have coworkers critique the website. Look at websites in your industry that you enjoy visiting. Does your website stack up?

Trends shift in web design, as they do in fashion - what looked great in the past can be jarring or cringe-inducing now. Showing up to a pitch meeting in dated business attire projects the impression that you either don’t care about or are ignorant of modern clothing trends. When a visitor lands on your website, dated design projects that same impression.

Web design can look unprofessional if its inconsistent with your brand. Your website needs to clearly call out your company's value statements to your visitors. Unappealing fonts, low-quality icons, slapdash layouts, and thoughtless color palettes confuse and build mistrust in your visitors

User Experience and Design

Good design is about more than just the visuals of your website. It considers the users' needs and their experience while navigating and using your site.

Intuitive navigation needs to tell the user where they are, how they got there, how near their destination is, and how they get there. Thoughtful categorization of content complements your design. By grouping things in a way that makes sense to your visitor, you make it easy for them to solve their problems or satisfy their needs. 

High Bounce Rate

Bounce rate is a metric describing the percentage of your visitors that leave your website within moments of arriving from a search results page. Either they were sent away by a technical problem or something about your website compelled them to leave of their own volition.  You can see your bounce rate in analytics suites, like Google Analytics, assuming you have the code installed.

If you DON’T have this software installed, you have no way of knowing how effective or ineffective your website is. Bounce rates are considered to be great if they're in the 20's to the 30's (percentage-wise) and acceptable in the 40's and mid-50's. Upper 50's and up, is considered to be a high bounce rate.

There are two important things to note here. First is that these classifications are generalizations across a broad swathe of industries. Websites in some industries have a lower bounce rate since their content is more engaging. Second is that you should only be worried about human visitors to your website when it comes to bounce rate.

In your web analytics software, it's important to filter out bots and crawlers from your data. Moz has a great explanation and guide to filter out bots from Google Analytics

A high bounce rate means that your website is not serving its basic function in some fundamental way. This is a major problem that needs to be addressed as soon as possible. There are a number of reasons that visitors could be bouncing from your website, but some major ones are:

Slow loading pages

When a visitor arrives on your site, they expect the content to load nearly instantly. High load times (or latency) could be caused by bloated code (an inexperienced developer used way more code to achieve a result that a more experienced developer could have done with less). It could also be due to an inefficient system of fetching and displaying content or it might simply be large images that aren't optimized for the web.

The longer the loading time, the greater the chance that your visitor is going to head back to the search results and try the next option. Since your site likely appeared in their search results because you offer something they were looking for, this means your visitors went to a competitor.

Confusing Titles or Meta Descriptions

The page title (as denoted in your website by the <title> tag) appears in search results. It's read by search engine robots and used to categorize your website in their indexes. Meta descriptions (which appear in <meta> tags) are brief summaries of the content of the page (By default, this will be filled with the first few lines of text if you leave it blank). 

While search robots don't pay much attention to meta descriptions, visitors do. They read it and the title tag to decide if the answer to their problems lie on your page. If they arrive on your page and the content doesn't match the title or meta descriptions, they're really likely to head back and try another result.

Technical Errors

For some visitors, they could land on your website and not find the content they're looking for. The URL they clicked on leads to a page that does not exist. There's no reason to stay, so the visitor heads back to the search results. Or they arrive and are redirected to a redirect in a  permanent loop until they give up and try a different result.

Errors like 404 (Page not Found) or 301 (Permanent Redirect) loops are a very poor experience for the visitor and they can contribute to a high bounce rate.

Frustrating Content Administrator Experience

Administrator experience is a term that describes the ease of use of the website for normal operations. Updating copy, adding new articles, adding products to an online store are some everyday tasks for your webmasters and content editors. They need to be straightforward and simple to accomplish. If you need a professional web developer to make content changes or updates, you’re in dire need of a redesign. A good solution might be switching to a content management system like Drupal or WordPress. They excel at making life easier for website administrators who are not developers. This is particularly true if you have multiple people adding content to the website.

One of the simplest ways to improve an administrator experience is to review permissions for each user and limit them based on needs. A content administrator can focus on just the tasks they need to accomplish, making it easier to familiarize themselves with the interface.

Drupal has pretty granular permission systems in place right out of the box, letting you choose what each user can do. WordPress' permissions are role-based, meaning you assign a person to a category (Administrator, Editor, Author, etc) and they inherit all the permissions of that role. WordPress can be extended with plugins to grant more permission setting ability.

benefits of a content management system

Outdated Code

Even the best website will eventually need to be refreshed. Web technology evolves and improves constantly. New versions of programming languages like PHP, Ruby on Rails, and Java (to name a few) are released in updates. Eventually, much older versions of software stop being regularly updated.

This is a problem. The outdated code is a big security weakness, making it one of the first targets for malicious hackers. When support ends for older versions of software, it becomes more difficult and more expensive to maintain that website (since any fixes and updates have to be custom development). This becomes even more of a problem when the outdated software has dependencies or other software that requires it.

A redesign can be a good opportunity to refresh all of the software at once, bringing your site’s code up to the latest versions in one fell swoop.

Is it time to redesign your website?

Trends in web design, user experience, and digital marketing shift relatively rapidly. You can expect to redesign your website every 3-5 years if you want to stay current. For companies, this means that what visitors to your site will both expect and accept also changes. If your site doesn't meet the expectations of your customers, they'll leave. On the Internet, they're not starved for choice.

Send us a message if you'd like to talk about redesigning your website. We'd be happy to do a free site review!

Jul 23 2018
Jul 23

on July 23rd, 2018

Here’s the threat delivered to your email: They've infected your system with remote computer control malware. Pay a ransom in bitcoin or they’ll release evidence of you watching adult material. They show your password, or part of it, to prove their case.

Is this threat credible? No, it’s a scam. The bad guys got your information from a breach and are using it to shake you down. The evidence is manyfold:

It’s an untargeted, mass email scam

The scammers are not targeting specific individuals. Your inbox is one of thousands in a database. They’re only hoping to capitalize on panic and embarrassment to force some small number of people to pay the ransom. Their goal is making fast cash from the volume of people who give in, they’re not interested in running high effort blackmail. We know this because the content of the email is nearly identical in many, many reports.

Not only is there no concrete proof offered, the scammers actively dissuade the would-be victim from looking for evidence. There’s no mention of which adult website you had visited. Your full name often does not appear in the email. There are no images or videos of you attached or linked to.

No malware detected

The emails also claim to have installed malware through which they gathered this incriminating material - yet, malware scans reveal no threats. True, malware scanners vary in accuracy when it comes to more subtle infections. Software capable of remotely accessing your system is not one of those.

Nothing new under the sun

The history of this threat is also a clue to it being a scam. These reports have been floating around since the end of 2017. The nature of their threat, the amount of money they’re demanding and the method of ‘evidence’ collection has changed but it is essentially the same scam.

A stranger threatens to reveal embarrassing information about you and will remain silent in exchange for a ransom.

So, what should you do?

First, you should not pay this ransom. You SHOULD definitely see this as a big wake up call about your data security.

This data was pulled from one of the many data breaches that’ve been popping up in the last several years. That means that your email and password have been compromised.

Next, act:

  • Whichever password appeared in the email: change it, everywhere and never use it again. You can check if your password has ever appeared in a breach. If it has, never use it again.

  • Adhere to good password practices when creating new passwords.

  • Run a malware scan on your system - (Malware Bytes)

  • Consider cloud-based password vaults like 1Password or LastPass.

  • Create long and high-strength passwords by forming a memorable phrase, then adding capitalization and punctuation.

 

Concerned about keeping your website more secure?

Learn about on-going website maintenance services.

May 11 2018
May 11

on May 11th, 2018

We are proud to be recognized for our commitment to our clients!

We are now featured on Clutch.co with an overall 5-star rating from our clients and on Clutch’s sister website, The Manifest, as one of the top web developers in Chicago. We work to build strategic relationships, not just accounts. We listen to what our clients want to achieve and produce websites to meet those goals. A running theme to the client reviews has been our commitment and open communication.

Clutch is a B2B ratings and reviews platform that connects small and medium-sized businesses with the developer or software solution that best fits their needs. The Manifest is a research platform meant to aid buyers in the awareness, discovery, and decision-making process of selecting an agency to hire for a project. We are thrilled to be a part of both websites, demonstrating our expertise in web development and design services.

Clutch reviews are unique in that they are verified and independent. Their analysts personally interview our clients to understand what it is truly like to partner with Xeno Media. See what some of them had to say:

“I’ve worked with a variety of outside vendors, and Xeno Media stood out in every aspect of the engagement. I would recommend them to anyone without hesitation.”

“Xeno Media doesn’t just service us—they take care of us. They actually care about and understand us as a client. The level of trust between us is something that is very rare in a client relationship, but they have ours and we have theirs.”

“They're always on top of all aspects of the project. If I ask them to do something, it's done immediately. They're really quick.”

“This was one of the best experiences I’ve ever had working with an outside vendor.”

Special thanks to our clients for taking the time to share their candid comments with the Clutch analysts. It has been our pleasure working with you! We would also like to thank Clutch for including us in their research. We are looking forward to maintaining our rank as a leading web developer and reading more great reviews soon.

See full reviews on our Clutch profile!

Apr 13 2018
Apr 13

Website maintenance is needed to address any vulnerabilities identified in software over time.

Thanks to the collaborative nature of the open source communities of Drupal and WordPress, we get a heads up when new vulnerabilities are identified (Read more about why open source is great for business). When the fixes and security updates for those vulnerabilities are released, they need to get installed and tested as soon as possible.

There are benefits and drawbacks to fully automated website maintenance, just as there are for fully manual website maintenance. The best path is to do both.

A machine never forgets a step in a process. It just gets confused when it's presented with the unexpected. A person can introduce human error, but can create novel solutions to unexpected problems.

Benefits of Automation

Fast

Machines are much faster than people at reading code. Computers are fast and they can apply steps in a process much quicker than we can. They can also run multiple tests simultaneously, leading to even more time savings. There is an inherent, upfront time investment to program the scripts, but once that time investment is made, all subsequent processes are significantly faster.

Accurate

A machine can repeat the exact same process, in the exact same way, thousands of times. It can also log processes, errors and results at every step, every time. A person couldn’t log the results of every single step, or, if they did, they would take significantly longer than usual to finish each test and there’d be many more opportunities for human error. This accuracy in repetition and recording means that we have a clearer picture of the test and its results available to us.

Thorough

A machine checks everything within the scope you set for it and nothing outside of it. It doesn’t care if “this little change isn’t going to mess anything up”. It checks everything you set it to. That total adherence to process is key when testing a system with multiple, related, and moving parts, like a website.

The Human Advantage

We’re innovative

A machine never forgets a step, ever. It just gets confused when presented with the unexpected. People are needed to create novel solutions to those unexpected problems. A developer can invent new processes, fixes, and features and create new applications for existing ones. 

We can give human feedback

A machine won’t tell you if the final result looks professional and aesthetically appealing. It can only check if objects are rendered in specific predefined colors, object types appear in the correct spot on the screen and so on.  A person can see if everything comes together and looks good. They can provide feedback on the branding of your site, give you unquantifiable assessments of how your site makes them feel as a person.

We can do ad-hoc testing

Automated tests have to be developed, programmed and tested themselves before they can begin to test new features for your site. A person can run through some manual tests very quickly when there isn’t a need to develop a deeper test.

How we put it into practice

Our system automatically creates a cloned copy of our clients' sites and applies updates. It then runs a battery of automated tests on the patched clone sites, out of public view, before notifying our developers to review the results. 

Once the updates are confirmed to be working properly and that nothing untoward is going on, the developer pushes the site to live. If anything is off, the developer can dive right in and make any needed adjustments, again, behind the scenes. For anyone visiting a site during this process, it's business as usual.

Website maintenance solutions like this are critical to any business. Gone are the days (if ever they existed) of launch and forget websites. Websites vulnerabilities are identified over time as intruders' techniques become more sophisticated. You can't prevent 100% of all data breaches, just like you can't prevent every burglar from trying to break into your house. But you can fix the porch light when it gets broken, and tighten up the deadbolt if it gets loose. So long as you've got someone checking the lights and testing the doors.

Keep up your Website's Performance with Website Maintenance!

Mar 26 2018
Mar 26

Open source software is a great choice for businesses.

As developers, we use open source software for a number of reasons.

  • With the source code being openly available, we can modify, improve or build on it as we need. 
  • Updates and patches are actively developed and released in a collaborative community.
  • Open source software is well documented so we can always orient ourselves when we run into something new.

But most people that need a website built aren't developers. They need to know why they should go with open source from the perspective of a business decision. There are 4 key reasons that open source is a great choice:

Longevity

You can easily see how active the development team behind a given piece of software is by checking how frequently it’s been updated. This lets you make more informed decisions about which software to use. You can avoid sinking your time into something that’s gonna wither on the vine. Even if something IS abandoned, since the source code is freely available and made to open standards, another developer can pick it up and continue working on it. You’re not automatically beholden to the initial creator for support. 

Technical Quality

The open source solutions we build for businesses are of high quality. How do you defend that claim? By testing it! Open source solutions are free to be reviewed by anyone, at any time. With 10,000 eyes on your source code, any mistakes or problems will quickly be revealed and pointed out. More often than not, they’ll also be fixed and contributed back. This is Linus’ Law in effect. Named after Linus Torvald, the inventor of Linux, it states:

“Given enough eyeballs, all bugs are shallow”

This also makes the security of open source platforms more verifiable, since the source code of Drupal, WordPress and other open source platforms is publicly reviewable.

Flexibility

When we make something using an open source platform like Drupal, or Wordpress, we are making something that our client OWNS. They are free to take that thing to another developer, work on it themselves, or whatever they'd like. With a proprietary system, you have to to go to the original creator for any changes or additions to your software. The original creator then has to decide if adding your feature (which will change the software for all current and future users) is cost-effective for them. With open source, you have complete flexibility and customizability. You’re not locked into using us as you would be with proprietary systems. We let our expertise and experience convince our clients to stick around, not vendor-lock.

Cost

Open source solutions also cost much less than proprietary systems. In fact, they're often flat out free. Without licensing fees, which can be a percentage of the initial cost paid every year, you’re free to go further and get more out of your site or use that budget elsewhere. You're also free to try out the software however and wherever you'd like. From a small microsite spun up to try a new layout to a full implementation, you're free to have whatever you want built. In proprietary systems, you're limited by a free trial (assuming one is even available) with a short time span and restricted features to decide if you want to shell out for the full version.

Some of our own contributions to open source

We’re very active in the Drupal community and have organized and sponsored coding events like MidCamp, had our folks speak at Drupalcons and more. Here are some of the modules we’ve developed and contributed back to the open source community:

Contact Formatter

Drupal’s core software already had a system in place for adding a contact form so visitors could send you messages through your website. But, a client wanted to give their visitors the ability to reach out to them from a  form that appeared at the bottom of their blog posts - the core Drupal contact system was through a dedicated contact page. Albert, one of our developers, got to work on creating Contact Field Formatter, a module that lets you put that form anywhere you please. 

Easy Zoom

A client of ours has a site that really needs to showcase their beautiful, high-resolution images. Visitors to their site were going to want to see details on each of the images, so we put in a mouseover zoom function. Since we wanted to make sure their mobile-friendly site STAYED mobile friendly, we also wanted that functionality for visitors on their phones or tablets as well as desktops. We created a module that added this zoom function on touch to partially zoom images with panning, to better highlight photo heavy product pages, then contributed the module back to the Drupal community.

Bootstrap Paragraphs

Our Web Strategist, Jim Birch, created a module that merged bundles of Paragraphs functions into the Bootstrap framework. This improved page builder lets content managers very easily build pages with columns, images with parallax effects, accordions, popup modals, image carousels and more without coding a single thing. You can get more details from Jim's presentation.

Mar 23 2018
Mar 23

on March 23rd, 2018

We at Xeno Media are proud to have received the Model Workplace Award for Smaller Businesses by The Greater Oak Brook Chamber of Commerce at their Annual Meeting on March 20th, 2018. 

Our office culture focuses on work-life balance through two of the core company values: diversity and fairness. Staff work with principals and create a schedule of work that strikes a good balance between their personal and family life and the needs of our clients, colleagues, and partners. Staff are fairly compensated and represent a wide diversity of backgrounds and life experiences.

Men and women are evenly represented at all levels of the company org chart. In the male-dominated industry of web development, this is a point of pride for us.

On Fridays, we have a family style lunch around the conference table. During that weekly company lunch, we play some fast rounds of Texas Hold ‘em, tracking our stats for bragging rights. The conversation naturally flows from a kid's spelling bee, through national news, to Star Wars, and how dorky someone is for playing Dungeons and Dragons as a full grown adult (your jealousy is palpable). That can only happen with a positive office culture built on trust. I trust my coworkers not to tell anyone that I'm a huge D&D nerd. And they have been very discreet.

Having a positive work culture invests us in the work that we do.

We care about each other. This attitude flows into our relationships with clients. When we tell clients that we're open and communicative, that you call our office and you get a person, we're saying that from a position of authentic relationship-building.

Through this approach, Xeno Media attracts great talent and achieves a retention rate much higher than the industry average. We develop a deep institutional memory that benefits our many long-term clients. We respect and support the needs of the people here with families, be they moms or dads, and those without. Staff can raise kids, pursue their passions and interests, volunteer in local organizations, and advocate for important causes and issues.

We lean on each other and support each other. Those bonds are created by knowing that our colleagues care about our lives. We know when someone’s kid has strep and whose teen is stressing out over a dance recital. We laugh at the photoshop battles over a coworker’s epic snowsuit. We help out when it’s all-hands-on-deck because that's what we do.

Mar 12 2018
Mar 12

The benefits of a website are what drive your business goals.

"We need a website for our business, because our organization needs an online presence."

That's not a web strategy, it's a tautology, or saying the same thing in different ways. It's not advancing your business plans, it's doing something, just to do it. You don't need a website, you need the BENEFITS of a website. Increased leads, increased sales, wider reach; THESE are the things you need. We see too many prospective clients get caught up in the details of their new website, without considering what the site is supposed to be doing for them.

Pantheon’s Dwayne McDaniel gives a great talk about giving the client what they want, even when they’re not really sure what it is. It’s our job as web designers to help them articulate what their business goals are for the website. We understand the technical side of the web, and how it can drive business goals. We have to be interpreters, listening to what the client is trying to accomplish and translating it into web design and development that accomplishes those goals.

"We are not designing a chair, we are designing a human suspension system." - Kandace Brigleb at WooConference 2017

Quality, professional websites provide very real benefits to your business. But you need to pull relevant and concrete benefits from the website. In initial discovery meetings, it's important to nail down what specific benefits you're looking to get. What need does this new site need to fulfill for you? Do you need an increase in sales? Is lead generation the focus? This applies to non-profits and organizations as well! Converting potential funders or donors? Are you growing an email list to amplify your voice? We ask a lot of questions in discovery, but that's because we want to help you define what concrete and measurable goals are. If you, as the client, walk into that meeting with a clear idea of what benefits you're looking to get from the site, success is not far away. If you walk in with a head full of features and no goals, it's going to be a long discovery meeting.

What's the difference? Think of it as cause and effect. Features cause benefits. If the good thing you're looking at is caused by something else, it's a benefit.

  • Web Accessibility is a feature. It's proper markup of the website’s code that makes the site behave in a way that is predictable for people using assistive technology. (You can read about accessibility here, as well)
    • Increased audience share is a benefit of accessibility. 
    • Increased exposure to your brand is a benefit of accessibility
  • Search Engine Optimized content is a feature. It’s a bundle of tactics that make your website show up higher in search results when people search for a particular keyword or keyword phrase.
    • Increased organic search traffic to your site is a benefit of SEO content.
    • Increased lead generation is a benefit of SEO content.
  • UX-focused design (User eXperience) is a feature. It's keeping the ease of use, the pleasure of usage and the usefulness of your site to the visitor at the forefront of your decision making when building a site.
    • Increased visitor loyalty is a benefit of UX-focused design.
    • Improved conversion rates are a benefit of UX-focused design.

So you've decided on the benefits you're looking to get out of your site and set goals to define them. How do you know if you’re hitting those goals? Set KPIs, of course! Key Performance Indicators. These are concrete, measurable things you can use to track progress towards your goals.

Social media referral traffic, email signups, abandoned cart conversions are all great KPIs. If it’s a real goal, a true benefit, it needs to be something measurable. And with a bit of work, you can find a way to measure nearly anything. You take the benefit that you've identified and set a quantifiable metric based on data. It should be countable so that you can measure progress and see trends.

Nobody wants a website, they want to hit a KPI.

KPIs are mile markers on your journey towards your website's business goal. Regularly check your website's KPIs and see if you're advancing towards your goal. If you are, then your website is delivering the benefits that you defined. That's great! Look for ways to support or amplify your efforts. If not, dig into your KPI and think about which specific, actionable things you could be doing to turn that trend around. By identifying and tracking your KPIs, you have a specific area of your strategy to focus your attention, instead of "The website's not performing".

Check out Dwayne's full presentation at MidCamp (it's well worth the listen). If you're considering a new content management system for your website, learn why open source is great for business.

Get more for your business out of your website.

Jan 29 2018
Jan 29

Xeno Media can finally order a drink in a bar.

 

We can smoke in Chicago, we can gamble in Iowa, and even get a license to fly a plane in England. That’s because Xeno Media has turned 21 years old this January.

 

We’ve been around since before Google launched in September of 1998, back when people still hung up their phones and rewound movies. The Internet (or “World Wide Web,” if you will) has changed quite a bit since then.

 

When we opened our doors in '97 people were taking a huge leap forward in connectivity. Blisteringly fast 56k modems had arrived. Finally, humanity could leave the binding shackles of 28.8 behind and step into the future. Unfortunately, they wouldn't be widely available until '98. At those speeds, you could get a gigabyte (approximately 5 minutes) of HD content after an hour of downloading. What a rush! You also got treated to a wonderful dial tone noise that I will very ineffectually try to replicate here:

 

"BUZZZZZZZZZZZZZ-KACHOW-SQUELCH-baDOING-baDOING-baDOING-BUUZZZZZZZZ!"

 

It was the sound of humanity joining in global communication and harmony - Until someone called your house and the connection was broken.

 

We also broadened our perspective and adopted crisp 800x600 screen resolutions, leaving 640x480 in the digital dust (or the cathode ray tube dust?). If you wanted to, you could even shoot off an email while simultaneously watching the latest episode of Xena: Warrior Princess (or Hercules: The Legendary Journeys if that was more your thing) thanks to the wonders of WebTV.

 

We were still de-gaussing our screens then. Magnetic fields picked up by the metal plate at the front of CRT monitors (called a shadow mask) would cause discoloration in the screen. These magnetic fields deflected the electron beams and distorted the color, so you had a handy button on your monitor to send a rush of magnetized electrons through a coil wrapped around the screen. This field oscillated rapidly and spread the magnetic field randomly and evenly around the screen. As the field diminished, it removed the distortion (and made an extremely satisfying “Snap!” noise in the bargain).

 

Speaking of technology which would surely stand the test of time, IoMega's Zip disks were embroiled in a war with SyQuest's Ez135 disks for dominance of the storage media market (and the bizarrely capitalized name market). We had to decide if we wanted the truly voluminous 135 MB of storage offered by SyQuest, or the far more affordable 100 MB storage of IoMega's option. Thankfully, CD-RW technology came along not long after to settle the issue.

 

Netscape Navigator was the browser of choice, trailed by Internet Explorer. Though Internet Explorer eventually beat Netscape Navigator, NN still has a record that Internet Explorer still hasn’t shaken. Netscape Navigator’s original “Welcome to Netscape” web page is STILL up, enlightening people about “hyperlinks,” and inviting them to check out the Internet White Pages in order to connect with someone else who is “on the Internet”. You can learn about this exciting new information superhighway right here!

 

There were about 1.1 million websites live at the time, compared to today’s approximately 1.3 billion. If you didn’t know the exact URL, you had a plethora of search engines to choose from: There was a dog, a spider and some guy named Jerry (Or Lycos, Web Crawler and what had been renamed Yahoo), as well as Altavista, Excite! and others. Google came along the following year.

 

Things have changed quite a bit since we got started and we've changed right along with them. So here's to a happy birthday, and many more!

Jan 10 2018
Jan 10

In this installment of our series, we’re going to be looking at techniques, tools, and tips to ensure that your website is accessible to everyone that needs it. Accessibility isn’t easy, but it’s worth doing. The World Health Organization estimates that there are over 253 million people living with blindness or vision impairment in the world as of October 2017. If your website isn’t built to web accessibility standards, these folks won’t be able to use it. Thankfully, there are a number of resources to help your efforts:

WAVE

The WAVE validation tool is an invaluable piece of software from Web Accessibility In Mind (WAIM) that runs through your site and kicks back a report highlighting areas of concern. The report is broken up into Errors, Alerts, Features and ARIA flags.

Anything marked as an error needs to be taken care of immediately. These are things like missing alt-text, skipped headings, non-functional forms and the like. These accessibility errors will frustrate your users, or make it impossible for them to fully interact with your site. Alerts should be cleaned up as time allows and include things like redundant link names, skipped heading levels, or very small text. These are aggravating, but don't completely prevent a person from fully using your site.

Features and ARIA flags are a good "thumb's up" for accessibility. Features are things like an image with alt-text or including a skip link to allow screen readers to jump around your content as the user desires. 

ARIA (or Accessible Rich Internet Application) flags are markups in the HTML code that tells a screen reader how to navigate or use your more complicated website elements. These are your widgets like buttons, drop-down lists and so on. including these greatly improves the user's ability to use your site's widgets.

There are Chrome and Firefox extensions that make it really easy to scan through your site looking for any glaring errors to resolve

Google Lighthouse

Google Chrome has a built-in auditing function called Lighthouse. To access Lighthouse, you can open the Google Console with Ctrl+Shft+J (Windows) or Cmd+Opt+J (Mac) and then click on Audits (if it’s not visible, try clicking the two arrows to the right of Network, Performance, etc).

In Lighthouse you’ll have the option to run a variety of audits of your site. Make sure “Accessibility” is checked and click “Run Audit” to get a breakdown of issues. Lighthouse will run through your website, and present 8 different tests and their results, as well as an accessibility score from 0-100.

Apple OS - Voiceover

Voiceover is a feature built into MacOS that reads aloud the text and other elements on your screen. It comes pre-configured to be compatible with refreshable braille displays and is developed to be built into all of Apple’s apps and services. VoiceOver also features a virtual control called the Rotor. It's  accessed through rotating two fingers on the Macbook trackpad (as if you were turning a dial) and lets a user navigate directly to elements like headings, images and forms. 

JAWS

JAWS (or Job Access With Speech), is Windows-based screen reader software for people that have lost their sight. Developed by Freedom Scientific, it reads text and other elements aloud, while also sending the same information to a user’s refreshable braille display without requiring the use of a mouse. Since it uses the HTML markup language to navigate the user through the content on your page, it’s important to make sure you’re following proper standards. Otherwise, your page is going to confuse and disorient the user.

At $900, it’s quite expensive, but feature-rich. JAWS has been the premiere screen reading software for decades.

NVDA

Non-Visual Desktop Access (NVDA) is similar to JAWS, though it’s not as feature rich. Fortunately, it’s also completely free and can be run from a USB stick for portability. Developed by two blind men, Michael and James, the screen reader was born out of a desire to make computer access affordable to the blind.

The A11Y Project

The A11Y Project is a collaborative effort of developers working to support and encourage accessibility efforts. Their name is a numeronym for "Accessibility", where numbers are used to replace letters in a word. So “Accessibility” becomes both “A + 11 characters removed + Y” and “Ally”. They did that to save space on social media platforms like Twitter, so that the saved characters could be used for an extra word or two on accessibility.

The Project maintains a website of resources for developers looking to make their sites more accessible. This includes a checklist to help map out what might be missing on your site. There's also a style guide that is a very useful reference for building code to meet accessibility standards. It’s broken up into sections for the varied components of websites. Each section contains sample markup and outlines the relevant sections of the Web Content Accessibility Guidelines. It’s well put together and worth looking at.

 

You can check out the beginning of our series if you missed it, and learn about what's guiding accessibility efforts.

Dec 22 2017
Dec 22

What guidance is there for accessibility?

There are a couple of things that are driving accessibility efforts. The first effort is centered around developing standards for sites to conform to so assistive technologies can make sense of websites. The second revolves around federal laws to keep things equitable for people with disabilities.

W3C - World Wide Web Consortium

The World Wide Web Consortium or W3C (an international community of developers, organizations, businesses, and the public), works to develop standards for the Web. They believe that the Web is a great connector of humanity (as do we). Anything that prevents people from participating in that global connection lessens the Web as a whole. They kicked off the Web Accessibility Initiative (WAI) to gather a task force to develop standards and practices for web developers to follow. 

WCAG2.0 - Web Content Accessibility Guidelines 2.0

The fruit of that groups labor is in the Web Content Accessibility Guidelines (WCAG). These guidelines map out what your site needs in order to be accessible to a wide audience of people with disabilities. If you want your site to be useful to everyone that needs it, you need to be thinking about and implementing these guidelines.

The 12 guidelines, organized around 4 principles, lay out what your website needs. Your site needs to be:

  • Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

  • Operable - User interface components and navigation must be operable.

  • Understandable - Information and the operation of user interface must be understandable.

    • The site needs to be readable, it should be presented in a predictable way, and the user should be able to see and correct mistakes

  • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The WCAG2.0 guidelines lay out specific criteria for satisfying each principle and even have samples and suggestions. Some criteria satisfy the principles more than others and are given a special ranking like A (The videos on your site have pre-recorded captions), AA (they have an audio-only alternative that the user can choose), and AAA (the videos include a sign language interpreter as an option). Websites can strive towards reaching a specific "level of compliance," like Level AA compliance across all principles.

These guidelines are also on the verge of being updated with an upcoming dot release, WCAG2.1. The newer version will include a renewed focus on accessibility for persons with low vision and people with cognitive or learning disabilities. It’s also going to be looking at accessibility issues for touchscreen and small screen mobile devices. The new guidelines are set to be finalized by the end of this year and will be adding 3 new success criteria.

Rehabilitation Act of 1973 - Section 508

Section 508 of the Rehabilitation Act basically says that federal government agencies, including the Postal Service, have to make their electronic and information technology accessible to people with disabilities. This access needs to be comparable to what people without disabilities are getting. With the newest refresh of Section 508, the Act is requiring these organizations to meet Level AA compliance of the WCAG2.0 principles.

As of January 18th, organizations have to comply with web accessibility requirements or become vulnerable to Rehabilitation Act lawsuits from private citizens. These are in addition to vulnerability to lawsuits under the Americans with Disabilities Act.

The Americans with Disabilities Act of 1990

The Americans with Disabilities Act (ADA) was put in place to protect people with disabilities from discrimination in the workplace, to ensure that they are able to participate in American life at the same level as everyone else. It’s broken up into three major sections: employment (Title I), Regulations for state and federal agencies and facilities (Title II), and regulations for non-profits and businesses (Title III). In essence, the law states that people with disabilities should enjoy the same opportunities for employment, the same ability to purchase goods and services, and the same ability to participate in state and federal programs and services.

What’s this mean for your website?

Well, a lot, it turns out. More and more courts are finding that Titles II and III of the ADA apply to websites, particularly if you’re in the retail, restaurant , or hospitality industries. Lawsuits under Titles I & II of the ADA have been rising steadily. In 2015, there were at least 57 lawsuits filed, with 262 in 2016 and 432 as of August 2017 according to the law firm Seyfarth & Shaw.

These lawsuits have targeted companies like Bank of America, Charles Schwab and Safeway in the early 2000’s. More recently, Target paid $10 million to settle an accessibility lawsuit and cover plaintiff court costs according to the LA Times. These lawsuits were brought to bear because the companies involved had websites that couldn’t be properly used by assistive technology for the disabled. And they haven’t all been settled out of court. In June of 2017, a Florida judge ruled in favor of a blind defendant that the grocery store chain Winn-Dixie’s site was in violation of the Americans with Disabilities Act and ordered the company to revamp their website to get in compliance (check out the Forbes article).

Web accessibility is a serious issue and an important one if you want your website to be useful to everyone.

Dec 18 2017
Dec 18

on December 18th, 2017

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, 1997

What exactly is web accessibility?

Web accessibility is the removal of technical impediments that could limit access to or interaction with a website by any person with disabilities. The goal of a web accessible site is to allow all users equal access to all content and functionality. 

Some disabilities that web accessibility can address

  • Visual: Visual impairments up to and including complete blindness, various common types of poor vision, color blindness

  • Motor Skills: Difficulty using hands, tremors, Bradykinesia, loss of detailed muscle control, etc., due to conditions such as Parkinson’s, MS, stroke, and other movement disorders

  • Auditory: Hearing impairments up to and including total deafness and including the hard of hearing

  • Cognitive: Cognitive impairment and learning disabilities (Dyslexia, Dyscalculia, etc.) that may affect memory, attention, problem-solving and logic skills.

Temporary Disabilities and User Experience

When developing with accessibility in mind there will almost certainly be some unexpected good fortune.  For example: if a person breaks her primary hand, and is forced to wear a cast, she may temporarily lose the ability to operate a mouse. The developer didn’t plan to cater to the temporarily disabled, but well-designed keyboard navigation could surely save the day for such an accident victim.

Accessibility is also good for user experience (UX) in general. If you're holding a baby and find that you can navigate a site without having to use your mouse, that's a positive user experience. If your eyesight isn't so good, but you've got nice, big readable content, that's a positive user experience.

Why does web accessibility matter?

  1. It’s the right thing to do.

    Here’s a chance to make a positive difference in many people’s lives. Improving a site’s accessibility will make that site better for all users and will likely improve its position in the SERPs (Search Engine Result Pages). So be a good citizen and contribute to web accessibility! Make the web a better place for everyone!

  2. It may be required.

    There are various state and federal laws regarding web accessibility.

    Some organizations and businesses have faced legal action for non-compliance with accessibility guidelines. Even if you were to win such a challenge, the cost in legal fees and in lost time would be substantial. Why risk exposing your business to the possibility of a legal challenge.

  3. It’s good for business.

    According to the U.S. Census Bureau’s 2002 Survey of Income and Program Participation (SIPP), there are 51.2 million people with disabilities in the United States. That’s 18.1% of the U.S. population! Those folks need goods and services too, some of which are very specialized.

    Millions of people with disabilities shop, travel, buy cars, buy homes, eat out, go out and participate in most of the same activities as their fully-abled friends, neighbors and family. Web developers are in a unique position to work towards the good of all to advocate for and to help facilitate these behaviors. We all benefit.
     

  4. Web accessibility is becoming easier to achieve and more unified with web standards as time passes.

More to come

This series on Web accessibility will continue with the following:

Part II: What guides accessibility efforts?

This post will highlight the laws and governance related to web accessibility efforts.

Part III: Tools and techniques for web accessibility

Here we will provide a primer on assistive technologies and tools you and your developers can use to make your site more accessible.

Part IV: Case studies

This post will highlight two real-world applications where we have worked closely with clients to achieve highly-accessible websites. 

Sep 12 2017
Sep 12

on September 12th, 2017

Late last year, Google announced their mission to make the web more secure in their Security Blog post Moving towards a more secure web.  Google has been promoting the security, speed, and SEO value of Secure Socket Layer (SSL) for over a year and are now using the Google Chrome browser to further awareness.

In a post on the Chromium Blog titled Next steps toward more connection security, they stated:

"Beginning in October 2017, Chrome will show the “Not secure” warning in two additional situations: when users enter data on an HTTP page, and on all HTTP pages visited in Incognito mode."

If your site has any sort of form, even a simple contact form, or if users are logging into your site using the Chrome browser, this affects you.  They continue:

"Eventually, we plan to show the “Not secure” warning for all HTTP pages, even outside Incognito mode. We will publish updates as we approach future releases, but don’t wait to get started moving to HTTPS!"

We have moved a majority of our clients to HTTPS.  We'd love to help you get moved over too!

Recommend Options for an SSL Switchover

Switching over to HTTPS from HTTP is relatively easy:

  1. Acquire an SSL certificate from an established authority.
  2. Configure the SSL certificate
  3. Add a global redirect from HTTP to HTTPS and make necessary adjustments to your CMS.
  4. Test.
  5. Crawl looking for HTTP hard coded links and images and correct.
  6. Update external links that you have control over to HTTPS to maximize SEO.

Options for getting an SSL Certificate

  1. Get an SSL Certificate and install on the server
    Costs will include the certificate, installation of the certificate, testing, and reporting.
  2. Free Shared Certificate from CloudFlare
    By adding any level of CloudFlare to your site and moving the DNS server to CloudFlare you gain a shared SSL certificate for your sites.  This has no certificate cost and a monthly charge only if your needs require a paid CloudFlare plan for particular features. There is some testing and reporting required for this transition.
  3. Free Shared Certificate from Let’s Encrypt
    Let’s Encrypt is a free, automated, and open certificate authority brought to you by the non-profit Internet Security Research Group (ISRG).  This requires root access to the server or a host that provides support for Let's Encrypt and involves installing the certificate on the server and updating that certificate every 90 days.

Contact us today to switch your site to SSL

Photo by Tabby Guarnieri on Unsplash

Sep 06 2017
Sep 06

on September 6th, 2017

Xeno Media lead developer Michael Porter was selected to present Automating Putting Jenkins To Work For You at Drupal Camp St. Louis, Saturday, Sept. 23. Michael is a seasoned speaker and an expert on automation and testing.

Michael will explain how can we use the power of Continuous Integration (CI) servers for offloading some of the repetitive tasks developers and software maintainers need to do on a daily basis. Running core and module updates, unit tests and reporting can be automated and communicated using tools he will outline in this presentation.

We chose Jenkins as a Continuous Integration Server because it is:

  • Well documented
  • Open Source
  • Widely Used
  • Extensible

In this session, Michael will demonstrate how to use Jenkins to automate:

  • DB backups
  • A multibranch Stage/Testing Server
  • Behat tests
  • Coding standards tests
  • SiteSpeed.io reports
Michael Porter presenting at MidCamp 2017

The fourth annual Drupal Camp St. Louis is going to be held September 22nd and 23rd at the University of Missouri - St. Louis.  Learn more at https://2017.drupalstl.org.

Jul 25 2017
Jul 25

If you've been doing Drupal development for any amount of time, chances are that you have installed Drupal Coder to help you write clean, compliant code. Coder allows you to check your Drupal code against the Drupal coding standards and other best practices using PHP_CodeSniffer.  It can be configured to work in your IDE, and also works on the command line.

Writing code according to standards helps avoid common errors, and helps teams understand the code faster.

I installed Coder using Composer per the well written instructions.  Using this method installs it globally, so I can use it on all of my projects, and installs all the dependencies, including PHP_CodeSniffer.

I recently was tasked with working on a Wordpress site, and I started looking into the WordPress Coding Standards.  My setup didn't jive with the standard installation method since I already had PHP_CodeSniffer installed globally using composer.  I had to do a little digging to add these additional standards to my already installed setup.

Here is a quick recap on how to install Coder using composer, then we'll get into the WordPress Coding Standards setup.

Install Coder

Use this command to install Coder and all it's dependencies globally, so you can use them on your local computer in any project.

composer global require drupal/coder

To make the commands available globally, add this line to your .~/bash_profile, and that it is sourced (or restart your terminal).

# Composer recommended PATH
export PATH="$PATH:$HOME/.composer/vendor/bin"

Tell phpcs where the Drupal and DrupalPractice standards are located:

phpcs --config-set installed_paths ~/.composer/vendor/drupal/coder/coder_sniffer

Verify it worked with:

phpcs -i

You should see:

The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, Drupal, and DrupalPractice

You can now navigate to your Drupal project and run the following command to use:

phpcs --standard=Drupal file.name

Install Wordpress Coding Standards

Thanks to some help I found in the issue queue, here are the steps to install the Wordpress Coding Standards globally using composer.

composer global require wp-coding-standards/wpcs:dev-master

Again, to make these commands available globally, make sure you have this line in your ~/.bash_profile, and that it is sourced (or restart your terminal).

# Composer recommended PATH
export PATH="$PATH:$HOME/.composer/vendor/bin"

Like we did with Drupal, we need to tell phpcs where the Wordpress standards are located. We use the same installed_paths configuration set, and use a comma to list both the Drupal and Wordpress paths.

phpcs --config-set installed_paths $HOME/.composer/vendor/drupal/coder/coder_sniffer,$HOME/.composer/vendor/wp-coding-standards/wpcs

Verify it worked with:

phpcs -i

You should now see:

The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, Drupal, DrupalPractice, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP

You can now navigate to your Wordpress project and run the following command to use:

phpcs --standard=Wordpress file.name

Add aliases

If you've worked with me, or read my posts before, you know I love aliases. They streamline your process and help make you more productive. Add these aliases into your .bash_profile, .bashrc, or wherever you keep your aliases, and source it, or restart your terminal.

# Drupal Coding Standards
alias drupalcs="phpcs --standard=Drupal --extensions='php,module,inc,install,test,profile,theme,css,info,txt,md'"
alias drupalcsp="phpcs --standard=DrupalPractice --extensions='php,module,inc,install,test,profile,theme,css,info,txt,md'"
alias drupalcbf="phpcbf --standard=Drupal --extensions='php,module,inc,install,test,profile,theme,css,info,txt,md'"

# WordPress Coding Standards
alias wpcs="phpcs --standard=Wordpress"
alias wpcbf="phpcbf --standard=Wordpress"

After this you can simply type drupalcs folder_name or wpcs file.name and start writing better code!

Jul 10 2017
Jul 10

Drupal's Entity reference fields are the magic sauce that allows site builders and developers to relate different types of content. Because the fields allows builders and administrators to reference different types of content (entities), it facilitates the building of complex data models and site architectures.

Like anything in Drupal, the community takes the core tools and builds additional functionality on top. Here is a slew of modules that extend or complement the Drupal 8 core reference field so you can do even more!

This module is from the team that brought you the Paragraphs module. Adds an Entity Reference field type that has revision support. It's based on the core Entity Reference module but allows you to reference a specific revision of an entity.

Use case:

An entity is actually part of a parent entity (with an embedded entity form). When the parent entity is updated, the referenced entity is also updated, thus the previous revision of the parent entity should still be pointing to the previous version of the entity in order to fully support revision diff and rollback.

An entity reference field paired with a text field. You can use this module to

  • Override the title if you are linking to the referenced entity.
  • Add an extra CSS class to the referenced entity.
  • Override the default display mode for the field on an entity-by-entity basis.

Use case:

Aggregate lists of referenced entities like related articles, but you want to override the name or appearance of individual items.

Allows you to provide custom text along with one or more entity references.

Use case:

  • Add a referenced author, the word "and ”, and then another referenced author.
  • On another node, Add a referenced author, the words "with support from ”, and then another referenced author.
  • On another node, Add a referenced author, a comma ", ”, another referenced author, the word "and ”, and then another referenced author.

This module adds a field type that allows you to select the display mode for entity reference fields. This allows an editor to select from different display modes such as Teaser, Full, or any you add.

It also includes a Selected display mode field formatter which renders the referenced entities with the selected display mode.

Use case:

Allowing the administrator to change the display of related articles from a grid display mode to a list display mode.

This module allows you to change your Entity reference fields to be displayed as a select list, or checkboxes/radio buttons in administrative forms. It does this by allowing you to use Views as the reference method, where you can format the results giving the administrator a much better experience.

Use case:

Showing an icon or thumbnail in a selectable list when referencing a list, or a referenced image.

This cool little module works on both Entity Reference and Entity Reference Revisions fields and provides a field formatter for displaying the referenced entity in jQuery Tabs or jQuery Accordion.

Use case:

Returning multivalue Paragraphs items in tabs or accordion format.

Provides a new admin friendly Views filter for configuring entity reference fields. It allows users to select the labels of the entities they want to filter on rather than manually entering the IDs.

Use case:

Providing a better admin experience.

This module extends Drupal's default field formatter for entity reference fields in order to make it more flexible by introducing a new field formatter plugin. Along side the view mode option, you can also define the number of entities to return, or a specific entity, like the first, last, or offset them.

Use case:

Showing the first related product referenced from another product.

The plural in its name suggests more is coming, but currently this module adds a single validator for Entity Reference fields, the Circular reference validator. This prevents you from using the entity reference field to reference itself.

Use case:

Preventing an entity reference field on node 1 from linking to node 1.

This interesting sounding module lists other entities that reference your entity.

It also includes a sub-module Entity Reference Integrity Enforce which will attempt to protect entities that are referenced by other entities, and not allowing its deletion.

Use case:

Protect the integrity of the site by protecting referenced content.

This module extends the default entity reference field that includes a "Quantity" value in the field definition so you don't have to build a separate entity just to store two distinct fields.

It also includes autocomplete and dropdown field widgets that allow you to select which entity and add the quantity value.

Use case:

I'll use the example from this great blog on the module: A real world example might be a deck builder for a trading card game like Magic: The Gathering or the DragonBall Z TCG. We want to reference a card from a deck entity and put in the quantity at the same time.

This module creates a generic field formatter for referenced entities which allows you to select the formatter based on the referenced entity in the display settings form.

Use case:

When referencing custom entities that don't have view-modes of their own, you would not need to write your own custom formatters

This module extends the Entity Reference field that adds permissions along with the referenced entity. By adding this field, you can manage access to the entities referenced by this field and select permission level (none, view, update, delete).

Use case:

A lighter version of Organic Groups, or the Group modules.

In Drupal 8, Views are now entities! Drupal core's Entity Reference field is able to reference Views, however you can't actually reference the Views displays. This module extends core's entity reference module to add the display ID so that a View can be rendered in a field formatter.

Use case:

Adding a Views reference field to a Paragraphs bundle so you can have a view in and around other paragraph bundles. We implemented this technique in the Bootstrap Paragraphs module.

So cool! This awesome module adds the functionality to let you reference more than one entity type. It create a single field in which you can reference Users, Blocks, Nodes, Contact Forms, Taxonomy Terms, etc!

Use case:

Creating a "related” field, and allowing your administrators to select anything they want.

This module creates a Drag & Drop widget for the standard Entity reference fields. It provides you with a list of available entities on the left, and you can select them by dragging and dropping them to the list on the right.

Use case:

Providing a better admin experience.

This awesome module adds two widgets for your the reference fields on your admin form, one that allows simple selection of referenced entities, and one that allows you to add an entity, which then will be referenced.

This is super helpful for your content managers as they can create all their entities on one screen, rather than adding an author, or a t-shirt size, then having to create a blog post or product.  They can start on the primary piece of content, and add the secondary entities on the same page.

Use case:

Providing a better admin experience.

Phew! Thanks for making it to the end! Do you have a favorite Entity Reference module that we missed? Let us know on Twitter at @xenophiles and @thejimbirch

Happy Drupaling!

Acknowledgements

Thanks to Mike Acklin for his help with this article, and to all the awesome module maintainers and contributors!

Photo by Bethany Legg on Unsplash

Apr 18 2017
Apr 18

on April 18th, 2017

Attendees to Baltimore's DrupalCon 2017 should check out Xeno Media Strategist Jim Birch's presentation, Bootstrap Paragraphs, on April 26 at 10:45am.

In it, you will learn how to combine the power of the world's most popular front end framework, Bootstrap with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages.

Using the Bootstrap Paragraphs Drupal 8 module, you'll be able to create Bootstrap features like Accordions, Carousels, Modals, Tabs, and Multi-column layouts.  We'll also demonstrate how to harness the power of Drupal referencing Text, Images, Contact Forms, Blocks, and even Views!  We will also review how the module adds different widths and backgrounds which can be modified in the Drupal theme layer.

This presentation will review:

  • Why use the Bootstrap framework?
  • Why use the Paragraphs module?
  • What goes into the different types of bundles?
  • How we add width and background options
  • How to override, and build on top of the defaults

Learning Objectives & Outcomes:

Attendees will come away learning how to build a site using the Bootstrap Paragraphs module, how to customize it in their own themes, and how to use the module as a baseline to develop their own Paragraphs bundle types.

Mar 27 2017
Mar 27

on March 27th, 2017

Xeno Media Lead Developer Michael Porter was selected to present The Butler Did It: Putting Jenkins To Work For You at Drupal MidCamp on April 1 in Chicago.

Michael's presentation shows how use the power of Continuous Integration (CI) servers for offloading some of the repetitive tasks developers and software maintainers need to do on a daily basis. 

The session will demonstrate how to use Jenkins, the leading open source automation server to:

  • Run Drupal core and module updates
  • Run and report on behat tests
  • Run and report on Coding Standards
  • Trigger Offsite backup of production sites
  • Use Jenkins Pipeline workflows to build branch/feature based servers.
  • Triggering jobs with webhooks
  • Report progress, and results to Slack

MidCamp participation is part of Xeno Media's strategic dedication to Drupal and the Open Source community. We have been a MidCamp sponsor for two years and  Web Strategist Jim Birch is an active organizer.

Learn more:

Feb 21 2017
Feb 21

on February 21st, 2017

Organized by the Icelandic Drupal community, the inaugural Northern Lights Drupal Camp will take place on this weekend, February 24th - 26th, 2017 at the University of Iceland in Reykjavik. We are honored that our Digital Strategist, Jim Birch was invited to speak.

Jim will present his Holistic SEO and Drupal talk--which covers the modern state of Search Engine Optimization and how we at Xeno Media define best practices for technical SEO using Drupal.  It also presents ideas on how to guide and empower clients to create the best content to achieve their digital goals.

This presentation will review:

  • What Holistic SEO is, and some examples of modern search results explained.
  • The most common search engine ranking factors, and how to keep up to date.
  • An overview of Content strategy and how it can guide development.
  • An overview of technical SEO best practices in Drupal.

The presentation is:

  • Session time slot: Sunday 15:15 - 16:00
  • Session room: Room Eyjajallajökull

View the full schedule.

Jan 16 2017
Jan 16

on January 16th, 2017

Science Olympiad is a nationwide non-profit organization dedicated to improving K-12 science education, increasing diversity in the sciences and fostering a more science- and technology-literate workforce in the US. Science Olympiad sponsors tournaments and non-competitive events and provides curricula and training for teachers.

Science Olympiad experiment

Their website serves as the the communication center for their dispersed organization. Schedules, rules and other supporting information are available for all. Xeno Media developed a sophisticated custom knowledgebase for rule questions and proposed changes--with submissions sent off to content experts for review and submission.

Science Olympiad experiment

Their latest site harnesses the power of Drupal's latest release, Drupal 8 and provides a responsive interface for easy use on all contemporary devices.

"A responsive design is critical for Science Olympiad," said Xeno Media Principal Kevin Munday. "Teachers and students are using a wide variety of devices to access the site. Their experience must be seamless."

"Xeno Media has been Science Olympiad's web partner since 2008, responsible for envisioning and maintaining our online presence and brand," said Jenny Kopach, Executive Director of Science Olympiad. "This is our second Drupal site and third design with Xeno, and each generation has been more successful than the last, presenting our national non-profit's mission and content effectively. We couldn't be happier with the Xeno Media team!"

Visit:
Science Olympiad
Why Drupal 8?

Nov 29 2016
Nov 29

We have been loving learning Drupal 8’s theming system over the last year.  Drupal 8 core now uses the Twig template engine, which is a fast, flexible, and secure system that allows use to create the markup needed for the modern web.

What you can do with Drupal core’s Twig is pretty great, but the Drupal community always brings so much more to the table after real world use.  We don’t use them all, all of the time, but have used many as our design and development needed.  Here are our favorite modules to help build out your Drupal themes.

The Twig Tweak Drupal module gives Drupal 8 themers additional commonly needed functions and filters to use in templating:

  • drupal_view: Pass arguments to views.
  • drupal_block: Include a Drupal block.
  • drupal_entity: Include a Drupal entity.
  • drupal_field: Renders a field from a specific entity.
  • drupal_token: Use token API to deliver data to your templates.
  • drupal_config: Access and print configuration.
  • token_replace: Place multiple tokens.
  • preg_replace: The easiest way to alter their output.
  • image_style: Provide either path or URI to original image.

It also allows for you to turn PHP filter back on, which isn't recommended, and is off by default.

The Twig Field Value Drupal module allows Drupal 8 themers to get partial data from field render arrays.  If you want to have control of the markup on your field’s label and/or value, you can.  If you want to choose the field’s text format, you can.  This great utility module gives us the following filters:

  • field_label: Returns the field label value.
  • field_value: Returns the render array of the field value(s) without the field wrappers.
  • field_raw: Returns raw field properties value(s).
  • field_target_entity: Returns the referenced entity object(s) of an entity reference field.

This handy Drupal 8 module adds support for the Twig Extensions library.  The library adds additional filters to Twig itself, and this module allows us to use them in Drupal.

  • Text: Provides useful filters for text manipulation.
  • I18n: Adds internationalization support via the gettext library.
  • Intl: Adds a filter for localization of DateTime objects.
  • Array: Provides useful filters for array manipulation.
  • Date: Adds a filter for rendering the difference between dates.

The Twig Extender Drupal module adds a plugin system to add new twig extensions.  It includes one filter (truncate), and one function (user_is_logged_in), and promises more in the future.  Looks very promising.

This simple, and extremely helpful Drupal 8 module adds theme suggestions for form elements.

  • form-element--[form-id]--[element-type].html.twig
  • form-element--form-id--[form-id].html.twig
  • form-element--type--[element-type].html.twig
  • form-element.html.twig

The Twig Renderable Drupal module is another module that adds Twig functions and filters, this time that work specifically with render arrays.

Function

  • will_have_output('path', 'to', 'render', 'array')

Filters

  • add_class(string|array $class)
  • merge_attributes(array|\Drupal\Core\Template\Attribute $attributes)

This module adds a single Twig filter for transliterating diacritic strings. Transliteration is the conversion of a text from one script to another, and this module converts diacritic characters, those that have accents in them, to their normal counterparts.

The included example shows how it works:

{{ 'Hällo' | transliterate() }} becomes => Hallo

The Responsive SVG Drupal module that adds a Twig filter, with quite a few options for SVG Stacks.  SVG Stacks are like image sprites, where you have multiple images in one file, though these images are Scalable Vector Graphics.  Support for regular SVGs forthcoming.

The Twig Xdebug Drupal module adds the ability to use Xdebug within Twig templates.  Add {{ breakpoint() }} into the template where you want to debug, and when the Xdebug processor reaches it, a separate file will open so you can inspect the variables up to that breakpoint. The key values you'll see at the breakpoint are:

  • $context: Variables available to use in the template.
  • $environment: Info about the Twig environment, including available functions.
  • $arguments: You can also add arguments like {{ breakpoint(fields) }}.

This simple and handy module adds a Twig filter that removes the Twig debugging output, those informative HTML comments that let you know which templates are available, but they can also get in the way of what you are working on!

Update your template to use {{ content.field_image|clean_debug|raw }} when you are developing.  Remember to remove it before pushing to production though, it will error our if twig debug is not on!

The Twig Link Attribute Drupal module adds a Twig filter that allows you to add attributes to links, which also merges them with existing attributes.  Works well with the Menu Link Attributes module, but safely keeps some attributes in code, while Site builders and administrators can manage attributes in the UI.

Similar to Twig Tweak, the Themers Little Helper (TLH) Drupal module adds a bunch of Twig filters and functions, and promises more!  The current release includes:

  • base_url: the Base URl of the site.
  • Wrap filter: {{ content.title_field|wrap('h3') }} for wrapping markup around fields.
  • drupal_view: Embed a view direct in your template.
  • drupal_block: Embed a block direct in your template.
  • dump(variable): Support for the Vardumper module, which is faster than kint.

Finally, the Components Libraries Drupal module allows you to register “component libraries” defined by your theme or module as Twig namespaces.  This means that you can specify a different directory, rather than a folder called “templates” for your Twig files.  This is lays the foundation for being able to use component based theming, where each aspect of the design is an individual piece, or component, and allowing integrating the external tools like Pattern Lab and KSS Node, which would also use this Twig templates for living style guides.

Happy theming!

Oct 17 2016
Oct 17

on October 17th, 2016

Our Digital Strategist, Jim Birch, will be presenting on Holistic SEO and Drupal at BADCamp X, the 10th annual Bay Area Drupal Camp being held between October 20th - 23rd at the University of California in Berkeley.  This will be the second year in a row in which Jim will be participating in the event.

BADCamp is the largest regional conference dedicated to Drupal and open-source software with over 1600 attendees descending on the UC Berkeley campus for four days of presentations, trainings, summits, and sprints.

In 2015, Jim presented Optimizing Drupal 7 HTML Markup to a crowded room of Frontend developers and Site builders.

This year, Jim's focus is the modern state of Search Engine Optimization: How we at Xeno Media define best practices for technical SEO using Drupal and ideas on how to guide and empower clients to create the best content to achieve their goals.

This presentation will review:

  • What Holistic SEO is, and some examples.
  • The most common search engine ranking factors, and how to keep up to date.
  • An overview of Content strategy and how it can guide development.
  • An overview of technical SEO best practices in Drupal.

The presentation is:

In addition, Jim will be giving a lightning talk on Friday at the Frontend summit. Summits are more conversational in nature, and this event will focus on the best practices, and technologies used in Drupal development with presentations and panel discussions. 

Jim will be showcasing our soon-to-be-released Drupal contrib module Bootstrap Paragraphs.  The module is a suite of Paragraph bundles made with the Bootstrap framework's markup.

Sep 07 2016
Sep 07

on September 7th, 2016

We used the Acquia Lightning distribution in developing this site.  Lightning, takes full advantage of the awesomeness of Panels and Panelizer to display content defaults, and override on a per node basis.  We used Panelizer to set up displays for the full node displays, and the Teaser node displays.

This brought up a problem where I wanted to set up the title of the node using an H1 on the full display, but an H2 on the teaser.  We thought of overriding two templates to do this, but that didn't seem like a sustainable solution as we quickly realized there were other places we needed similar functionality, like choosing different html elements, and adding classes to fields of various sorts.

We had this functionality in Drupal 7 thanks to the Title module, and it's "Wrapped and Linked" widget.  In D7, the main purpose of the Title module was to turn the title into a field so it could be translated.  Since translation was moved into core in D8, there hasn't been a lot of movement on porting Title to D8, and that module was not an option.

After a quick discussion between Albert and I, he quickly got to work and started to work on the Drupal HTML Formatter module.  It is a simple module that lets you add HTML tags to fields that are strings, timestamps, datetime, referenced and entities.  You can add any HTML/HTML5 tag, add classes, and you can also set if the content is linked to content which is almost always required on entity reference fields.

To use, install as you normally do and enable the HTML Formatter module.  If your site is a Panels based display, one that uses Panelizer or Page Manager, and your Block, and select Html field formatter from the Formatter dropdown.  Then add your HTML Tag, and if needed, add the Class Name, and check the Link to Content checkbox and Save.

Not using Panels?  Well have no fear as the HTML Formatter also works on the normal Manage display tab of entities.  Select Html field formatter from the Format dropdown.  Then click on the settings cog to expand the options and you will see the same three options.

We developed this as way of giving back to the Drupal community, as I can imagine that there are others who have run into this need.  Let us know what you think.  You can find us on Twitter at @alb3rtski, @thejimbirch, and @xenophiles.

Aug 25 2016
Aug 25

on August 24th, 2016

How Zoomdata employees share insights into company life

Xeno Media is pleased to announce our latest Drupal 7 contrib module, Slack to Drupal.  This module imports pictures uploaded to Slack to Drupal 7 systems--thereby allowing a community of users to add content to a site while managing their daily business collaboration through the Slack app.

Zoomdata--who makes visual analytics software for big data--tasked us with coming up with a solution that allows their employees to submit images for the public website to share the company’s unique, engaging culture to aid in marketing and recruiting.  

Various source platforms, including Instagram, Flickr, and Twitter, were originally considered. As we surveyed Zoomdata employees, though, we realized that Slack was the ideal source. Slack is fundamental to Zoomdata’s work culture; Its 200 employees and contractors throughout North America and Europe actively collaborating on Slack on an ongoing basis. Leveraging Slack as the source platform would allow employees to submit images in real-time without breaking their typical work/collaboration workflows and methods.

With that settled, we started researching how to integrate.  Our developers researched Slack’s API and proposed two approaches: 1) Create a Slack “bot”--a virtual user that our human users could interface with. Or: 2) Integrate with a specific Slack channel.  We elected the later as we could more efficiently access the files in a specific channel and Zoomdata appreciated having a single destination channel for users to come to rather than clogging other channels with off-topic bot chatter.

With the Slack-side figured out, we worked on the Drupal development.  We are supporters of the Drupal Media initiative, and decided to integrate the the Drupal Media 7.x-2.0 File Entity as we do on many of our client sites.  The File Entity module creates an entity like a node for each file in the system.  This allows us to add fields, like Caption, Approval, Date, and Uploader.  It also allows us to use, and reuse the entities in the site on other pieces of content and create views of the entities.  We called this new entity Slack Image.

We also created an administration screen where an administrator can approve or disapprove images.  If images are disapproved, they are removed from the system and not imported again.  If approved, they are available where all the other File Entities are available.

For the Zoomdata public site, we created a view of the new Slack images that appears on their Careers page in a beautiful, modern, and responsive layout using Masonry Views, Colorbox, and GD infinite scroll plugin modules.

Our employees are always posting photos in Slack. I really wanted to share those photos with our customers, partners, prospective employees and vendors so they could get a view inside Zoomdata and know what a great team of people they’re partnering with. Jim, and the team at Xeno Media, made it possible by creating a fantastic Drupal website for us, and by developing Slack to Drupal.

Robyn Forman, Zoomdata’s VP of Digital Marketing.

Results so far have been very positive--with more than half of the company joining the channel and submissions coming from every office and department.  Through Slack to Drupal, employees from throughout the organization have shown what an engaged, fun, and cutting edge culture Zoomdata really is.

Jul 17 2016
Jul 17

on July 17th, 2016

Open Camps is a collection of 25+ Mission-Driven Open Source Conferences & Events which boasts over 6000 Attendees, more than 400 Presentations, and multiple day Training sessions. The conference took place July 8 to 17, 2016 at the United Nations in New York.

Open Camps exists because of a collaboration between the United Nations Open Source Innovation Initiative (Unite Open Source) and the multitude of open source communities, including Drupal, Wordpress, Angular, React, Meteor, Rails and many more.

The United Nations Open Source Innovation Initiative (Unite Open Source) aims to break down barriers to technology innovation through open source governance, communities and collaboration.

Unite Open Source has expertise on building and nurturing communities around open source projects. Through the Office of Information and Communications Technology (OICT), the Secretariat provides Unite Open Source with an existing neutral, multilateral framework that aims to use technology to improve the world.

Our Digital Strategist, Jim Birch, was selected to present at NYC camp, a Mission-Driven Drupal Conference. Jim spoke all the possible ways to use the open source Bootstrap Front End Framework with Drupal. Both open source projects are the foundation of the development we do here at Xeno Media.

Slides from Jim's presentation can be found at Bootstrap Framework and Drupal. This presentation reviews what makes up the Bootstrap framework; advantages and disadvantages of using Bootstrap, and all the possible ways to use Bootstrap with Drupal.

Jun 17 2016
Jun 17

on June 17th, 2016

In this example you are going to need the Panelizer, Panels, Panels IPE, Page Manager Plugin and the the Page Manager UI installed and enabled.  

After installing and enabling those plugins, begin by going to http://(yourdomainname.com)/admin/structure/page_manager

From there you can click “Add Page” to set up your new layout. Enter the information as shown on the screenshot:

Once you have saved those changes, you will see a new screen where you can add your page variant.  Click on the Add Variant link.

Once you have clicked Add New Variant, you get a new window.  Make it a Panels Variant.

Use Page Title only if you want all of the users to have the same page title to display.  Otherwise leave it blank. Choose what Page Layout you would like to use from the dropdown of available layouts.  From there you can add blocks to your layout and choose which region you would like them to display in.  

One thing to watch for, as you add the block variants, be sure to change the User dropdown from “Current User” to “{user} from route” if you are wanting show the information of the users on your site.

Within the variant page, you can also choose the user roles to display by adding a new selection condition.

Once you have your blocks in places, visit one of your User pages, and you will see your User’s profile content displayed exactly the way you want.

Jun 13 2016
Jun 13

on June 13th, 2016

Using fields and a little twig, you can assign class wrappers to any other field you like.  For this example, we are going have a paragraph type called Image (machine name pa_im), and within that paragraph type, we will create 2 fields.  One is called Image with the machine name of field_im, and the other is a list text type field called field_st, with the following allow values.  In addition for the field_st, on the Manage Display page, you will need to set the field to display as a Key.

Now that your paragraph fields are ready to go, within your content, upload an image within the paragraph field and choose your image style from the dropdown.  

Utilizing twig in the paragraph template itself, we can simply use:

<div class="{{ content.field_st[0] }}">{{ content.field_im }}</div>

At this point, when you inspect your code, you should see your image is now wrapped in a container div that shows which style you chose in the dropdown, and you can style your content based on those available values.  The beauty of this is you don’t need functions.  Just straight Twig.

Add your css, such as;


div.image-body {
float: left;
width: 66%;
}

And you are good to go!

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