Laughlin Constable

Protecting our Client’s Brand Reputation Using Siteimprove

Laughlin Constable

Our client was looking for a tool to help manage their 13,000+ page Sitecore website. Pages are continually added and are modified by multiple content authors, so they needed a tool to help identify and organize issues that arise.

Siteimprove

Siteimprove is a tool that provides solutions for overall website optimization. Sites are regularly crawled to detect issues that affect content quality, accessibility, SEO, performance, and more. The dashboard organizes each area and displays the site’s overall score. This helps prioritize and triage issues to the teams responsible for site management.

Accessibility

For brevity reasons, I’ll be focusing on the accessibility feature. Accessibility is important to us at LC as it affects users with disabilities. There are over 60 million users with disabilities in the US alone. We believe in making web content accessible to everyone.

Accessibility Improvements within Sitecore

Siteimprove found an issue where two links with the same name went to different pages. Links should be distinguishable by their text to make it clear they lead to different destinations. These links were in the footer and resulted in over 43,000 occurrences. By simply changing the name of one of the links, our client gained 0.43 points back to the overall accessibility score.

Siteimprove found a larger and more complex issue with improperly nested headings. Headings should be nested to give an accurate representation of the content on that page. For those with disabilities, screen readers can view a list of all the headings found on a page. Other users prefer to tab through all headings to find information quicker.

To fix the 30,186 occurrences of this issue, we first cleaned up headings within the code. Still, 10,000 issues remained in the Sitecore content. Luckily, we were able to write multiple scripts that automatically swapped out any incorrect headings.

This was a large effort with an even larger reward. Not only did the accessibility score go up 0.83 points, but SEO also improved, as headings can indirectly influence rankings by making content easier and more enjoyable for visitors to read.

Conclusion

These examples are only a couple of the issues that we fixed. Siteimprove’s accessibility tool helped our client increase their accessibility score by 10.6 points. That may not look like a lot, but each resolved issue gained an average of 0.6 points. That’s a lot of fixed issues.

Increasing the score is one thing, but knowing that major barriers have been removed to make the client’s digital presence inclusive for all is a big win for everyone.

Creating an Interactive Map with Mapbox

Continue Reading

Charting a Path to Sitecore with Highcharts

Continue Reading

Improving UX with React and Sitecore

Continue Reading

What to look for in an Agile Sitecore development partner

Laughlin Constable

If you’re in the market to partner with a mature Agile development team like ours for your Sitecore project, here are some criteria to consider when deciding if a team is the correct fit.

Is the Agile team able to quickly provide an estimated cost and a delivery date for your project?

If the answer is, “No. We don’t provide estimates or dates because we’re an Agile development team, not a traditional Waterfall team,” this could be a tell that the team may not be a mature Agile team. A mature Agile team like ours can quickly provide estimates and reliable forecasts based on years of empirical data we’ve collected from previous Agile projects.

Will you be demoing working software on a regular interval as the team is developing our project?

Mature Agile teams, like ours, always demo a working increment of software at the end of a Sprint. A Sprint is simply a period of time, most often a two- or three-week period. Another name for this demo is called a Sprint Review and typically takes anywhere from 15-60 minutes. It’s important to remember that this demo is not a PowerPoint presentation or a Word doc that lists work items completed. It’s a demo of the actual software being built, usually in a development or test environment. Our Sprint Reviews are designed to spark dialogue via transparency with our clients as we build.

Does your team have Retrospectives, and do they share what’s discussed in them with stakeholders?

This is a trick question! Agile Scrum teams should always have a Retrospective once per Sprint, preferably on the last day. This is an important Agile Scrum ceremony that provides a safe space for the Scrum team to openly discuss what didn’t go well during a Sprint, and what the team may want to do differently in the future. This is a trick question because whatever is discussed in this ceremony is not meant to be shared with stakeholders. If an Agile Scrum team you are considering does not have Retrospectives or does them and claims to share the discussion with others outside of the immediate development team, they are not a mature Agile Scrum team.

Our Agile Sitecore development team

The Laughlin Constable Sitecore development team follows Agile development practices to deliver value at a rapid pace. Our clients often operate in dynamic market environments which demand an Agile team like ours who work within short development cycles to achieve a faster time-to-market.

Our individual team members have been working together for up to eight years in our downtown Milwaukee office. The team consists of multiple dedicated, full-stack certified Sitecore Engineers, a Product Owner, a Scrum Master, and Quality Assurance Engineers.

Our Product Owner partners closely with clients to ensure the work the development team is planning is of genuine value. Our Scrum Master role is an engineer on our development team who ensures the Scrum framework is followed.

If you are ready to connect with us to discuss your next Sitecore project, please fill out the form below. Our motivated, passionate, and mature Agile Sitecore team is ready to explore your opportunity.

Upgrading Sitecore – A Journey from 8.0 to 9.3

Continue Reading

Solving a Business Problem with Sitecore

Continue Reading

Improving UX with React and Sitecore

Continue Reading

Paul Brienza
Chief Growth Officer
(414) 270-7175
paul.brienza@laughlin.com

Let’s Talk

My Website has CLS – Now What?

Laughlin Constable

Social Distancing. Coronavirus. Lockdown. New normal.

These are a sampling of new terminology bestowed upon us in 2020 (albeit with little warning). Another new term that may not be as familiar poses a significant challenge to the well-being of websites: Cumulative Layout Shift (CLS).

Cumulative Layout Shift is a metric Google leverages within their Web Vitals initiative. It documents how often users experience unexpected layout shifts during the initial page load.

We’ve all been there – we finally find the page we’ve been looking for and start reading. Without warning, the page shifts and now you’ve lost your place. Frustration ensues.

An example of cumulative layout shift. Source: https://web.dev/cls/

In short, Cumulative Layout shift measures how much visible content shifts within the viewport on page load. It combines this with the distance the content shifts to determine the CLS score

CLS scoring chart. Sites should strive to have a CLS score of 0.1 or less. Source: https://web.dev/cls/

Measuring CLS

Sites should strive to have a CLS score of 0.1 or less. Here are three evaluation tools to check CLS and other Web Vitals scores:

Consequences of CLS

Google intends to factor CLS into their ranking algorithms starting in mid-June 2021. This likely means that sites with a high CLS score will start dropping in search rankings. Sites that invest the time and effort to fix CLS could see higher rankings.

Pinpointing CLS

The tools above are great at measuring and reporting CLS. They do a terrible job sharing exactly where CLS is occurring within pages. At LC, we like using the Layout Shift GIF Generator to find exactly where CLS happens. The tool also remeasures the CLS score as we make changes, which is handy in troubleshooting.

If you want to try it yourself, enter a url, select either the “mobile” or “desktop” option and let the tool work! It will gather screenshots and create animation loops that showcase page lifecycle events. It then presents your score and you can get to work.

Don’t forget to thank the creator of this incredible tool by buying Chris a coffee.

Screenshot of the Layout Shift GIF Generator evaluating https://www.laughlin.com/.

Tactics to Resolve CLS

Once you identify CLS, you can fix it with a series of clever experiments. Sometimes, you may need to implement changes that go against best practices, so be careful.

Width Attributes are Back

Include width attributes on images and videos. No need to include “px” or “%” units, use the numeric value. Reserving the required space for elements reduces size rendering hiccups while the page is loading.

In some cases, containers themselves will need CSS updates to include width properties to reduce CLS.

Host Web Fonts

Hosting fonts on your own domain, preferably on a content delivery network (CDN), allows the browser to download font files faster. You can also provide a preload hint:

<link rel="preload" href="https://6a5yb3wndl515ftou1t6rtum-wpengine.netdna-ssl.com/my-font.woff2" crossorigin="anonymous" as="font" type="font/woff2">

When the browser reaches this line of HTML it immediately sends a high priority request for the font files. This means the font is more likely to be available when the browser renders text.

Both of these updates in tandem reduce opportunities for font flash, showcased below:

Example of flash of unstyled text (FOUT), where the default font face displays for a short time ahead of the typeface called for via CSS.

Eliminate Dynamic Content Insertion

Refactor areas of the page where content is automatically inserted above existing content – except in cases where the content is injected in response to a user interaction. Examples of these include ads, embeds and iframes without dimensions. Ads are one of the largest contributors to layout shifts on the web. If you display ads, try eliminating shifts by reserving the largest possible size for the ad slot.

Animations

Use CSS transform animations instead of animations that trigger layout changes, like box-shadow and box-sizing.

CSS Triggers and High-performance animations are great resources for further insights.

Summary and Further Reading

The information above is a glimpse of what we have learned to date, but by no means is it everything about CLS. Please see the resources below for more information on everything in this post. The authors of those pages have all done great work to document how they combat CLS.

Hopefully this helps you keep your pages less shifty.

https://web.dev/cls/

https://web.dev/optimize-cls/

https://simonhearne.com/2021/layout-shifts-webfonts/

Be in the know, now!

Receive a monthly dose of big thinks. Don’t worry, you can unsubscribe at anytime. Privacy Policy

Your table is waiting

Laughlin Constable

I went out to dinner this past weekend and was so happy to have to wait for a table. Sounds odd, right, but after 14 plus months of the most challenging times for our restaurant partners, I was glad to wait. I was also glad to be extra patient with the mostly new staff the restaurant was lucky enough to recruit and glad to tip extra generously to help workers start to make up for lost time.

A specialty area of our PR services has always been assisting tourism, entertainment and restaurant brands when they are growing and expanding, rebranding, entering a new market, announcing new offerings or facing a challenge or crisis situation.

We’ve launched firsts to the market, seeded and sampled communities, run Friends & Family Nights and so much more when times have been good. We’ve also helped through challenges, side by side by owners and managers.

But right now, I see the tables as turned, and I have found a new way to try and support our restaurants, their owners and their staff. Collectively, we the masses, can send individual messages to each of our beloved restaurant owners and operators, letting them know they’re appreciated and we’re supporting their comeback to be stronger than ever.

Join me and share your awe and gratitude with restaurant owners for their resiliency and unwavering commitment during the pandemic. Acknowledge the significant steps taken to ensure safety and comfort for employees as well as guests. Share your amazement at the creativity and flexibility so many demonstrated with popup outdoor lounges – even in our Midwest winters – and making carryout a luxury experience. Praise their generosity for the ways they rallied to support displaced workers or health care heroes with a warm meal. And, because actions can often speak louder than works, let’s all be patient, understanding and generous as our restaurant workers return and ramp up.

Certainly, PR is about publicity and promotion, but it is also about valuing relationships, expressing authentic gratitude, creating a sense of community and making people feel valued. That’s PR we can all do right now.

Kristine Naidl, APR, is the executive vice president and managing director of Laughlin Constable’s PR offerings. She has worked with dozens of national and regional restaurant brands to raise awareness and drive traffic, create charitable and community programs and guide them through crisis situations.

Be in the know, now!

Receive a monthly dose of big thinks. Don’t worry, you can unsubscribe at anytime. Privacy Policy

Improving User Experience with React and Sitecore

Laughlin Constable

As a health-care organization that provides quality care to many current and prospective patients, the ability to easily navigate thousands of physicians to find one that is “just right” is critical. Physicians are their product! Recently, we worked with a large health-care client with an existing physician-finder tool that was beginning to show its age. The tool functioned well, but it dropped the user into an experience that was often quick to overwhelm.

Meet the New Guide

Rather than drop the user into a sea of physicians, the new approach was to replace the landing page with a launch pad to a guided search (fig. 1) that took the user through the most important filters before landing on a more manageable and relevant results page. One of the biggest changes was that when users got to the results page via the new guide, only physicians who were accepting new patients were displayed. In some cases, this effectively filtered out over one thousand physicians who weren’t relevant to the patient.

Technical Considerations

This was a situation that was ripe for a modern front-end development framework. The site had used KnockoutJS as a JavaScript templating solution in the past. However, Knockout has also been showing its age, and more robust and well-supported frameworks have emerged. Specifically, we narrowed our options down to ReactJS and VueJS due to their proven track record, community documentation and support, as well as their ability to integrate nicely with Sitecore JSS should we decide to use it. It was a close race, but we ultimately settled on ReactJS simply due to having more developers on the team with React experience.

Data Integration with Sitecore

During this project, we were also faced with the challenge of how to get physician data from the client’s back-end systems onto the website since the REST API they created for us was not intended to be consumed in real-time. Previously, data was downloaded from the API and directly inserted into four different Lucene indexes which had to be rebuilt often to keep data in sync. This was an expensive, time-consuming operation that was ready for an overhaul.

Our approach was to create an import agent that would run nightly and import all the physicians and their related filters into Sitecore as bucketed items. The process was simple – hit the API and grab the data in bulk, and then perform an “upsert” on the appropriate bucket in the Sitecore tree. This procedure can also be kicked off on-demand to support data updates during the day (fig. 2). With the data being persisted as Sitecore items, it is now indexed by Sitecore’s default mechanism allowing us to work more efficiently using the native Sitecore API.

An Application Within an Application

A common design pattern with ReactJS is to create a Single Page Application (or SPA) where the entire app is one page and “virtual pages” with relevant content are loaded on-demand with the help of a router. Because our client’s existing website was not an SPA, we essentially needed to create an SPA for the guide experience that existed inside of the larger non-SPA, the website itself. As a side note, because the guide was not required to be indexed by search engines (only the physician detail pages had this requirement), we did not need to create this app using Server-Side React Renderings.

Once we had a breakdown of UX design pieces that warranted their own React component, we created a map that explained each component’s props and child component hierarchy, sliced them into product backlog items, and planned out our sprints.

For testing, we harnessed Jest and Enzyme to unit test the JavaScript code.

Lessons Learned

Because this was our team’s first foray into React, there were a few growing pains and lessons we learned along the way. We were not initially able to utilize Webpack, so we ended up using a combination of Gulp, Babelify, and Browserify to transpile and bundle our code. Another issue we faced was prop-drilling. As our component structure was sliced rather thin for reusability, we ran into issues getting data from higher-level components into deeper child components, requiring us to create pass-through props for components in the middle-tiers. Future releases will likely rely on more focused component composition or the Context API. Furthermore, this functionality was written before React Hooks started to become a standard, and thus would likely transition to utilizing Hooks in the future. As previously mentioned, we will look to utilize Webpack in future releases.

The Result

Our client, especially on the UX side, was extremely happy with the result of this project. We implemented their vision perfectly, performance was drastically increased, the patients were given a much more welcoming experience, and we as a development team had a lot of fun working with front-end JavaScript frameworks. Since the release of this feature, our team has lovingly embraced the JavaScript side of things even more than we did previous. We implemented a team culture of avoiding jQuery and other frameworks when vanilla JavaScript worked out-of-the-box in our supported browsers. It also spawned many other side projects and learnings about how to incorporate VueJS and ReactJS into our solutions when the situation calls for it. It was really fulfilling to be able to learn a technology we hadn’t used before, implement it in the client’s vision, and have a blast while doing so.