Spotify Booktracks Shines with Gold and Best in Show
At this year's One Club Awards in Denver, Spotify Booktracks achieved remarkable recognition, earning a gold medal and the prestigious Best in Show award.
Booktracks is an integrated campaign that captivates the Gen-Z audience with innovative new features designed to provide a more immersive and captivating experience for audiobook listeners.
At this year's One Club Awards in Denver, Spotify Booktracks achieved remarkable recognition, earning a gold medal and the prestigious Best in Show award.
Shot by @jasondewittphoto
Today, I am thrilled to announce that in collaboration with Ella Berglund, Brevitt Livingston, Daniel Girten, and Tanner Moore, and with the invaluable support of the University of Colorado, our integrated campaign, Spotify Booktracks, has achieved remarkable success at this year's One Club Awards in Denver. We are not only honored with the gold award but also humbled to have received the prestigious Best in Show Award for students. This achievement underscores the innovative and creative approach our team took in seamlessly blending literature and music to craft an immersive storytelling experience. Our commitment to pushing boundaries and crafting unique user experiences has been recognized and celebrated by our industry peers. We are incredibly proud of this accomplishment, and we extend our heartfelt gratitude to all who made it possible. This recognition only fuels our determination to keep pushing the limits of creative marketing and transforming the way audiences connect with brands.
This announcement solidifies Spotify Booktracks as a benchmark for undergraduate projects, as it proudly garners three prestigious student awards: the illustrious Gold, the coveted Best in Show, and the distinguished Merit Award at the Young Ones competition.
To bring Spotify Booktracks to life, I carefully crafted a module that seamlessly integrates with Spotify's existing design language. This new module revolutionizes the audiobook experience by adding a captivating cinematic touch. Located under the Audiobook player, users can now enjoy an enhanced immersion with the option to toggle specially curated music selected by the publisher or author to complement each chapter. This innovative feature turns every audiobook into a truly immersive and memorable event.
In addition to the UI, I also designed eye-catching billboards that showcase this unique design. These billboards capture the essence of the audiobook plus soundtracks feature, enticing passersby with mesmerizing visuals and captivating taglines. By strategically placing these billboards in high-traffic areas where users are already listening to Spotify while on their commute, we aim to generate curiosity and spark interest among potential listeners. The billboards also adhere to Spotify's design language, ensuring a cohesive and seamless connection between the digital and physical experience. Through this holistic design approach, we aspire to elevate the enjoyment of audiobook enthusiasts and music aficionados alike, while also enticing those who have yet to be captivated by the world of audiobooks.
This feature is not part of the official Spotify platform and was not developed in collaboration with Spotify. It was specifically crafted for the Young Ones One Show Awards organized by Spotify and The One Club for Creativity, as per a client brief.
THANKS FOR READING!
Media Contacts
Pham House Marketing Communications
marcom@phamhouse.com
Tim Pham, Founding Partner
tim@phamhouse.com
Introducing An All New Pham House
Pham House 2A is the first update to the Pham House platform since it launched in May 2023. This release provides an extensive website overhaul that introduces several new features and improvements. From a redesigned navigation bar, updated typefaces, and state-of-the-art code, 2A delivers a more user-friendly and elevated experience while providing performance enhancements and bug fixes for visitors to the website.
Pham House 2A is the first update to the Pham House platform since it launched in May 2023. This release provides an extensive website overhaul that introduces several new features and improvements. From a redesigned navigation bar, updated typefaces, and state-of-the-art code, 2A delivers a more user-friendly and elevated experience while providing performance enhancements and bug fixes for visitors to the website.
Just so you know, this is not a press release. So the language is ever so slightly spicier than you might be used to. This is the first post to feature a more hands-on writing style that conveys exactly what we’re trying to articulate but with less corporate jargon. This style will be used for some future posts like stories and project process pieces. But for you press release lovers, those will remain too. You can identify articles that have this type of writing style thanks to the new author profiles at the top of the article.
So why does this tiny little website update receive a whole newsroom article? Well for starters it’s not tiny — don’t you see the 2? We’re going from build 1 to 2. When we launched the first iteration of Pham House back in May, we set out to create a space that was built with portfolio pieces in mind. The site was crafted to be a home where those projects could live and be showcased easily. But it didn’t feel like Pham House. Now we’re getting a little meta. Pham House is supposed to be our home on the internet. A little corner where we can just exist and put everything we love about design onto a single platform. 2A is the solution to a little problem we had where the site just felt basic. YES, I UNDERSTAND that a portfolio is a place where people come to see your work and talent, but it should also be a place where people come to see your personality. After all, it has your name on it. 2A (2 being the second official release and A being the direction chosen) was a massive internal fight that is still being fought.
Do we go in a new direction where we load the platform with mementos of our personality and wild concepts we want to explore? Or stick with a minimal traditional portfolio that is focused on highlighting our best work?
Clearly, we opted for the former. 2A is essentially a brain dump and it gets wild. This gets a little confusing so stick with me and let me explain. The first major incentive for this update was fixing all the bugs that some users experienced on the inaugural release. We had a whole backlog of tickets of things that needed to be fixed. The second goal was the prettier one, new features. Every big number update needs something users have never seen before. The third goal was to congregate every Pham House brand and put them under one roof. Now that you know the background, let’s get into the good stuff.
The Keynote
Pham House 2A is a supplemental update that delivers on my goal to make my portfolio mine. There have literally been 0 projects uploaded to the site since we shipped the first release back in May — but this update provides the ability to create project pages in a whole new way. I like to think that my portfolio is its own portfolio piece, and to really cement this idea, look no further than the keynote.
If you know me, or glanced at the site, you could tell that I have a degree of admiration for Apple. Growing up, kids would binge video game walkthroughs or makeup videos, I was watching corporate presentations. That actually really helped me make good Google Slide presentations in class, but more importantly, left me always wanting to produce a keynote like Apple’s. Once they shifted to the pre-filmed format, it was like I discovered gold.
So, in extreme coordiation, while we were redesigning the platform, we were also writing and going over the logistics of what it would take to film a keynote. I really want this article to focus on the site changes but if you want to know about the process of making our own keynote, please shoot me a message. Let’s just say it was incredibly fun to plan and write, but we chose the hottest day of the year to film and our cameras didn’t like that all too much. If you haven’t seen it, please watch it here. It’ll save you a whole bunch of reading here.
So What’s New?
To make this post easier to read, I’ll start yapping less and begin to list off new features like it’s a Christmas list. Which is really hard for me to do cause I want to explain every thought process behind a feature, but I’ll behave. Also, WE CAN’T list every new feature because it would take too long, so these are the big ones.
The Header Navigation Bar: is brand new and completely redesigned for desktop and mobile devices. It adapts design cues from Apple’s visionOS and is the first time the mobile bar features a floating design. There’s a larger border-radius too for those of us who appreciate that lol. It now also incorporates the minimal house logo on both desktop and mobile. That house logo retains its position when the navigation menu is activated on mobile. The nicest quality of life improvement would probably be that on desktop, the bar now displays a small indicator under the current page you’re on if it’s located on the main navigation. Plus, another indicator also illuminates if you hover on other pages on the bar.
New Typefaces: are probably the first or second thing you notice when looking at 2A. You’re noticing it now huh? We replaced our old header font with a brand-new one. It’s actually not new at all, Pham House Display has been used on our other brand materials, most notably our business cards but we’re finally bringing it over to the website for a cohesive design language. It’s nice, right? This beautiful Sans Serif bespoke font commands emotional resonance and with little details in every letter, this bold font helps users see what’s important.
Since we were already changing out typefaces, we figured the body font needed work too. After looking at a few dozen sans-serif fonts, we were losing hope on a typeface that felt like us. But the answer was staring us in the face the whole time. Apple, led by one of my favorite designers of all time, Alan Dye, created a Helvetica replacement back in 2015. Now, it’s used on every Apple device and is literally perfect. I mean the circular elements like this i and this colon : are truly wonderful — I always hated the squares and rectangles in Helvetica. So me nerding out aside, we wrote code on the site so that Apple users would see SF Pro Display on any body type on the site. Pretty good, huh?
Introducing, THE Playground.
From the start, we’ve always reserved a place on the site for a digital sandbox where we could play around and tinker with code and new ideas. This was originally on the Gear page. The projects that came out of that were revolutionary for the site like the Dynamic Ambient Player and the Believe Sign Drawing. These innovations use cutting-edge code and frameworks. We saw how valuable it was to experiment with these ideas and wanted a place where we could develop and showcase groundbreaking concepts that could be applied to the rest of the site someday. So we made a new home for these ideas and we’re calling it, Playground.
The Recommendation Carousel: was the launch title for Playground. It has been in development since the start of Pham House and is still being worked on. The idea came from needing a better way to display imagery so we made a slideshow that automatically rotated. We realized that we could make it have microanimations and even better, integrate it with our existing Dynamic Ambient Player. The Recommendation Carousel you see on the Playground showcases my favorite films and TV but we have high hopes that this can once day be used on case studies given how modular the system is.
The What’s On Repeat Vinyl: was sparked thanks to my friends Sarina Nichols and Aidan Jones’ love for collecting vinyl. It replaces the outgoing Apple Music embedded player and features hover animations. We think people are gonna get a kick out of exploring how it works and the best part is the code will be made public to all Pham House partners or anyone who requests it to build on further. Don’t tell anyone but we’re rigging it up to some in-house audio player code.
The Slide Showcase: features the most potential out of all our Playground experiments as it can be used so widely on case studies and projects. With a vertical image showcase format that overlays titles, descriptions, buttons, and supplementary information, it proves to be a platform that can be developed further and isn’t restricted to any one format.
Expanded Info: is already being utilized on the site. The idea came from the need to display more information for those who wanted to see it while hiding it from those who could go without it. Like I said, I like to yap. So to put it in practice, instead of being displayed on the Playground, the build is currently deployed ont he About page on the site. It’s pretty neat too as it can pull in other webpages so a user never has to leave their place. Plus, if you look carefully, the beautifully crafted borders also integrate with the ambient lighting.
A NEW WAY OF THINKING ABOUT LINK PREVIEWS
Something that was foundational to this update was the revisiting of how our OpenGraph link previews looked and interfaced with different platforms. A portfolio page is something that is shared widely across a bunch of digital mediums like text messages, emails, and LinkedIn posts. A link preview is something a user interacts with, all before entering your site. Ain’t nobody wants to visit your website if the preview looks like it goes to a scammy page that’s gonna infect your brand-new laptop with a virus. So we took our time, placing emphasis on designing a new preview that can scale to adapt to each platform while also looking great at all sizes.
We literally went through SO MANY DIRECTIONS. It was the reason for weeks of delays and headaches. If you can imagine it, we probably made something that looks like it. We ended up with a stunning piece that is type-based. These previews are typically tiny - so putting images or art made no sense. We filled the canvas up with typography that had character and color - we are after all a one-man design studio brand so we do things that range a wide spectrum of art direction. Most importantly, we developed a system that allows the preview to be shown in a 1:1 aspect ratio as well as 16:9 and adjacent ratios too. It looks really good as a square preview and makes great use as a full-screen preview. We’re excited to see how new visitors interface with our new preview and hopefully, it doesn’t eat at my brain anymore.
ADDITIONAL NEW FEATURES INCLUDE
Universal Animation Toggles: to help reduce the visual burden for users who are visiting on an older computer. The button is shown on the bottom right of all our section animations and is cross-page so that when a user pauses one animation, all sections follow suit.
A Greater Focus On Newsroom: prepares us for all the articles we plan on releasing. We made huge improvements to Newsroom and articles like providing users a social sharing container at the bottom of articles to allow them to share to several platforms or to copy the link. Author Profiles and descriptions like the one you saw above also provide us with the opportunity to bring in new writers and perspectives to share their stories and updates. And little changes like coding a drop cap, improving the progress indicator bar and adding download buttons also elevate the experience for users to read our posts.
Newsletter Updates: are rolling out as we continue to explore new types of user engagement. There are now updated procedures when collecting Newsletter subscriptions and an all-new design language for Newsletter emails. We also want to distinguish where our emails are coming from so Newsletter fans can now look forward to their dose of Pham House from marcom@phamhouse.com. This email serves as the division-wide marketing communications department for Pham House.
A Check Back Soon Page: allows us to show something other than a password screen to users who are keen to visit the site during updates and maintenance.
Bread Crumb Paths: are present at the bottom of all pages now to give users even more context of where they ventured off to on the site.
Web App and visionOS Optimization: are innovative and forward-thinking goals for Pham House to be accessible on an even wider amount of devices. Touch points on our website are more gesture and touch-friendly, and users on Vision Pro and mobile devices will have an easier time breezing through the pages. Our developers also took the time to make everything that much more responsive, so every page looks beautiful and well laid out, no matter the window size.
Available Today
Pham House 2A is a commitment to continually improving the platform so that users can always explore and experience the website with exceptional UI, UX, and accessibility. With 2A, we focused on quality-of-life improvements that make our platform that much more enjoyable to navigate and use. This is a significant enhancement to the backend of our site and allows us to create new content and present it in new ways when the time comes. These features and over 50 more updates are available today, and the open-source code that we announced will be made available to partners in the coming weeks.
Our goal for the website is to inspire each visitor to do their best design work. Because of this, we packed the website full of unconventional content you wouldn’t see on typical post-grad portfolio websites. We hope to inspire more designers to create magical web experiences that showcase their work and stories.
RELEASE NOTES - PHAM HOUSE 2.0.2A-
Header Navigation Bar
Redesigned Navigation Bar: A brand new bar for desktop and mobile devices that adapts design cues from Apple’s visionOS. This is the first time the mobile bar features a floating design.
Minimal House Logo: The new navigation bar features the minimal house logo for both desktop and mobile devices. The house logo also retains its position when the navigation menu is activated on mobile.
Active Page Indicator: On desktop, the bar now also displays a small indicator under the current page you are on if that page is on the main navigation. Another indicator also illuminates if you hover on other pages in the bar.
New Typefaces
Pham House Display: Replaced the former header font with our new Pham House Display Typeface. Pham House Display completes our transition to move all brand material and platforms to the new typeface standard.
San Francisco Pro Display: The platform now calls on macOS and iOS devices to use their system font, SF Pro Display for font consistency and text legibility. You can find this updated typeface scattered throughiout paragraphs on the site, including Newsroom articles, Archive descriptions, Buttons, and everything else that is body text. For users on other operating systems, Pham House will call on their default system font to provide an experience consistent with their OS.
Playground
Created an all-new Playground tab: A tab to separate new ideas and code to be experimented with and developed further. These concepts are refined and then applied to the rest of the site someday.
Recommendation Carousel: A showcase of sliding thumbnails that preview a video using the Dynamic Ambient Player when pressed. Thumbnails also pause and expand when hovered on.
What’s on Repeat Vinyl: A custom-coded vinyl experience that can be customized to any song and animates and spins on hover. This feature also integrates with the Dynamic Ambient Player naturally.
The Slide Showcase: Vertical images with corresponding text to display a wide range of information and graphics. The engaging interface is coded to use images with a 2:3 aspect ratio and allows for responsive resizing for all screen dimensions. By restricting scrolling, we've ensured a more controlled and responsive experience allowing slides to snap back and forth, making it easier than ever to showcase features and highlights. It also houses locations for elements like a Title, Description, additional information, and a button - all of which can be enabled or disabled and fully customized.
Expanded Info: Created a modal that pulls hidden content or web pages without redirecting the user. This modal animates from the button and has differentiating visual language to show a user that they’re looking at a pop-up. The modal utilizes the same close button as the other Lightbox’s. Users also will have the option to leave the modal by clicking outside of it. This feature will be very valuable when there is too much information on one page and supplementary information needs to be hidden.
Newsroom
Author Profiles: To display who wrote the article and their description. Primarily will be used on updates and stories. Articles written by Marcom will not have author profiles.
Sharing Container: Added a sharing container at the bottom of every post that copies the article link and creates a post for it on several social media platforms and through iMessage (or any SMS) and Mail. Included with the sharing links is a standard copy link symbol. This solves an important user experience flow and could facilitate more sharing of the site.
Download Buttons: Some new posts will have a download button enabled so users can easily download a .zip file of all the images used in the article. This will be a case-by-case decision made by Marcom.
Drop Caps: Added text drop caps for story articles.
Reduced Width of Newsroom Text Blocks: Users can now read more quickly as they don’t have to scan as wide to read from line to line.
Newsletter
Updated Newsletter Behavior: Deployed a new aggregation system for Pham House Newsletter email confirmations. Users will now receive a formal confirmation letter to their email address. When signing up, users will also add their names for networking and collection purposes. Email addresses and names will be completely private and remain within Pham House serving only those functions.
New Email Handles: To quickly identify what division a Pham House email originates from, new emails were created for Marketing Communications and Legal. Marcom will have oversight of Newsroom contacts and be the source of future Newsletter communications as well as serve as the media relations alias. The hey email was also changed to hello@phamhouse.com to be cohesive with brand guidelines.
Page Improvements
Universal Animation Toggle: Using JavaScript, a universal toggle that pauses the WebGL animations will appear on all section animations. This significantly reduces the visual burden on older devices and helps the website perform more efficiently. The toggle can be found on the bottom right corner of every animation and is linked to all animations so that each page you visit stays paused.
Breadcrumbs: Added a page path that will be standard on the bases of all existing and new pages. Currently, most pages will see the Pham House logo followed by the page they are currently on. If they are in a subpage, like a Newsroom post, the path will add an additional chevron and list the newest current page. Light and Dark mode variations are built in but the code is fully customizable for individual paths if they require differing colors such as the Gear page path.
Announcement Bar: Designed a new variable announcement bar that can be placed throughout the site to provide users with additional information. This bar has a linear gradient animation and can be toggled to have a link with a right-sided chevron. This allows for full customization on every page and the ability to choose whether we want users to click or not on a bar.
Created a Check Back Soon Page: A new Pham House text animation made from HTML and CSS will now be deployed with a new Check Back Soon page which will serve as a waiting screen and secure page to briefly block users from accessing a page that is being updated or is down for maintenance. This is independent from our secure password pages.
Added a Colophon and Changelog: Two new pages can be accessed from the footer and are updated regularly. A platform status indicator is also present on the Changelog page.
Buttons
New Umbrella for All Button Classes: Created a new specification in the code to serve as an umbrella container for all button classes. The site now includes Standard buttons, Inverted, and the Learn More button which houses subclasses of icons, and lastly special use buttons. All of these buttons are now being deployed throughout web pages. Users might not see a huge visual change but the underlying code is much cleaner and easier to manage.
New Horizons
Web App Support: Enabled the ability for Pham House to be used as a web application. While it is pending further discovery, it is functioning as intended and thanks to the added navigation, users can interact with the site with minimal barriers. This feature will natively inherit the touch icon logo seen on iOS if a user adds the site to their dock.
visionOS Optimizations: Pham House will be supported and optimized for Apple Vision Pro when released. More documentation to come in the future.
Brand
Brand Identity: Updated the Pham House brand identity with subtle changes in our palette and wordmarks. The signature Pham House accent color has been altered to a new green that is a different hue and brighter. The secondary accent orange has also been modified. Pham House Green (internal name redacted) was updated to the new color in 30 locations during the transition. Orange was updated in 5 locations.
-
404 Page
Updated the 404 page with a slightly modified layout.
Simplified the 404 Error page. There is no longer a graphic that requires loading. All elements have been created with HTML and CSS to make the purpose of the page more understandable and to prioritize quick loading.
Amendments
Refined the characteristics of the back-to-top button seen universally on all pages.
Changed 'Boulder' copy to 'Denver'.
Removed a few antiquated lines of code from the CSS. Additional cleanup has been placed on the project roadmap for Pham House 2.2 and 2.3.
Animations
Made the Green Dynamic Blob on the Home Page respond quicker for Logan.
Improved animation latency on the Spotify Booktracks project showcase.
Added a subtle button click animation for the header animation toggle.
The loading animation for first-time users through cache has also been changed to feature the House logo instead of the previous special use wordmark.
Added a smooth scrolling behavior for a better transition when clicking on an anchor link.
Archive Page
Resolved an issue in Archive where buttons were improperly sized.
Updated Newsletter Sign Up spacing on the Archive page.
Removed buttons and indicators for projects locked under NDA or without case studies on the Archive page. They will remain blank until a link is necessary.
Browser Configurations
Refined the Safari menu bar accent colors and mobile menu colors on all pages. Also added an invert tag for the logo if it is placed on a bright background (the only instance of this currently is on the Playground mobile navigation menu).
Buttons
Resolved an issue where on some tables, the Learn More button was not displayed correctly.
Created a new variation of the 'Learn More' button with an arrow pointing upward and to the right to show an external link. The original version with the eastward chevron is still utilized, the new variation will be used in instances where the link navigates to another domain.
Updated all buttons to utilize new custom typefaces.
Added special edition buttons (STO) on the About Page for contact. When hovered, the SVG icon will display the corresponding location the contact link leads to, such as green for iMessage. This overrides the current STO CSS code that does not specify a color when hovered. This feature is tied to mouse hovers only and will not work on mobile.
Content Management System
Modified CMS conventions to achieve all Talking Tim Cast Slider models to be the same height (Partial Fix).
Display and Visual Bugs
Resolved an overflow-x issue with the Recommendation Carousel and applied the Dynamic Ambient lighting to the grouping tiles themselves. This might severely impact performance on older devices using Chromium but will not affect Safari currently. Will run additional A/B testing with this feature to analyze performance impacts but will be rolling it out to a majority of users at launch to demonstrate capabilities.
Favicons and Logos
Updated Favicon, Touch Icon, and Google Search Icon with updated files.
There is now a prioritization on the Signature Pham House Green color. This change is reflected in the current Favicon and other web elements.
Footer-
Modified the footer section with updated information and links. The typeface was also changed from JetBrains Mono to SF Pro Display or the system default font for other devices.
Added a digital clock in the footer to display a 12-hour clock set in MT for visitors to see what time it is where I am currently. Of course, this can be modified for different time zones.
Frameworks and APIs
Made the corners on Apple MapKit JS to be rounded.
Improved Cybersecurity protocols and revised metrics.
Will request a formal re-indexing from Google to show relevant information. This may be after 2A launches to allow time for all pages to be made public and available.
Researching a revised Site Map for Google indexing. The current one has yet to be verified by the development team. This may cause a restructuring to provide ALT tags for all imagery to best comply with SEO.
Gear Page
Rewrote code from the ground up for the Gear Modules to have independent sizing and border radii. Outside containers are fully 10px with the interior description containers 10px on top and 0px on the bottom for a more consistent look.-
Rewrote code from the group up for Gear module description excerpt sizes. Text size now conforms to 3 parameters for mobile, tablet, and desktop variables independently. In a joint effort with the bullet point above, modules also dynamically resize much more efficiently to fit the device display type.
Made minor formatting changes on the Gear page.
Added Shoe Collection to the Gear Page.
Added anchor links to Desk + Sneakers in the Gear tab for easy navigation. More anchor links will be available as content is added from new categories.
Added a smooth scroll and specialized JavaScript on the Gear page to refine the anchor links for Desk + Sneakers and to future-proof more links.
Completely redesigned the Gear Modal status indicator (open & close symbols) to be more in line with the existing design of the current website elements. Also added a little transition flare to it for fun.
Navigation
Updated the Desktop and Mobile Pham House Header icons so they are unified. The Minimal House logo is now present on both.
Header Sections
Refined the Scrolling Indicator used for Header sections. Headers are now larger and more prominent so the need for enhanced visibility to scroll was needed. The indicator will replace the previous version and will be placed more regularly.
Modified sizing of the header sections on Mobile devices to fit the pause animation toggle.
Lightboxes
Rewrote the CSS for the Video Lightbox and Photo Lightbox and brand new Expanded Info close buttons so that they are consistent in visual language and position.
Updated the Lightbox Expand indicator.
Links
Modified some external link buttons to open in a new window.
Lock Screen
Updated the Lock Screen gradient.
Removed the Lock Screen Password Input arrow as it conflicted with Safari’s password manager.
Updated letter spacing and line height for lock screen text.
The Lock Screen logo has been changed to feature the House logo instead of the previous special use wordmark.
Mobile Navigation
Updated the mobile navigation menu with larger text.
Updated the Mobile Navigation menu with an active navigation outline.
Removed the solid orange pill on Title hover in the mobile nav bar to prioritize the new minimal house logo.
Resolved an issue where users can still scroll while on the mobile menu. Scrolling is now disabled when interacting with the mobile nav menu.
Name Drop
Added Google, Stok Cold Brew, and Wrexham AFC to Name Drops.
Changed link for the Snapchat Name Drop.
Modified section layout for desktop and mobile.
Added a descriptive excerpt above 'Name Drops' to help clarify.
Newsroom
Resolved buttons in Newsroom articles sitting too high on mobile devices by modifying their margin-top.
Refined the physics of the progress bar on Newsroom articles.
Added mobile-specific code for Newsroom Article Tags (e.g. Press Release) to be in line. Before the container housing, the tags were too big and made the modal taller. This will not work on all resolutions due to math limitations within the code, but no user should be on that size anyway in normal use.
Updated Newsroom caption styling. Captions under images will now be a gray SF Pro Display text field and will optionally include a download link from our new Download button class.
Modified positioning of arrow buttons on the Newsroom slideshows.
Added a 10px border-radius to all Newsroom slideshow formats.
Added a 10px border-radius to Newsroom slideshow thumbnails.
Newsletter
Modified Newsletter sections on pages where it is present.
Updated Newsletter sign-up button sizing.
Updated Newsletter sign-up button to be full width on mobile to match the email address field.
Newsletter sign-up uses a confirmation email system instead of the former Google reCAPTCHA system.
Newsletter sign-up now requires a first and last name.
Made tweaks in design and language to the Newsletter subscription confirmation email.
Previews
Resolved an issue where the OpenGraph standard would show the wrong preview.
Text
Resized all body text to conform with new standards for the website. This change while applied to the entire site needs per-page verification to make sure all text has been targeted. Some pages may still have the old standard and may look out of place when compared to the rest of the site.
Added an additional paragraph size. 16px (1rem) used to be the minimum but now SF Pro Display can be specified to be 14px (0.8rem) for new use cases.
-
Display and Visual Bugs
In some instances, the Recommendation Carousel stutters when running for long periods of time. (D51)
Investigating an issue where some thumbnails on the Recommendation Carousel have a grainy earthquake effect. (D52)
Investigating an issue with Expanded Info on tablets where a user can scroll on the original page as a modal is loading. After the modal has completed loading, the scroll is correctly paused.
Not all elements on the site are classified as clickable items.
Removed a build containing the Dynamic Cursor as it was decided after evaluation that PH2A should prioritize function and efficiency in core functions over aesthetics. Dynamic Cursor can come back in later builds when it is further tested.
Investigating an issue where the What’s On Repeat Vinyl snaps back to its original position when hovered out of the disc.
Investigating a severe issue where the Check Back Soon text animation flickers on mobile and tablets as it loads in the text. A hotfix was issued to conceal this flicker on affected devices. This may cause unintended consequences on some window sizes as this has not been fully vetted.
Investigating an issue where users are still able to scroll while waiting for the loading sequence to complete on the full page loading screen. (A98)
Investigating an issue where the Rivian case study End Graphic has strange background colors appearing on some devices. The same graphic is used on the home page with no evidence of the same issue happening.
Favicons and Logos
Identified an issue where when the website is on enhanced security, the Apple Touch Icon shown on the Safari bookmarks reverts back to using the Favicon on some devices. Further testing is required to see if this is the source of the problem.
Observed a potential oversight where on Safari, the favicon changes to feature a white background behind the house symbol when placed over lighter-colored page accents. The standard favicon is shown when a page menu bar accent is dark. See Newsroom vs Post on Safari to see. This is not a current issue but can be in the future for continuity purposes.
Frameworks
Exploring the opportunity to use .webp images instead of .png to speed up load times for content-heavy pages.
Exploring an in-house built audio player that roughly integrates with the current What’s on Repeat Vinyl in some instances. A current build is being tested for future versions of PH and will be deployed internally for an internal podcast player and music player dependent on streaming rights.
Lock Screen
Investigating a minor issue where after a user types in a secure password, the intended page loads shifted ~20-40px down from the top. This only happens on pages with enhanced security. (B14)
Mobile Navigation
On some mobile devices, there is a visualization issue where a 1px gap is displayed between the mobile menu and iOS browser navigation (url) bar.
Name Drop
Investigating changing the 'Name Drop' phrasing to something different so users aren’t confused with 'NameDrop' on iOS 17.
Newsroom
Investigating a minor visual glitch in Newsroom articles where when a user clicks on the mobile menu, the article classification (i.e. Press Release) is enlarged for a split second. (C42)
(In connection with (C42), the download lock-up also expands and morphs from SF Pro to Pham House Display.
Investigating a path issue where Newsroom posts are not categorized as sub-pages for the main header identified Newsroom page - hence not enabling the indicator dot that goes under the Newsroom text in the header.
Investigating a critical error where on mobile devices, when a user engages the menu multiple times while on a Newsroom post, the page freezes and scrolling becomes disabled.
This could be a result of interference coming from another snippet of code, potentially the scroll indicator. This is not the only issue regarding the mobile menu on Newsroom (C42) demonstrates a visual error in the article classification when engaging the menu.
Investigating a minor issue where Newsroom quotes are not visible on all platforms.
There is a critical Newsroom stylesheet error that causes all codes to not conform to their margins. This can not be overridden with !important and has to be solved using an inelegant fix (negative margins). This needs to be investigated and solved in a supplemental update separate from the existing pipeline.
Literally discovered when editing the 2A Newsroom post. The last slideshow thumbnail is cut off due to margins.
Features are subject to change. Some features, applications, and services may not be available in all regions or all languages.
THANKS FOR READING!
Media Contacts
Pham House Marketing Communications
marcom@phamhouse.com
Tim Pham, Founding Partner
tim@phamhouse.com