Q: What are the benefits of a one-page scrolling layout?
A: The greatest advantage of a one-page layout is that we can guide a user through an experience rather than requiring them to make decisions about where to go next through clicks and hoping they will land where we want them to. A one-page layout allows us to determine what kind of story we want to tell and provide this to a user in the order that we want them to see it. Many users come to a site not knowing exactly where they want to go or what they want to see. Through this design we can present focused brand messages in a consolidated format that gives users an engaging overview of many areas of a site without making them look for it. This makes the user experience easier and faster by decreasing the number of decisions, clicks and page loads and diminishing the risk of losing users before they see what you want them to. Additionally, these layouts transition smoothly to mobile environments, reducing development time and creating a more cohesive experience with your brand and organization across your digital properties.
-Jessica Hensley, Senior UX Architect & Designer
Q: How do I ensure that things like animating elements and rounded corners don’t appear broken in older browser versions?
A: When building a new component of a website, it needs to be decided which browsers are going to be supported. A small percentage of site visitors will still use older browsers that have either limited or no support for CSS3 which is the technology that is used for animations and rounded corners. To support older browsers while still maintaining modern functionality, it’s important to provide fallbacks within code and ensure that layouts are not broken by the fallbacks. For instance, rounded corners can usually fall back to square corners without any layout issues. To support functionality like animations, it’s good practice to use a tool such as Modernizr to detect when a browser doesn’t have support for animations and adjusting the layout accordingly.
-Teddy Karambelas, Web Developer
Q: How do I include all the features I want, but minimize load time for users?
A: Because we’re including so many features and a large amount of content on a single page, optimization is of utmost importance to maintain acceptable load times. All images should be web-optimized to reduce file sizes, in addition to only calling ‘retina’ resolution images on supported devices. Code should be combined or minified to further reduce the site’s overall size. Furthermore CSS should be used wherever possible instead of loading additional images or intensive scripts. If a site needs further optimizations, AJAX can be used to only load necessary page content as the user scrolls down the page.
-Dustin Miller, Web Developer
Q: What’s the level of effort and budget required for a one-page scrolling design?
A: The budget for any project depends on a client’s specific needs, such as the amount of structured content required, browser compatibility and any third party integrations. That being said, the average budget for a one-page scrolling site starts in the $20K range but can vary significantly based on features, complexity and depth of the site. This includes research and discovery, IA & wireframes, design, development and deployment (along with project management of course). If you don’t have budget for a full scale redesign, incremental improvements can be a great way to refresh your site over time. For example, rolling out a new template or site design gradually, hitting the top pages first, can provide short term wins and increase user engagement without breaking the bank.
-Stacy Del Gallo, Project Leader
Q: Are scrolling websites here to stay?
A: It has long been a belief in the web community that all critical content should be “above the fold." The assumption being that site visitors will not scroll and therefore anything that requires action or attention must be seen upon initial page view. However, user behavior has changed drastically in the past five years. Due to the increase in the use of smart phones and tablets, scrolling has not only become a necessity, but the most natural and intuitive way for users to interact with content (just think of trying to use sites such as Twitter, Facebook, and Pinterest without scrolling!) That doesn’t mean that cramming an enormous amount of disparate information on one long page will be an enjoyable experience for site visitors. Scrolling pages are here to stay, but they need to be carefully crafted and designed to be successful.
-Jeanne Ivy, Senior UX Architect & Designer
Check out the one-page scrolling designs we recently completed for the Hopkins Retrospective project and for Johns Hopkins School of Nursing. For more information about the projects, visit the case studies on our site. And if you have any additional questions, just ask us in the comment section below!