Have you ever been asked to get creative? Or told to think outside the box? If so, you might have had one of two reactions (or maybe a combination of the two):

1. Hooray! No restrictions. Let’s go! 
2. Yikes! The possibilities are endless. Where do I start?

Regardless of how you might react, it’s crucial to keep the original ask in mind — not “get creative,” but the reason you were charged with getting creative or thinking outside of the box in the first place. Losing sight of the goal or falling into the trap of thinking that a strategic approach isn’t actually “creative” are the fastest ways to the land of no progress and stifled creativity. 

I think the best ideas come out of a harmonious combination of strategic and creative thinking. I’m not the only one; product designers often have a foundations-first approach to their work where they consider a baseline strategy before jumping into high-fidelity mock-ups. Strategists leverage innovation workshops to both strategically and creatively problem solve. And developers weigh cost and functionality tradeoffs when designing and building reproducible and deployable systems.

Problem solving, creative thinking, and focus are universal components of work-life – and life-life. Leveraging a tool to help you do all three isn’t a cop out, it's a way to help you get to the fun stuff (the ideas worth doing) faster. 

One tool that can help you confidently pursue your idea is an Impact and Feasibility Matrix, which will help you focus and narrow in. Your focus will keep you on track, and narrowing in on what ideas are worth doing will illuminate the way forward. Let’s dive in… 

Focus

Step one is keeping your goal in mind. To do so, revisit these questions often:

• How does this help solve the problem?
• How does this contribute to an ideal outcome?

Narrow In

Step two is identifying which creative idea is worth pursuing. One way I like to narrow in and confidently move forward is by plotting ideas on an Impact + Feasibility matrix. 

Impact is:

• Reach. What percentage of your audience or stakeholders will be impacted by your idea?
• Relevance. Does your idea target your key audience? 
• Longevity. How long will your idea impact your team? 

Feasibility is:

• Costs. What are your hard costs? This includes both the time investment and monetary investment. 
• Ease. How easy is your idea to execute? Is this something you can tackle on your own? Will you need to outsource your idea to a partner or vendor? 

The answers to all of these will be unique to your role, the problem you are trying to solve, and your organization. That said, somewhere between impact and feasibility, usually in the upper right quadrant of the matrix, is your sweet spot. This is true regardless of role, problem, or organization. Ideas in the sweet spot are usually worth doing. They reach a relevant audience for your targeted time frame, they are achievable, and within budget.  

Your impact and feasibility matrix will be unique to each problem you are trying to solve. Let’s take a look at some real examples. 

Examples

Problem: Help a newly distributed team settle in to working remotely. 

In the spring of 2020, many organizations (Viget included), were charged with supporting newly distributed teams. Throughout that year, we focused on surprising our team in new ways (think care packages containing branded sweatpants), removing barriers to communication, and improving access to resources (we implemented People Team office hours which we still keep to this day). We did send everyone their favorite candy and had local folks help deliver monitors to their teammates. We still don’t have Viget branded dog swag – maybe one day. 

Problem: Help team members get to know each other during weekly company-wide meetings. 

Each week, we host a company-wide all hands meeting. It’s a tradition we’ve kept since we were founded in 1999. The meeting has evolved over the years and so has our strategy for connection. This is a matrix we revisit often, some ideas we tweak and try again and others like requiring cameras-on or implementing a roll call isn’t something we would consider doing. 

To Sum It Up

The next time you find yourself spinning your wheels, or better yet, the next time you're tasked with thinking outside the box, focus first and plot your ideas on the impact/feasibility matrix. Doing so will help keep you on track and quickly narrow in on which ideas are worth pursuing. 

Global Accessibility Awareness Day (GAAD) is May 16, 2024! GAAD was created to help bring attention and awareness to digital inclusivity. No matter your role on a project team, digital accessibility should always be a priority from start to finish. Why is accessibility so important?

• Over 1 billion people worldwide have a disability, and that number is growing every day
• 15% of people with disabilities say they never go online, compared to 5% of people without disabilities, according to Pew Research Center
• According to a survey by Click-Away Pound, 71% of disabled users are forced to leave a website if they find it difficult to use

Digital accessibility directly impacts people’s ability to access information, buy products, apply for jobs, engage in discussion, and everything else that people do online that is becoming critical for modern life. Accessible spaces even benefit people without disabilities, as it allows anyone to take in content though their preferred method (reading the captions on a video instead of listening in a noisy environment, for example), and often breeds innovation as engineers work to find the best way to be sure everyone can access information equally.

The World Wide Web Consortium (W3C) has developed the Web Content Accessibility Guidelines (WCAG) in an effort to standardize digital accessibility. However, many websites unfortunately fail to meet these standards, leading to a lesser-quality user experience. WebAIM’s yearly report has highlighted some surprising statistics about WCAG across the top 1,000,000 home pages:

• The most common accessibility failure across home pages is low contrast text
• 98.1% of home pages have at least one WCAG 2.0 failure
• On average, there are 56.8 accessibility errors per page (this increased 13.6% from 2023!) 
• 16.8% of home pages had more than one <h1> tag

As you can see, there is still a lot of work that needs to be done to create a more accessible web for everyone. If you’re interested in learning more about digital accessibility and how to improve accessibility on your own projects, there are plenty of resources and online courses available. Resources range from free, to paid courses, to professional certifications. Below are some courses and resources that we recommend.

Free Courses and Resources

If you’re looking to introduce yourself to digital accessibility, these free resources are a great place to start:  

• A11ycasts with Rob Dodson - A series of video tutorials on YouTube that highlights topics including semantics, focus, the correct way to use a button, and a11y testing
• The Beginner’s Guide to Web Accessibility - An article by Dequeue University that summarizes why digital accessibility should be a priority, and how to determine if your website is accessible
• Common Mistakes with Using Colour in Accessibility - Digital designer Andrée Lange provides insights into how to take color contrast into consideration when designing for the web
• Deque Accessibility Resources - Dequeue offers a variety of free accessibility resources, including webinars, blog posts, and their accessibility testing browser extension, axe DevTools
• HTML Semantics and Accessibility Cheat Sheet - WebAIM provides a list of the most common HTML tags that have an impact on digital accessibility
• MDN Accessibility Tutorials - MDN is an open-source project documenting web technologies, which also includes an informative section on web accessibility documentation and best practices
• Section 508 ICT Testing Baseline - Outlines minimal accessibility testing requirements for federal agencies subject to Section 508
• WCAG 2.2 Quick Reference - WCAG are a series of web accessibility guidelines released and maintained by the W3C, with 2.2 being the current version of the guidelines. This page provides a reference to standards that websites should meet in order to meet current accessibility standards
• Web.dev Learn Accessibility Course - A series of informative articles ranging from beginning a11y topics, to more advanced topics including animation and motion

Deep Dives with Paid Tutorials

If you’re a developer who has experience in accessibility and want to dig more into the topic, these comprehensive tutorials will help you improve your a11y knowledge:

• Accessible Web Academy - Accessible Web Academy includes more focused a11y courses for designers, developers, content creators, and marketers looking to target specific topics 
• Inclusive Components - There is a free online summary of Heydon Pickering’s Inclusive Components, but you can also purchase an eBook on the topic. Heydon’s blog provides examples of a pattern library that bakes accessibility into each component
• Practical Accessibility by Sara Soueidan - Sara Souedien is a prolific front-end developer who specializes in accessibility. Her course, Practical Accessibility, is a comprehensive guide for all developers, from those looking to familiarize themselves with accessibility, to experienced developers looking to expand their a11y knowledge.

Advanced Knowledge with Certifications

• If you want to take the next step and become a certified professional in accessibility, IAAP offers professional certifications in digital accessibility:
  • IAAP offers five certification options, CPACC, WAS, CPWA, ADS, and CPABE
  • Deque University offers a curriculum to help prepare for IAAP certification exams
• The Department of Homeland Security also offers a “Trusted Tester” certification for Section 508 compliance
• W3C offers a free Digital Accessibility Foundations course, with an optional verified certificate ($99) upon course completion

As the world’s population and number of disabled users continues to grow, it’s clear that implementing digital accessibility in your products is more important than ever. By implementing the information from these lists, you can help users of all abilities access the content that you share, ensuring a better internet for everyone.

We just celebrated 24 years of Viget. That’s two dozen years! This year, our Spring TTT in celebration of “Viget24” was a virtual extravaganza. We’ve put on a lot of virtual events over the years. Some with really strong themes and swag bags; some that focus on simple, meaningful time together; and others that let us enjoy learning something new as a team. Regardless of the rest of the experience, a key component of all of our virtual events is joy, achieved often through intentional levity. We think it’s important to laugh together! We see laughter as a way to expedite connection, and connection leads to rapport which makes us better at collaborating — and in turn leads to more quality products for our clients. 

Experimenting and iterating is a critical way we try to continually get delight right. We’re pretty pleased with one of our experiments from Viget24 that we called “Lovely Spring Day”.

A Lovely Spring Day

As we were brainstorming for this TTT, we thought about how to throw some joyful levity pizzazz into the pieces of our virtual events puzzle that have become pretty standard. How do we add lots of delight without adding lots of time to the action-packed schedule? We zeroed in on the virtual backgrounds we’ve been creating for every event — they add a layer of specialness. Of place. This isn’t any old virtual meeting. This is a TTT! 

Another key consideration for our team is figuring out creative ways to tie in inspiration from our industry and our work. AI has been an obvious contender —  we’ve discussed it and tied it in to some extent for the past several TTTs. But this time, we wanted to see how we could use AI for delight — marrying it with virtual backgrounds felt obvious. And so, a ”Lovely Spring Day” was born. 

The TL;DR is that we generated custom virtual backgrounds for every Viget employee that encapsulates their “ideal spring day.” We then played a 15-minute guessing game where people tried to guess who the background “belonged to.” Then, people had access to the full folder of AI-generated virtual backgrounds to look through. Vigets could then choose the background that spoke to them most and set it as their background. 

Read on for more on how we put this together!

Pre-Event Survey

To support all of our TTTs, we send out thoughtful pre-event logistics surveys 2-3 weeks before the big day. The survey lets us know where folks are joining from (where can we send their activity + snack packages?) and gives folks a chance to provide input on how the People Team can help folks enjoy and be present for TTT. This time, we also snuck in three questions, just “for giggles.”

• In one sentence, describe your ideal spring day.
• List three things that spark joy.
• What color do you think suits you best?

We did not share why we asked these questions. Sneaky, sneaky! When it’s low-key like this, the element of surprise is often a quick way to level up the delight.

Asking for a Friend

With rich data in hand about what makes people happy in spring, we were ready to generate the backgrounds. I was stoked! I’ve been experimenting with ChatGPT for some time, so it was fun to be able to use the DALL-E 3 side of OpenAI’s GPT-4 model. 

Who knew Prompt Engineering would be part of my role as a recruiter-who-helps-support-TTT-planning? I played around with a couple different prompts to generate these background images. Ultimately, my goal was to create backgrounds that were meaningfully different from one another but still felt good (i.e., something you might feasibly want to set as your virtual background and nothing freakily AI, like uncanny valley hands).

Here are the prompts I landed on that got me to our set of virtual backgrounds:

• Please generate an image (dimensions of a virtual meeting background) that encapsulates the vibe of a day with [ BLANK ].
• Please generate an image (dimensions of a virtual meeting background) that features [ BLANK ].

In the blanks, I wrote the things people included in their surveys. Those blanks were filled with everything ranging from dogs, cats, and friends to beverages, specific temperatures, yard games, carbohydrates, hammocks and more! Sometimes, I’d include a detail I knew about that person myself, even if it wasn’t in their survey. Yes, I occasionally editorialized for both clarity and whimsy! This was for delight purposes, but also helped serve my goal of having the backgrounds be “meaningfully different from one another.” It’s amazing how many people’s ideal spring day is as simple as having 1) moderate temperatures and 2) no pollen!

I generated 55 images. Throughout the process, DALL-E nailed it. I only needed to regenerate 2 or 3 images with clarifiers (and only because they included AI-specific outliers like disembodied hands). Huzzah!

Here are some of my favorites, along with their prompts in the captions. Can you guess who they belong to?

IRL

Ok, so for the actual activity we had the images ready to go in a private Google Folder. I took twelve of the images and put them in a very simple deck. I shared my screen, introduced the activity, and invited people to guess who they think each image belonged to in Slack. It was so fun seeing people throw out guesses and then narrow in with any verbal hints I gave!

Each image took about a minute. Then, we shared access to the Google Folder, gave folks a couple minutes to choose a background that called to them (their own image or someone else’s), and set it as their background. It felt like a magical moment to witness people finding and resonating with their own image or delighting in the ridiculousness of their coworkers’. We saved about 5 minutes for this piece, which felt right.

The whole Lovely Spring Day activity took just over 15 minutes! It was a perfect way to transition from a long meal break into our next grouping of content. And, we got to see the different backgrounds throughout the rest of the meeting.

Oh, the humanity!

I think this activity was successful for a couple of reasons.

1. People laughed! 

2. People felt seen. Some of these backgrounds were incredibly on point. Some of that was due to key folks having well-documented interests and a Slack-Famous Dog. 

But some of it was due to the People Team knowing about our people — our coworkers — beyond the sentence they wrote in. This uniquely human involvement helped me call an audible as needed and tweak prompts slightly to make the backgrounds feel even more relatable.

3. We could commiserate about our eventual AI overlords. (Did you notice that I say “please” in my prompts?!) Listen, Viget has plenty of practical, healthily skeptical people who are dubious about AI. GenAI is not always a fun, lighthearted thing. But using it in a fun, lighthearted way to do something it’s really good at was a nice use case and thought-provoking exposure even for people who are not into it.

4. We could see where we all align, and where we differ! It was amazing to see just how many people love picnics, covet their caffeine, and appreciate a bike ride. It was also cool to see some unique folks who simply crave a rainy spring day, or some beloved Buc-ee’s. What a rich tapestry of individuals — literally!

Authentication! What a hassle!

Self-Hosting

Integrations

Customization

Conclusion

In the fast moving and constantly changing landscape of web development, codeless solutions like Webflow and Squarespace have emerged as an alternative to more traditional development. These platforms allow users to design and build websites through intuitive visual interfaces, and are viable solutions for many use cases out there. 

For the past several months, I've been working as a frontend development support specialist alongside one of our talented designers, Blair Culbreth, who is managing a large, established Webflow project. Here are my candid thoughts and impressions from this experience, along with some critical considerations for those looking to integrate Webflow into their own workflow. Spoiler alert: while Webflow has some impressive strengths, it also comes with limitations that can be both unexpected and frustrating at times.

What Webflow Does Really Well

Small Team Efficiency

Webflow truly shines for smaller teams or products, especially those with limited resources. For a team that’s just a single designer or a small development crew, Webflow can help lower the technical debt involved with getting a website to production. By mitigating some of the more complex aspects of development such as responsive design, cross-browser compatibility, and hosting, teams are able to focus on other aspects of the site. This makes it a strong option for startups, freelancers, or small businesses looking to create professional-grade websites efficiently and effectively without the necessity of a developer.

Animation Tooling

When I say professional-grade websites, I’m talking about more than just functional designs. Webflow has some fantastic animation tooling making it incredibly simple to build rich, full-page animations and interactions without ever touching a line of code. Users can create scroll-bound animations or interactive moments of joy all from the comfort of a relatively simple and straightforward GUI. Through the use of animation keyframes, you can elevate a static site into something that feels modern and expensive. Heck, I could even see using the animation tooling itself as a prototyping tool for design handoff in a more traditional web development process. This ability to easily add sophisticated animations allows smaller teams to produce polished, dynamic websites that rival those created by much larger teams with dedicated development resources.

Documentation & Education

Beyond its design capabilities, Webflow also stands out for its educational impact. The platform offers incredible documentation that covers core frontend principles, effectively bridging the divide between design and development. Through simple, digestible, and intuitive videos and written documentation, Webflow equips designers with knowledge that shores up many concepts and intricacies of web development.

Working with Webflow provides designers with numerous takeaways they can apply to future projects, including those outside the realm of Webflow. The platform educates users on HTML structure, CSS styling properties, and responsive design. This deeper understanding of web development makes designers more versatile and effective in their roles and inherently benefits communication between designers and developers, as their thinking will be more aligned with one another.

Navigating Webflow’s Limitations

Class Styles

Webflow's class-based styling system is a standout feature, especially to those familiar with CSS. It allows you to bundle properties into classes and apply them efficiently across different elements, minimizing code duplication. When used effectively, this approach facilitates the creation of reusable styles and design systems; however, mastering it requires attention to detail, similar to working with CSS directly, which can be made challenging within the Webflow UI.

Due to the separation of pages and content in Webflow, tracking down existing CSS classes and applying styles consistently throughout a project can be challenging. Keeping track of which class names apply what styles can be a struggle. While Webflow offers a Style Manager to help organize and manage classes, it can be difficult to use for quickly identifying how styles are being applied across the platform.

Moreover, the inability to open multiple pages in designer mode at once presents a significant frustration. Without the ability to compare elements across different pages simultaneously, users may face challenges in ensuring consistency and troubleshooting design issues efficiently. This limitation may lead to a slower, more cumbersome workflow, particularly in larger projects where maintaining a coherent design system is critical.

Another struggle with managing styles within the UI comes in the form of applying styles to combo classes. Combo classes are when you combine multiple classes together to create a variation or modified state of an element. Inadvertently applying styles to a combo class when intending to apply a style for the base class was a common issue I found myself running into, highlighting some challenges users should be aware of, especially when getting more familiar with Webflow.

These challenges underscore the value of implementing a strong and consistent CSS class naming system, such as BEM (Block Element Modifier). Adhering to a standardized naming convention will help mitigate some of the challenges posed by Webflow's class-based styling system, but it does come with the added overhead of needing to learn a new class naming convention.

Preset Web Elements

Webflow provides users with a diverse selection of default web elements, ranging from simple divs to intricate lightbox elements, which serve as the foundational building blocks for websites. These preset elements occasionally impose rigid structural constraints. For instance, when attempting to create a tabs menu with a filter, users may encounter a problem with adding additional elements to the tab menu block. This restriction forces users to either conform their design to Webflow’s constraints or devise creative workarounds to achieve their desired functionality.

Navigating such limitations can be challenging, particularly when striving to realize a specific design vision. It may involve exploring alternative solutions or compromising on the original plan. Yet, as users gain familiarity with the platform, those limitations can be anticipated, allowing them to develop strategies to circumvent the constraints.

Custom Scripts

One of the most powerful aspects of Webflow is also one of the most challenging features to balance. It requires careful management to avoid issues like performance degradation and increased technical debt.  It’s incredibly easy to have a website get bogged down with bloat, especially when a larger team might be working on a project.

Webflow lacks a built-in feature to view all custom scripts at a glance, making it difficult to track and manage them. Maintaining a documented list of all custom scripts used in your project and detailing their purposes and locations can help mitigate this issue, but that’s a fair amount of overhead to maintain. Additionally, custom scripts do not function in Webflow’s editor mode, requiring a site deploy for testing and troubleshooting, which can be time-consuming. 

The ability to add custom scripts opens up a world of options, including third-party plugins and libraries that can expand Webflow's native features. Tools like Jetboost or Finsweet can help fill in the gaps, and are oftentimes worth the investment as they provide relatively easy-to-use integrations that will make for a better user experience.

That’s all to say that applying custom scripts to a Webflow project is not necessarily bad, but should be approached with considerations on how to mitigate technical debt. Here are a few suggestions to help with integrating custom scripts into your Webflow project:

• Maximize Native Features: Use Webflow’s built-in features as much as possible. If a design can be achieved with Webflow’s interactions and animations, avoid adding custom JavaScript.
• External Development: Develop and test scripts in an external environment to reduce time spent deploying and debugging within Webflow.
• Reusable Components: Save frequently used custom code as reusable components to simplify maintenance and ensure consistency across the site.
• Regular Audits: Periodically review and clean up scripts to ensure that only necessary ones are loaded, improving site performance and maintainability.

Mitigating Difficulty Through Teamwork

I started this article by mentioning that I recently served as a frontend development support specialist alongside our designer, Blair, on this project. Blair took on the primary responsibility of building many of the pages, and I want to share more about our collaborative experience. Webflow is as close as you can get to building a traditionally coded website without necessarily needing to touch code, but that doesn’t mean there’s no value in having someone more familiar with the technical side of website building available. From accessibility considerations to complex layout structures, a lot of time can be saved by having a developer serve as a pseudo consultant on the project.

On numerous occasions, Blair reached out to me to help set up more complex custom implementations that required JavaScript or weren’t coming together as expected. By being able to jump in and solve those issues quickly for Blair, she was able to focus on building out the other pages. Similarly, I was able to audit and review her work to ensure it was inclusive for all types of users.

There are various development tricks we can implement to enhance user experiences for visually impaired users. For example, hiding text specific to a screen reader to provide greater context is a technique that a designer might not generally think about or even be aware of, but a good frontend developer would know to include. By being involved in the building process, I was able to highlight and advise on such instances, ensuring our project was accessible and user-friendly for everyone.

Conclusion

Webflow presents a robust solution for web development, particularly for smaller teams or projects with limited resources. Its intuitive visual interface and powerful animation tools enable the creation of professional-grade websites without the need for extensive coding knowledge. Webflow’s educational resources also empower designers to deepen their understanding of web development, bridging the gap between design and development and fostering better collaboration.

Webflow is not without its limitations. The class-based styling system, while efficient, can be challenging to manage, and the need for site deployment to test custom scripts adds to both the complexity and time investment required to build a project. Despite these challenges, many of the difficulties can be mitigated through careful planning and teamwork. Leveraging native features, developing and testing scripts externally, and creating reusable components are all strategies that can help maintain site performance and manage technical debt.

Collaborative efforts between designers and developers can further enhance the process, as seen in my experience working alongside Blair. This teamwork allows for efficient problem-solving and ensures that accessibility and user experience are prioritized throughout the project. By combining the strengths of Webflow with thoughtful collaboration and strategic planning, teams can create dynamic, user-friendly websites that meet modern standards.

Users expect a website to load fast. An average web page loads in about 2.5 seconds. The longer the user has to wait, the higher the user bounce rate. There are a lot of factors that go into site speed, but images account for about 75% of the page weight on an application or website. Google’s Core Web Vitals uses several metrics to rank sites. Visual site speed or largest contentful paint affects ROI as slower sites have fewer repeat users and fewer sales.

Without properly sized images, both site speed and image quality are affected. Accordingly, we use several methods to deliver properly sized images. Our primary solution is imgix because it is easy to implement and saves managers and clients time and effort. 

Imgix Key Features

Imgix provides a lot of features — some we consistently use on projects, and others we use in very specific situations. 

Responsive Images

Setting up responsive images can be complex. As the variety of devices and their screen resolutions continue to expand, managing all the different image requirements is increasingly challenging.

Consider this scenario: a website’s images look crisp and clear on a high-resolution monitor. When that same page is viewed on a mobile device, the images are so large the page takes forever to load. A solution could be to upload a smaller image for mobile, right? It's not quite that simple. We need eight or more different sizes of the same image to account for different screen sizes and retina screens. Keeping track of all the image sizes and saving each size gets complex and would be nearly impossible to do manually on a site that has hundreds or thousands of images. 

One of our clients, National Park Foundation (NPF), wanted to clarify its message to better target major donors. Their gorgeous, large scenic images are essential to their website strategy.  NPF needed the images throughout their site to be crisp and clear at all screen sizes. Using imgix, NPF content managers can load high-resolution images to the CMS and not worry about the site's speed or performance. They rely on imgix to deliver the correctly resized image for any user's screen.

Imgix does this with their Device Pixel Ratio and Client Hints which automatically sets the pixel density for the image based on the user's device. Those API parameters can be easily set in the URLs for the image’s `srcset`. This allows developers to set an image width for an image `srcset` and then imgix delivers the right pixel ratio image to the user. We use `srcset` with imgix on other client sites like Bezos Earth Fund and Human Rights Campaign as well.

Resize and Cropping

Imgix allows you to crop images in addition to setting an image’s focal point. So, only one image needs to be uploaded and it can be used at multiple sizes and croppings throughout the site. Let's say we upload a large landscape image, but on some pages we only need to use a portion of the image cropped as a square. Imgix will crop the image and deliver the smaller versions on the pages we need while persisting the larger versions on other pages.

At Viget we use resizing and cropping on our own website, including our articles, to crop the staff photo to a smaller size at the top of the articles. This makes it possible for us to upload the staff photo once and the article image gets created automatically. 

Color Palette 

Another feature that we've used on client sites is the Color Palette API which allows you as many colors as you want from an image. For example, the Shedd Aquarium website that we built uses this feature by pulling a vibrant color from the image and setting it as the background color for the page hero. Aside from taking the manual work out of closely aligning photography with a page’s design, there’s an additional benefit: if you are on a slow connection, you will see a dynamic colored banner at the top before the image loads.

Image Upscaling

Another valuable feature is the ability to upscale images. Even if you upload an image that is low resolution, it can still be used at a higher resolution. This is especially useful for e-commerce sites or applications where users are uploading their images.  The upscale feature uses Generative AI to take a pixelated image and create a higher-resolution image. The final image will not be perfect, but it looks more professional. See the upscale demo on imgix.

PDF Preview Images

There is also a PDF page to image option in imgix. The API enables the generation of a page-specific image preview from the PDF, which can serve as both a thumbnail and a full-size preview. When we built AHIP.org, they had a resources section for their members containing quite a few PDFs. To help with clarity and findability, we used imgix to show previews of the PDF documents to non-members. This feature allows AHIP to upload resource PDFs without having to also upload any thumbnail images. 

Face Detection

Another nice feature is a face detection parameter that you can pass to the API. This allows you to upload a photo and no matter the cropping or size it will keep the face as the focal point of the image. We used this feature on NEA for their team member page. It's great for user profile images that are used in different contexts throughout the site. 

Video Streaming

Videos have become a key design element on websites. However, determining which service to use for embedding those videos is an ongoing topic of discussion. Video platforms enable you to integrate the video onto the page, yet they introduce scripts that may impede page loading speed. Imgix offers a video embed service that allows content managers to keep all the images and videos in one place. The videos are automatically encoded to Adaptive Bitrate Streaming to get the best compression and video quality. So, videos load fast and look great on mobile and desktop. 

Performance 

A lot of CMSs have image transformations built in. An image transformation encompasses everything for that image including responsive sizes, cropping, resizing, and face detection from the original. This is great for small sets of images, but transformations quickly get out of hand the more images there are on a site. For example, the homepage of the National Park Foundation has a minimum of 96 image transformations. 

Processing all of those image transformations uses a lot of server resources. Imgix saves the images and delivers them through their CDN. The imgix image CDN has an average of 0.15 milliseconds return on requests which enables images to load as quickly as possible. The CDN also caches the images on CDN edge nodes making them immediately available for future requests. 

Flexibility

Imgix is flexible enough to work with almost any site structure; including WordPress, Craft CMS, Shopify, React, Ruby on Rails, Python, and more (see the full list). So, whether a site is a WordPress site or a Rails application, imgix fits right into the ecosystem. And, even better: you don’t have to rebuild your web app or website to gain the benefits of image performance, which can save you a lot of time and money.

Setting up imgix on an existing website is easy. Imgix can connect to existing asset storage sources like AWS, Azure, or a web folder on the same domain. Once the image source is set up, a developer can start passing parameters to the API. 

Cost

Imgix is free for 1,000 images which makes it easy to integrate and grow with your site. Pricing goes to $750/yr for 5,000 images and $3,000/yr for 25,000 images. In their pricing structure, “images” are categorized as origin images, so the count only includes original images and not transformed ones. So, you could have hundreds of images and thousands of image transformations all being delivered through a CDN for free.

Conclusion

Ensuring fast site speed isn't just important. It is vital. It's the cornerstone of a successful online presence, directly influencing search engine rankings, user satisfaction, and ultimately, your return on investment. Properly sized and optimized images are key to ensuring your site loads quickly and displays correctly for users across various devices.

We have found that imgix enables our team to efficiently create projects with diverse image options, saving managers and developers valuable time. Our clients benefit from reduced server space and an increased site speed. Imgix’s API is comprehensive, so you can use one tool for all features and options around site images — from cropping and resizing to face detection and automated color palettes, to video and beyond. Having used imgix for the past five years to support the wide-ranging needs of our clients, we feel confident recommending it and using it again and again. 

Users expect a website to load fast, and imgix is a reliable way to make sure that happens. 

When onboarding a new partner to redesign your website, take over maintenance, or rescue a project going sideways, you'll need to carefully transition access to a variety of critical systems and tools. And if you're navigating a contentious relationship or onboarding into a new organization without documentation, you might not know where to start.

Does that sound scary? It doesn't have to be. 

Here's a comprehensive checklist to ensure that you retain full control of your website and avoid any potential hiccups during a transition.

1. Codebase access. Ensure you have ownership or administrative access to the existing codebase or code repository. Popular platforms like Bitbucket and GitHub are often used for this purpose.
2. Content Management System access. Ensure you have the highest level of access (super admin) for your Content Management System (CMS). 
3. Hosting information and access. Gather all hosting information and ensure you have access to the account that owns the workspace. This is crucial to prevent unauthorized updates or changes to your site. For hosted platforms, you’ll need Owner access, not just Administrator access. 
4. Additional services information and access. This might include your domain registrar (e.g., GoDaddy), DNS settings, email services, your content delivery network (CDN), if applicable. This could also include any third-party services that are integrated with your website. Common examples might include: Algolia, Hubspot, Stripe, etc. 
5. Analytics and Data. Make sure you have access to all analytics tools used to monitor your website traffic and user behavior. This might include both old Google Universal Analytics data and current GA4 data, Google Tag Manager, or any other analytics services used on your website (e.g., Mixpanel, Hotjar, Adobe Analytics, etc.). 
6. Backups. Secure a full backup of your site, including the file system. Plugins like UpdraftPlus for WordPress can be very helpful for this process. Also, ensure you have backups of shared files, such as those in Google Drive, Box, or Dropbox.
7. Design Assets. Retain copies of raw design assets (e.g., Figma files). We always transfer ownership of Figma files to our client teams to ensure they have the ability to extend the design system in the future.
8. Licenses. Make sure you own any required licenses, such as font/photo licenses, CMS licenses, API keys, or premium plugins. We insist that our client teams purchase any required licenses/subscriptions using their corporate information so we’re never blocking access to those critical resources.

Transitioning website partners can be a smooth process with foresight and preparation. While ideally there would never be gaps in access to these critical resources and services, by following this checklist, you can ensure that you’re not missing anything when offboarding old partners or getting your bearings with a new team or organization. 

Do you need help figuring out how this checklist might apply to your situation? Be in touch, and we’d be happy to discuss your current status and suggest next steps for your website transition. 

When starting a new project, decision makers are faced with the dilemma of choosing a content management system (CMS). Sometimes, it’s not that simple and they must choose whether to go with a traditional CMS or a headless CMS. Both offer unique benefits and cater to different needs, making it crucial to understand when each makes sense for your project. Let’s take a look at some considerations that can help you make the right decision.

What is a Traditional CMS?

Traditional CMS’s – like Craft CMS, WordPress, and Drupal – offer a pre-packaged solution for content creation, management, and delivery. They include powerful interfaces with content editing capabilities and templating out of the box, enabling you to create sites with ease. A traditional CMS can be monolithic because the back-end and front-end are tightly coupled. Using a traditional CMS typically means you are using all of the tools included to achieve your goal.

What is a Headless CMS?

A Headless CMS is like a Traditional CMS in that it includes content creation and management tools. But it differs in the fact that the back-end content management system is decoupled from the front-end (presentation layer), allowing developers to use any technology stack they prefer for building the front-end of the site. The back-end acts as an API with its only purpose being to serve content from the database. There are CMS options like Contentful, Payload, and Strapi that are built to be headless. Popular traditional CMS’s like Craft CMS and WordPress also offer headless variants.

The Restaurant Analogy

Let’s simplify things a bit more and look at the decision using an analogy; a restaurant.

Traditional Restaurant (Traditional CMS)

Imagine a restaurant where the kitchen and dining room are connected. The chefs cook the food, and the waitstaff serve it directly to the customers in the same building. This setup means that everything is closely integrated, and the kitchen (back-end) is tightly coupled to the dining experience (front-end). Picture a scenario where the restaurant decides to change from table service to buffet style. The food now needs to be prepared in advance and delivered to the front of house in a different way, potentially even requiring new equipment. The restaurant needs to be reconfigured to not only accommodate the buffet but also to interface with the kitchen differently. Because the restaurant and kitchen are coupled, both sides would require work in order to accommodate a shift in strategy. 

Ghost Kitchen (Headless CMS)

Now, think of a ghost (or cloud) kitchen where food is prepared centrally but can be delivered to various locations or dining experiences. The kitchen (back-end) focuses solely on cooking (content creation and management) and doesn't worry about where the food is served. Instead, the meals (content) can be delivered to different endpoints like food trucks, home deliveries, or partner restaurants (or in our case websites, mobile apps, etc.). This separation allows more flexibility in how and where the content is delivered without changing the core cooking process. If a new experience requires new equipment or processes, the kitchen can be expanded without affecting the front-end experience.

When to Use a Headless CMS

Omni-Channel Content Delivery 

If you consistently need to deliver content across multiple platforms (websites, mobile apps, IoT devices), a headless CMS is ideal because it can serve the same content through APIs to any front-end. The front-end can be swapped out without any need for development to the back-end.

Scalability and Flexibility

If you want the ability to keep your content management system up-to-date independently of the presentation layer, a headless CMS can allow for more agile and scalable development. This could be especially useful if you anticipate needing to redesign or update parts of the front-end frequently without affecting the back-end content.

Front-end Framework Preferences

Maybe your team has developers who are very proficient in a particular JavaScript framework, like Next.js, SvelteKit, or Astro. The time needed to learn a new templating language could push you past your deadline. Maybe you have some cool interactive interface in mind? A headless CMS can provide the raw content for your developers to build highly custom, tailor-made front-ends in whatever language or framework they please.

Security

Going headless can offer security advantages due to its decoupled nature. By communicating via API to the front-end, data access can be controlled more granularly. Because the back-end is only responsible for content management and delivery, fewer plugins are typically used which means a smaller chance of vulnerabilities due to third-party software.

Hosting & Infrastructure

A cloud-based headless CMS offers additional advantages over a self-hosted headless CMS. It can simplify maintenance and operating costs since the cloud provider is responsible for updates and security of the platform. Cloud-based solutions like Strapi Cloud often come with integrated security features, automatic backups, and disaster recovery options.

Which will you choose?

While the flexibility and security a headless CMS offers may be great benefits, it may not be necessary for every project and could even introduce complexity. It’s important to consider the long-term purpose of the project and who will be responsible for maintaining it as well as authoring content. If your primary focus is on managing and delivering content in a structured manner with rapid development, a traditional CMS can be an excellent choice. But if you feel any of the examples I’ve laid out above align with your project’s requirements then a headless CMS may be right for you! 

Whatever route you take, remember that both Craft CMS and WordPress can be used in traditional or headless applications and are a fine choice either way! Now you know the differences between a traditional and headless CMS, and an informed decision can be made. If you have more questions or a project you think could benefit from a traditional or headless CMS, we’d love to help!

Five years ago, without consciously trying, I would have noticed if a coworker was taking a break, feeling extra chatty, or looking hyper-focused. I got to choose whether to respond and how I might build rapport by responding (I’m sure I didn’t always get it right). Now that more of the Viget team works from home than in an office, I feel a loss. I have less awareness of other people's states of mind and fewer chances to demonstrate my interest. I need to learn new ways of connecting. 

I took notice when Adam Grant recently posted about pebbling: 

Sending memes, links, and videos to others isn't trivial. It signals that you're thinking of them and want them to share your joy. It's known as pebbling, based on penguins gifting pebbles to potential partners. Pebbling is an act of care. Every pebble is a bid for connection.” 

Grant acknowledges that the term "pebbling" comes from penguins, but he also uses the phrase “bid for connection,” which I associate with John Gottman. Gottman is a well-known psychologist who has researched marital stability and relationships. His work provides insights into how small interactions, or "bids," play a crucial role in building strong relationships. 

Gottman defines a "bid" as any attempt from one person to another for attention, affirmation, affection, or any positive connection. A bid can be as explicit as saying, “I had such a hard day,” or as random as saying, “Did you see the size of that red bird?” The impact of responding with interest (turning toward) or ignoring or dismissing (turning away from) significantly influences the quality of the relationship. A simple, “Tell me what happened,” or “What? No, I missed it!” can foster closeness and trust. Silence or something like, “Here we go again,” will spark feelings of neglect and distance.

Gottman's research is widely cited and has impacted my understanding of relationships.  I'm interested in bids for connection at work, particularly as our work environment has changed dramatically in recent years.

Connections at Work

Finding the right balance of work and non-work is a central challenge for most of us as we navigate demands on our time and energy. I generally hope work is a small enough part of a person’s life that they have time for many other things, but also that their work environment is engaging and meaningful enough that they enjoy it. I hope friendships emerge at work, mostly through collaboration or out of the gaps between responsibilities. 

As remote work has become commonplace, I find it’s harder to foster connections than it was before. The lack of proximity, and therefore organic social interactions, makes it harder for me to know my coworkers and be known by them. I’m not advocating for returning to offices. I’m noticing that after working with people for years in an office, I knew them better – their nerves before a presentation, their ability to set new people at ease, their grandma’s soup recipe, their knack for deadpan humor – and that made my life better. While many of my coworkers collaborate with each other daily through pair programming, design critiques, or iteration planning meetings, my work on a small People Team has always been less collaborative. For me, fewer organic in-person interactions means fewer interactions of any kind at work. 

The decline in ad-hoc opportunities for connecting impacts us all differently, but I am particularly interested because an aspect of my role at Viget is to nurture a strong company culture. For us that means a culture where we do excellent work, learn a lot, support each other, and – yes – make some friends. I’m looking for ways we can adapt our employee engagement efforts to the new work environment and evolve how we cultivate alignment.

The concept of "bids for connection" seems useful for understanding the building blocks of connection and, over time, friendships. As a mostly remote company, I want to be sure we’re asking: How do people make bids? How do others respond to them? What parts of the work environment encourage us to turn towards a bid? 

Bids While Distributed

There needs to be “space” for these interactions to happen across a distributed company, and we need to notice what is working and why. One opportunity for bids to play out is in recurring meetings. At Viget, we try to be efficient with our time, but we also build in time for informal interactions.  

Daily Stand-up Meetings

The discipline and project teams that do daily stand-ups are careful to keep them brief. These meetings need to be reliably quick-paced in order to fulfill their purpose. Still, without sacrificing efficiency, these meetings can spark strong bids for connection. Sharing work updates in small, daily increments encourages people to open up about specific elements of their progress. The specificity allows for connection in ways that broad strokes do not. Hearing someone say, “Progress was slow, but I’m finally done with the feature,” I might respond, “Oh, good.” But hearing someone say, “If I don’t figure out how to debug this API integration by noon, we need to update the launch timeline," gives me a chance to be curious, helpful, and invested in something very specific. 

Weekly All-Hands Meeting

Every Friday, our whole company meets for about an hour. The first 15 minutes are deliberately set aside for informal conversations and sharing, which mostly happens over Slack. We often play music or show a live stream of something noteworthy, like an eagle’s nest, to which we can react. Someone might share where they were when they first heard this song. Someone else might reveal they are an experienced falconer. The whole company gets a chance to see or hear these things, and while only a handful may react, we are all building shared awareness and memories.

Monthly Team Meeting

During a team meeting, a small group of same-discipline-peers comes together to talk shop, share lessons learned, or bond. These meetings allow for exercises that don’t scale to a whole company – like getting feedback or planning progress – and over time, certain activities can become team favorites. A monthly “rose, bud, thorn” or an annual “sharing circle” ritual prompts people to share in ways that otherwise might feel too awkward or vulnerable.

Another way to make and respond to bids for connection across locations is on Slack. Different kinds of Slack channels offer different kinds of opportunities.

Interest-based Slack Channels

At Viget we have channels like #woodworking, #sewing, #starwars, #hot-sauce, #gardening, #home-improvement, and many, many more. These types of channels allow people to go deeper than they might in more general channels. You know you’re talking to like-minded people, so why not dive fully into your opinion on robot vacuum cleaners?

"Random" Slack Channel

In our #random channel, I’ve seen everything from a heads up on free Firehouse subs to a recommendation for an estate planning system. The responses vary, too – sometimes they spark day-long conversations. At a minimum, posts will get a smattering of emoji responses and the impact can be significant. For example, a post might get a sympathetic :heart: but then a couple :same: or :it-me: come in and before you know it, there’s a subset of coworkers who realize they share the same rare phobia. I also think a share in #random can signal, “I’m between tasks. I’m open to distractions right now,” and folks can follow up with a DM.

Project-Specific Slack Channel

In channels where everyone is working on the same project with shared goals, stresses, and deadlines, we might see bids that build momentum. A PM might post something in the morning to encourage the team to rally behind a tough deadline. A designer might post mid-week, acknowledging the drudgery of certain tasks, implicitly giving everyone else permission to do the same. A developer might be slowly building a little arsenal of inside jokes and call-backs over weeks, dropping a note at just the right time to get others laughing. Someone might turn one of those jokes into a custom emoji that lives well beyond the project timeline and every time that inside-joke-emoji gets used, it's a bid for folks who worked on that team to recognize each other and reconnect. 

Recognizing Bids

We all grew up learning in-person social norms and have a mostly shared understanding of what’s considered warm, polite, stand-off-ish, or rude in the workplace. Now that we’re distributed, we may need to learn to recognize new signals and define new norms. 

A bid is an action that invites connection, but sometimes the action is so small, we might not notice it or realize it has potential value. Understanding the concept of bids can help us notice them and respond with more awareness. 

If we train ourselves to see bids for what they are and respond accordingly, we may get more mileage out of the limited impromptu interactions we have as remote coworkers. Actions like responding to an open-ended question in a Slack channel or acknowledging someone’s request for help during a meeting go a long way. Each response builds trust and camaraderie, even if in tiny doses. When a comment or question is ignored or dismissed, the negative effect is compounding; that person is less likely to reach out again.

Adam Grant said sharing memes and links are a way to invite someone to share in your joy.  At a distributed company, “bids” take a lot of different shapes, but they all communicate things like, “I am here,” and “let’s work together,” and “you can trust me.”

I’m encouraged to think we already have some infrastructure in place at Viget to support remote bids for connection. I’m excited to work with Aubrey Lear and others to find ways to evolve that infrastructure. We’ll continue to hire people who want to develop friendships with coworkers and who are willing to take personal responsibility for making and turning towards bids. Together, we can make sure Viget remains a great place to work as the workplace continues to evolve.

This summer, I was the Application Developer Intern at Viget. This being my first internship, I was pleasantly surprised by how much I learned. Rather than being tasked with fetching coffee or doing busy work, the internship focused primarily on our growth and development as interns. As my time at Viget comes to a close, I wanted to reflect on ten key things I learned during my experience here.

Following the real-world development cycle

Going into this internship, my development process involved me sitting down and coding until the feature was completed, and that's it. During this internship, I learned and practiced the development cycle used at Viget. For each feature, I created a Branch. Then, I submitted a Pull Request once it was completed. After that, my advisor reviewed my code and gave feedback. Once I had completed the requested changes (if any), I would rebase and merge into the main branch. This cycle made the code cleaner, and the feedback on my code always ensured I was going in the right direction.

Maintaining a clean git history

During my development process at Viget, my advisor ensured I took the necessary steps to maintain a clean git history in my projects. I put the corresponding issue number next to each git commit and pull request. This made it much easier to see which commits belonged to which feature when reviewing git history. I also learned to always use “rebase and merge” rather than “create a merge commit” when merging a pull request. This helped when reviewing git history as merge commits make it much more difficult to understand what’s going on, and rebase and merge provided a clean git history.

Getting introduced to DevOps

Nevin Morgan hosted a MicroClass where he went over the basics of DevOps. Going in, I didn’t know much about DevOps, but the class gave me a solid understanding of the basics. DevOps is a combination of philosophies, practices, and tools designed to improve the speed of development. Their responsibilities include:

• Keeping Communication clear for development teams
• Making sure teams continue collaborating
• Ensuring deployments are quick and reliable

I also got the chance to pair with Nevin when he set up AWS deployment for one of my projects, and when he was setting up Grafana for Viget. Getting to see DevOps in action gave me a good idea of what goes into being part of the DevOps team.

Learning to work with clients

At the start of our intern group project, Nathan Long gave us a presentation on what it's like to work with clients. He covered the typical client project cycle, client presentations, and how to handle client feedback. For our project, we simulated a client relationship with Viget as our client. They provided us with their requirements, and me and the other interns planned out the details of what we would deliver. Throughout the process, we gave several client presentations, received valuable feedback, and iterated on our product. Two weeks later, we had a finished product, which we presented to the client in a live demo. This whole process was designed to mimic what Viget goes through with real clients, and seeing the different perspective required when working with clients was really eye-opening for me.

Exploring digital accessibility

Nathan Schmidt hosted a MicroClass for the interns on Accessibility. He gave us an overview of what digital accessibility is and who it impacts. I learned that digital accessibility is the lens through which we ensure that people of all abilities, and particularly those with disabilities, are able to engage with the digital world. Every website is graded to a level set from the Web Content Accessibility Guidelines (WCAG). These guidelines include video captions, text size, color contrast, and many more requirements. It is the industry standard to follow these WCAG guidelines so that your website can be accessible to a broad range of consumers.

Building confidence in public speaking

When the summer began and I learned that I would need to present to the entire company, I felt intimidated. Public speaking has always been a source of anxiety for me, but I had numerous opportunities to work on this skill. Throughout the summer, I became increasingly confident. First, my fellow interns and I presented our group project to everyone at Viget at the company-wide all hands meeting known as TTT. I presented my personal project to the Dev team, discussing the libraries I used and walking through my code. The most significant presentation I delivered was my final one, where I spoke to everyone at Viget about my Gap Year through a Viget Tradition known as LabShares. Public speaking is a skill that improves with practice, and the various opportunities I had greatly boosted my confidence in this area.

Diving into Vanilla JavaScript

Going into this summer, I had never written a line of JavaScript in my life. I quickly learned that JavaScript is essential if you’re going to work in web development. On my personal project, which was an audio sharing social media app, I had a for you page, and I wanted to make the page update as soon as the user went to the next sound. This would require me to write JavaScript. I went through and wrote Vanilla JavaScript to update all the necessary information from the server's response. Although it was a challenging and tedious process, it significantly enhanced my understanding of how websites work and the role of JavaScript in web development.

Getting my feet wet with Rails

For the first half of the internship, I got my foothold in Ruby on Rails. This was my first time writing in Ruby, so there was a bit of a learning curve. I started with the Rails tutorial and then made a Hacker News clone. This exposed me to a broad range of the application stack and got me prepared for the Intern project, where I also used Rails. I found Rails’ Model, View, Controller setup to be very intuitive, so the learning process was relatively painless.

Discovering the benefits of Tailwind

Being the only Application Developer Intern, my focus throughout the internship was primarily on the back-end. However, I did have the chance to use Tailwind for the first time during my personal project. The biggest thing that stuck out to me was how it was convenient to not have to go through and change the stylesheets myself. With Tailwind's utility-first approach, you can quickly apply predefined classes for spacing, colors, typography, and more, without having to write custom CSS. This makes it much faster to prototype and iterate on designs, as you can see changes immediately by simply adjusting the class names in your HTML.

Exploring the Basics of React

Chris Manning hosted a MicroClass on React. I had never actually used React, but he made the class very beginner friendly. React is a JavaScript library, whose main strength is how dynamically it responds to user input and cascades UI changes. Chris went over JSX and React components, props, children, and state memory. I didn’t have time to actually write any React this summer, but I appreciate that Chris hosted this class after I said React was something I was interested in!

Reflecting on what I’ve learned here at Viget, I realize how invaluable this experience has been for both my personal and professional growth. From learning Rails and JavaScript, to understanding the intricacies of client relationships, I've gained a wealth of knowledge that extends far beyond technical skills. The opportunity to work alongside experienced professionals and receive constructive feedback has been a huge source of development for me. As I move forward, I am excited to apply these lessons and continue exploring the world of Software Development, confident in the foundation this internship has provided.

If you’re like us, you’ve likely built ‘page builder’ fields in Craft CMS using Matrix. But sometimes you need more than a block. We use Super Table to create ‘page sections’ that include some extra settings (like background color, controls for width, etc.). We can then nest a Matrix field to control page blocks within the Page Section (Super Table). This has worked well for us in the past but there's a new, simpler way to achieve this starting in Craft 5.

Upgrading a site from Craft 4 to Craft 5 can seem intimidating. Even more so when your site relies on complex content models like the one I described above. You might think, okay I'll upgrade to Craft 5 and then look into migrating to the newer method in the future. Well, now is the time. Verbb has announced that Super Table has reached end-of-life.  While there is a Craft 5 compatible version available, it won't receive updates. That means now is the perfect time to migrate your Super Table fields to native Matrix fields.

Craft 5 makes the process easy by converting Matrix blocks to entry types automatically during the upgrade. This guide will walk you through the process. We'll cover preparation, the upgrades themselves, and steps to clean up afterward. As you’ll see below, the process is actually quite simple and nothing to stress over!

Preparing for the Upgrade

The first step in any upgrade is preparation. Start by backing up your site’s database. This ensures that you can restore your site to its previous state if anything goes wrong during the upgrade process. We use (and love) DDEV here at Viget, so this guide will be leveraging it. But you can easily adapt the commands if you are not. To create a database backup, run:

It's also essential to familiarize yourself with the Craft 5 Upgrade Guide. This guide provides detailed information on the changes, new features, and potential breaking changes in Craft 5, helping you understand what to expect. It serves as a fantastic set of instructions to get your site upgraded.

The Upgrade Process

Once you're prepared, you can begin the upgrade process. Per the Craft Upgrade Guide, we will update Craft and plugins at the same time. Open your editor and modify your composer.json with the new versions of your plugins. The two for sure we will need to modify are:

Updating Super Table Fields and Templates

With the Matrix blocks converted to entry types, you need to reconfigure any Super Table fields to be Matrix fields.

Update Super Table Fields:

• Browse to Settings > Fields and edit any Super Table fields
• Change the field type from Super Table to Matrix (there will be no content loss when switching from Super Table to Matrix)
• Select the entry type to use (Craft has already created one for you)
• Save the field
• That's it!

At this point, you have removed your dependency on Super Table and have a page builder entirely built with Matrix fields. What were previously Super Table blocks are now a custom Entry Type and what were Matrix blocks are now also Entry Types. This allows you to have nested Matrix within Matrix thanks to Craft’s Entrification plan.

Cleaning Up After the Upgrade

After updating your fields and templates, it's time to clean up. First, uninstall the Super Table plugin. Navigate to Settings > Plugins in the Control Panel to uninstall the plugin. Then remove it from your project by running:

Thoroughly test your site to ensure everything is functioning correctly. Pay close attention to the entry types where you used Super Table fields, confirming that authoring and your front-end work as expected.

Additionally, you can also take this opportunity to clean up your fields and entry types. Craft 5’s reusable fields and entry types give you ample opportunity to consolidate and Craft 5 provides new utilities to make this process as simple as possible.

• fields/auto-merge — Automatically discovers functionally identical fields and merges their uses together.
• fields/merge — Manually merge one field into another of the same type and update uses of the merged field.
• entry-types/merge — Merge one entry type into another and update uses of the merged entry type.

That’s it!

Upgrading from Craft 4 to Craft 5 and transitioning from Super Table is incredibly simple, thanks to Craft 5’s automatic conversion of Matrix blocks to entry types. Super Table will no longer be maintained moving forward, and it's better to switch to the native Craft solution for better long-term support. By following these steps, you can quickly tackle the change and take advantage of the new features and improvements in Craft 5. With careful planning, thorough testing, and a few commands, you’ll have your page builder working again in Craft 5 in no time. Happy upgrading!

When Viget was founded in 1999, Andy and I used the title “Founding Partner.” We were founders of the business and also committed business partners. Within a couple of years, we switched to more specific titles: Co-Founder and President (Andy) and Co-Founder and CEO (me), but “business partners” was always the key structure.

We divided responsibilities of leadership, delivery, and operations in ways that optimized our different strengths and weaknesses. Key decision making has always been a collaborative process, with healthy debate between the two of us. I know some incredible solo entrepreneurs, but for us, having a partner to lean on, leverage, and grow with has been not only rewarding, it’s been essential to Viget’s longevity and success.

Also key to our success has been a founding principle of hiring incredible people who share our values and vision, value longevity and lasting relationships, and take pride in their work and careers. As they’ve joined, we’ve shared the opportunities and responsibilities that come with running a healthy business. Empowering others to lead key parts of Viget has taken us further than we’d ever gone otherwise.

Being owners and partners in the business has always been a privilege, an honor, and, at times, a stressful burden. When things go well – clients are happy, the team is gelling, the finances are solid – I’m filled with pride, satisfaction, and calm. When things aren’t going well – projects are sideways, turnover seems contagious, and the metrics point in the wrong direction – I’m filled with anxiety, frustration, and self-doubt. In either scenario, having a partner to navigate the waters with has been vital.

In recent years, three key areas of our business have matured thanks to the overall strength of our team and especially strong leadership. Our sales and marketing systems, tools, and strategies have fed a much more predictable revenue engine with great clients. Our client delivery processes and best practices have helped us consistently deliver value for our clients with more clarity, less risk, and better results. Finally, through some very challenging years in our industry, our culture has grown stronger and more adaptable, still centered on meaningful human connections at the core.

These three business areas have been led by Zach Robbins (sales and marketing), Kelly Kenny (delivery), and Emily Bloom (culture). They are the pillars upon which all other aspects of the business are built. These leaders have truly grown up with the business, having joined more than 13, 14, and 17 years ago, respectively. Their impact first as individual contributors, then managers, and eventually strategic leaders has been immeasurable.

Viget is coming up on a major milestone: we’ll soon eclipse 25 years since our founding on December 27, 1999. As Andy and I looked out at the next decade and beyond of our business, expanding our partnership became a clear goal. Embracing additional partners to not just lead their area of the business but to weigh in on all major decisions would help Viget continue to mature into the business we believe it can be. We saw an opportunity to invite others into the deep water of business partnership – the good, bad, and ugly – so that our shared decision making can be sharper, more insightful, and more strategic in the years to come.

At our fall retreat last week, we announced that we're welcoming Emily, Zach, and Kelly as partners at Viget. They’ve each been here for more than half of Viget’s history, each shaping Viget into what it is today. As partners, they’ll have even more influence as we take Viget into our second quarter century and beyond.

In recent years, as distributed work has become the norm, all-hands trips have become more commonplace. Even companies that have always done them now see their importance in a new light. They are expensive and demanding for everyone involved, but when they’re done well they can be incredibly impactful. Are you bringing your team together and feeling the stress of getting it right? Designing the time together takes strategic thinking, logistics planning, and the confidence to ask everyone to contribute to the event’s success.

Last week, we came together to connect, celebrate each other, and look forward to a bright future in our quarterly all-hands event we call Third Third Thursday or TTT. It was our first in-person all-hands event since May 2023. At Viget, we actively build our culture together. The responsibility doesn’t fall on just a few individuals' shoulders. Our events are successful because individuals show up, speak up, listen, and honor the limited time we have together in-person. This is evident in the chats over breakfast pastries, the all-in approach to competitions breakout sessions, and the peer talks and discussions throughout our events. This connection and camaraderie doesn’t just happen, we work hard to make it happen. 

Reflecting on last week’s event (and 7 years of other events), I want to share these five key planning tips to help you craft a successful event. 

Leverage your physical space to help achieve your event goals. This fall we had a smaller number of attendees and we wanted to encourage discussion throughout the event so we set up the room in large U shape to foster conversation. We also made the most of our exterior space, which featured a fire escape staircase, by hosting an egg drop competition. 

Over communicate, especially around when team members can expect breaks and when they can expect to be fed. As the event lead, I share my phone number multiple times ahead of and throughout the event. We also make sure to communicate in dedicated channels, including an event Slack channel for all attendees, a behind-the-scenes Slack channel for presenters only, and an event website. We share important key information like bus schedules and flight confirmations via email. In advance of the big day, we shared this slide with our team to both inform and inspire. 

Leave room for unstructured time and connection. Over the years we learned that some of the best discussions and a-ha moments come from chats over a meal or a snack during the “unplanned” parts of the event. Now we plan ahead for these, leaving ample time for unplanned, impromptu a-has. We think about airport Uber rides, charter bus rides, morning runs, evening board games, or late-night drinks and look for ways to grease the wheels of serendipity. This was especially important for us this fall since it had been so long since the last time we all gathered together. 

Look for ways to celebrate what is unique to your company. One pretty fantastic thing that comes with a quarter century in business is the community we’ve built along the way. We make a point to keep up with previous Viget employees who we proudly call our alumni. We love our alumni and enjoy recognizing their contributions to Viget. One way we do so is with annual picnics, which we host when the most current Viget employees are in town for an event. These picnics are often a great mix of reconnections and networking.

Find ways to surprise and delight. Think big and small. For example, this fall we put colored pencils and butcher block paper out during our meeting time. Our autumnal decor included blue(ish) and orange pumpkins (Viget colors!). We made a subtle callout to an internal project by serving french fries as our afternoon snack. And we surprised our team with Unreal treats for their bus rides home. The treats served as dessert and a means for us to introduce our next in-person event, our spring TTT, aka Viget25. 

Some companies advocate for all-hand retreats to be social and relaxing, but not “productive.” They tout a meeting-free event. At Viget, we see the meeting time as crucial because that is when peers share knowledge, reflect on their recent work, showcase client impact, and highlight new ideas and personal growth. Similarly, our co-founders reflect on Viget’s performance and share thoughts on the upcoming business direction. The meeting sparks genuine inspiration and creates a time for us to remember what brought us to Viget in the first place – to build world class tech in support of our clients. 

On the heels of a successful gathering, it’s time to start planning the next one. For our next event we’ll head to the Allegheny Mountains where we’ll leverage a unique and memorable venue, offer plenty of unstructured time for connection (with each other and nature), loop in alumni where appropriate, plan inspiring meeting content, enjoy many meals and treats together, and of course find ways to surprise and delight. 

Work-related travel isn't for everyone, but if you know someone who appreciates the idea of dedicated time to connect with and celebrate their peers, we’re hiring. And to all the culture champions and event planners out there, good luck with your next all-hands! 

When choosing an outsourcing partner for design and development, many decision-makers naturally start by comparing hourly rates. At first glance, it seems logical: a lower hourly rate means lower project costs, right?

The truth is, hourly rates can be a misleading metric. The actual cost of outsourcing is much more complex than the dollar amount tied to hourly rates. In this article, we’ll explore why focusing on hourly rates can obscure the true cost of a project and why it’s crucial to dig deeper when evaluating potential partners. I’ll end by suggesting a few things to focus on instead of or in addition to the hourly rate.

Efficiency vs. Hourly Rates

Imagine you have two outsourcing options for a specific task:

• Pat: A developer who charges $100/hour and takes 3 hours to complete the task. 
• Terry: A developer who charges $200/hour but only takes 2 hours to complete the same task.

Pat’s hourly rate is lower and Pat’s total cost looks cheaper. The total cost for Pat is $300, while for Terry, it's $400. But there's more at play than the hourly breakdown.

Terry may be faster because they are more skilled, experienced, or familiar with the problem. They produce a higher-quality output that might need little to no revision, while Pat may deliver work requiring additional oversight, rework, or fine-tuning.

This brings us to a crucial point: efficiency and expertise often outweigh raw hourly cost.

Hidden Costs of Oversight and Management

The cost of managing lower-cost teams can quickly add up. Inexperienced or less skilled developers often require more:

• Guidance and supervision: You or your in-house team may have to spend significant time managing or directing work, which adds hidden costs to the project.
• Rework and revisions: Less-experienced teams may not get it right the first time, and even small mistakes can snowball into major issues that need to be fixed later on.
• Communication barriers: Some outsourcing teams might not be as effective in communicating progress or roadblocks, which can slow down the entire project and lead to missed deadlines.

Each of these factors chips away at the apparent "savings" from choosing a lower hourly rate.

Quality: The Long-Term Investment

Design and development work (insourced or outsourced) is an investment, not just a cost. High-quality work may come with a higher hourly rate, but the long-term savings are substantial:

• Fewer bugs and technical debt: A more experienced development team will likely deliver better code, resulting in fewer bugs and long-term maintenance issues. A more experienced designer is more likely to think through and design for all edge cases, filling in all the gaps.
• Faster delivery: A skilled team is often more familiar with best practices, frameworks, and tools that allow them to complete tasks efficiently.
• Scalability: High-quality designers and developers think ahead and design systems that can scale with your needs, preventing costly future refactoring.

The Cost of "Cheap" Work

Sometimes, "cheap" work ends up being the most expensive in the long run. Lower-quality outsourcing might require you to:

• Hire another team to fix or rebuild the work.
• Delay product launches due to unanticipated project overruns.
• Damage customer trust by releasing subpar products riddled with bugs or poor design.

In some cases, teams that seem "affordable" may not have the expertise to foresee potential pitfalls, which means costly issues arise later in the process.

Calculating the Total Cost of Ownership

To truly compare outsourcing options, decision-makers should consider the total cost of ownership (TCO), not just the hourly rate. TCO includes:

• Efficiency: How quickly and effectively can the team complete the work?
• Oversight: How much management and guidance will the team require?
• Quality: Will the output meet your expectations, or will it need significant revisions or rework?
• Maintenance: What will it cost to maintain or scale the system after the initial work is done?

A team with a higher hourly rate but lower total costs in these areas may be the more cost-effective choice in the long run. For a more complete example:

• Pat: Your $100/hr developer completes a task in 3 hours ($300), requires 1 hour of oversight from an in-house Senior Developer ($150), and eventually needs to be refactored or rebuilt entirely ($1,000).
• Terry: Your $200/hr developer completed a task in 2 hours ($400) based on a 10-minute overview from an in-house Senior Developer ($15), and makes an above-and-beyond measurable impact on page performance (priceless).

The best long-term investment becomes more clear when you consider all the variables. 

Conclusion: Think Beyond Hourly Rates

When investing in design or development, your goal should be to maximize ROI, not minimize hourly rates. When comparing outsourcing options, focus on the bigger picture—their efficiency, quality, and the hidden costs of oversight and management. Consider how your prospective partners measure up in terms of:

• Results: can they point to clear results of their work in which they played some critical role?
• References: would previous clients choose to hire them again (indicating they are worth their cost)?
• Communication: do they respond quickly and with clarity?
• Expertise: do they provide opinions and advice or are they simply order takers?
• Relevance: is their prior experience directly relevant to your needs? 
• If not, do they have a track record for navigating novelty well?

The right team might not always be the cheapest on paper, but they’ll deliver the greatest long-term value. Outsourcing isn’t about getting work done cheaply—it’s about getting it done right, and more often than not, the old mantra “you get what you pay for” holds.