Stanford Web Services Toolbox: Crafting Community Websites

Did you know Stanford Web Services (SWS) uses various products, programming languages, and services to design and build beautiful, performant websites? Their process focuses on delivering stunning and maintainable front-end solutions by prioritizing accessibility from the start, emphasizing sustainability through reusable components, and fostering close collaboration with clients, designers, and the Stanford Office of Digital Accessibility.

Thanks to an extensive list of tools, SWS can create an array of site types to meet the needs of the Stanford community through their website planning, design, development, and maintenance services. With their resources, SWS can:

• Maintain branding guidelines while enhancing visual appeal
• Ensure seamless usability by considering accessibility at every stage of a project
• Simplify development and reduce expense by reusing core components (building blocks for the websites) that have already been reviewed

Websites built with proper architecture not only elevate the user experience but are also cost-efficient to maintain over time.

SWS toolbox

In addition to dynamic programming languages, such as JavaScript, SWS has many tools to assist in crafting web pages across the university.

Some of these tools include:

• A variety of content management systems (CMS) (e.g., Storyblok, Drupal)
• UX and design products (e.g., Figma, Adobe Creative Cloud)
• Development environment resources (e.g., Gitpod)

Community websites

A diverse and flexible toolbox enables SWS to develop a robust selection of websites for the Stanford community.

Below are examples of SWS’s exemplary work in building sites to meet the needs of the community:

Momentum

In partnership with the Office of Development (OOD), our team initially collaborated with OOD writers, digital experts, and designers to build a campaign website. Over time, the site evolved into a platform for showcasing 'Stanford’s community of thinkers, makers, doers, and boundary pushers shaping our future.' Momentum uses Storyblok as its headless CMS and was built on the Next.js framework. Using Storyblok's real-time preview feature, site editors can instantly see their edits in action. Subtle animation effects were added using the (Framer) Motion library to breathe life into the content without sacrificing accessibility and performance. The efforts and dynamic components developed for Stanford Momentum earned a Webby nomination! 

Cast your vote for the Momentum website today.

Stanford Travel/Study

Stanford Travel/Study provides Stanford alums, friends, and family with exceptional educational travel journeys to more than 80 countries each year. Thanks to the ADAPT Project, the SWS team revamped the website with its own unique design elements. Like Momentum, Travel/Study uses Storyblok as its headless CMS. It was built on the Gatsby framework and optimized for performance. The latest iteration of the webpage highlights the Travel/Study program’s diverse lineup of educational adventures.

Stanford University Library

The Stanford University Library (SUL) website redesign was a pioneering project because it was the first decoupled Drupal site–instead of relying on Drupal for both frontend and backend website capabilities, SWS leveraged the Next.js framework tool for frontend development. This approach provided a tailored user experience and maintained the robust content management capabilities of Drupal; maintaining the content management capabilities ensures a seamless blend of performance, accessibility, and design customization. 

After the initial redesign by SWS, the talented SUL UX and design team has taken the lead in continuously improving the site design in close partnership with SWS developers and project managers. This ongoing effort ensures that the site remains a valuable resource for staff, faculty, and students.

School of Engineering Centennial

The School of Engineering Centennial website is a custom-built, static Next.js site designed to celebrate 100 years of innovation and impact. Developed with performance and flexibility in mind, the site showcases a rich collection of stories, historical insights, and multimedia elements. Built from the ground up, it seamlessly integrates with Cloudinary for media management and utilizes structured JSON data to power an interactive timeline. Soon, the site will launch with two feature stories and the previously mentioned timeline, bringing the history of the School of Engineering to life through dynamic storytelling and engaging visuals. 

Additional resources

• Questions? Submit a Help request to the SWS team.
• Visit the Stanford Web Services homepage to learn more about SWS and request a free consultation with the UX design team.