USGBC Studio: Jump off the carousel


Share this :   | | | |
USGBC Studio: Jump off the carousel

In theory, carousels on a website seem like a great idea. They give us the ability to put a variety of information within the same section of a webpage. Since a website’s homepage gets more traffic than any other page, you would think that a carousel at the top of that page would get the best visibility. Carousels also hold several slides, which make them sound even more appealing for cramming in as much information as possible. However, in practice, carousels don’t work.

Think about it: when was the last time you saw a carousel on a website? Do you remember waiting to see every slide? Or did you acknowledge the carousel’s existence and then carry on with browsing through the website without clicking on anything carousel-related?

Why do we ignore carousels?

They feel like advertisements. I don’t know about you, but I automatically ignore most web ads. How about animated ads? I am even more likely to ignore those. Since carousels typically have motion, they feel a lot more like ads to users than valuable content. Often, they serve as a way to showcase a website’s internal products, essentially making each slide an ad.

You can’t skim the content. The trend in web design is to let your content breathe—to spread it out on a page and embrace scrolling. Users are used to scrolling, and it allows them to quickly skim content to find the information they need. When you constrain content in a carousel, users can’t scroll to digest all the content at once or at their own pace. Instead, they need to either wait for the animated slides to move at whatever rate they were programmed to move, or manually click through each slide.

You can’t finish reading it either. If users are trying to engage with the carousel and read the content, chances are it will move to the next slide before they’ve finished exploring the content on the current slide. That’s distracting, and it makes the user experience clunky if people have to shuffle through the controls to find what they need. Also, users typically only see the first slide of information before ignoring the carousel and browsing to a different page. So why bother including all the additional slides?

What should I do instead?

Carousels are usually used as a catchall solution for promoting several pieces of content on one page. It’s also convenient to keep using the same slides for a while, which quickly makes the information stale and easy to ignore. In place of a carousel, you can use featured content that is constantly updated.

Create separate static pages. Instead of making separate slides for different pieces of information, focus on creating separate pages that you can link to in email or social media campaigns. Separate pages are more searchable, and search engines can easily index the content, making it easier for new visitors to discover it and see what they may have otherwise ignored in an animated carousel.

Find more tips on creating an engaging homepage

USGBC Studio: Don’t just add it to the homepage


Share this :   | | | |
USGBC Studio: Don’t just add it to the homepage

As someone who has worked on a number of websites over the years, I’ve run into the same problem everywhere—the request to add any important information to the homepage. However, the notion that every piece of major content needs to be added to the homepage isn’t the greatest. Why?

The content will be ignored. Within any organization, every department has content that is valued and deserves high visibility. Often, there’s an urge to stick this information on the web page with the highest amount of traffic, the homepage. But just because the homepage gets a lot of traffic, that doesn’t necessarily mean users will read everything on that page, especially if there’s too much content there. Which leads us to the next problem:

There’s too much text. If your solution for every request to highlight content is to place it on the homepage, you will be left with far too much information. Too much text means your users won’t know which information to focus on, and as a result, they will likely ignore most of it.

You need timely content. Use the homepage as a place to host timely content that constantly changes. That way, your users have a reason to keep returning to that page. If you’re only displaying static content there, chances are it will rarely get updated. Thus, your users will begin to ignore that page altogether. They will simply access the homepage so they can navigate elsewhere.

So how will users see any of the important content? If adding it to the homepage is a bad idea, what should you do instead?

Target users with direct marketing. You can reach users who need to access specific information by creating tailored pages that are easy to find when conducting searches on external search engines, as well as your site’s search field. Also, using direct marketing to send out targeted emails with links will ensure that the right users are seeing the information they need to find.

Use strategy with the way you craft and market information. Otherwise, it is all too easy for text to get lost in the web. The phrase “build it and they will come” is not relevant when there is so much that has already been built. Think along the lines of “build it for a specific audience, and then target that audience directly.” Then that targeted audience will come, and they will be more engaged with your content than someone who has accidentally stumbled onto the page.

Learn more about best practices for your website

USGBC Studio: Using images on the web


Share this :   | | | |
USGBC Studio: Using images on the web

Having great images on your website is an excellent way to make it more eye-catching. And once you’ve purchased or selected the right images, and have the proper licensing for them, you’ll need to format them for the web. Formatting will ensure that your webpages load quickly and don’t get bogged down by large file sizes. This is essential, because every additional second that users wait while files are being rendered increases the likelihood they will give up and leave altogether.

File format

Make sure your images fit the best file format for their intended use. It doesn’t make sense to save a logo file that needs to have a transparent background as a JPEG, or an image that needs to have a high resolution with a lot of detail as a GIF. Why not? Well, here’s what you typically use each image format for:

  • JPEGs are best for photographs
  • GIFs work well for line art and images with a limited color palette, and can be used to create animations (animated GIFs)
  • PNGs are commonly used for logos and line art, especially when transparency is needed

File size, image size, and resolution

After selecting a photograph, it’s important that you pay attention to the image’s dimensions. The larger the original dimensions, the larger the file size and resolution. And the larger the file size, the longer it will take for that page to load. An image with dimensions that are 3,500 by 3,500 pixels and a file size of 5 MB is far too large to use as an image in an article that needs to take up a 500 by 500 pixel space. Instead, use photo-editing software to resize the image to smaller dimensions.

Having an image that is much larger than necessary can cause problems with page load time, but it can also cause problems if you’re using an image that is far too small and trying to stretch it out to make it look bigger. Resizing an image with photo-editing software or in the HTML code so that it fits 500 by 500 pixels, when the original image is only 150 by 150 pixels, will leave you with a blurry and grainy image.

Working with responsive design

The subject matter and orientation of a photograph is important, depending on how you’d like to use it on your site. All images must scale well, meaning the user shouldn’t lose out on the experience of seeing the image if it’s been resized to display on a mobile device. If there are important details that get lost from resizing, you should go with a different image.

Images with a landscape orientation are popular to use on the web, because they are easier to scale down and have a tendency to fit well with any given page design. Images that have a portrait orientation are more difficult to scale down, since it’s easy for them to take up too much height on smaller devices such as smartphones.

So there you have it—a few things to keep in mind the next time you go searching for images for your website. Strive to have images with a high resolution that aren’t bigger than they need to be to fill different areas on your website. Great-looking images and a quick page load time are key to enhancing your users’ experience.

USGBC Studio: Best practices for a better user experience on your website


Share this :   | | | |
USGBC Studio: Best practices for a better user experience on your website

The web is an amazing place to share and create a wealth of content. But how do you ensure users are having the best experience possible on your website when it comes to viewing that content? Here are a few tips to keep in mind:

  • Simple navigation: It’s easy to think that adding a link to the main navigation will give a page more visibility. But the more choices available, the more overwhelmed your users will feel. Instead of trying to fit everything into the main nav, evaluate what your website’s key pages are. Simpler navigation makes it easier for users to move around on your site. It also gives those few pages higher visibility than if they were bogged down with several items alongside them.
  • Avoid too many choices: Adding too many links or call-to-action items to a webpage will only confuse visitors. Really think about what’s important and what the intent is behind your website. That way, you can guide users to make specific decisions.
  • Less is more: Try to capture your users’ attention by using brief and straightforward text. About half of all users visiting websites only spend about 15 seconds on them. With that kind of attention span, it’s important to draw your audience in and maintain their interest. Or at the very least, create content they can easily skim.
  • Create interest with images: Text-heavy pages are not your friend. Instead, create more user-friendly and readable pages by breaking up text with related images and illustrations.
  • Minimalist design: You may think that the more bells and whistles you add with images and interactivity, the better the design is for your website. The reality is that less is more. Simplistic and minimalist designs are the way to go when it comes to web layout. Why? They’re easier to translate to different devices without significantly altering the look and feel of the website. They also make it easier to highlight what you want users to focus on.
  • Think responsive: These days, websites are being viewed from smart phones, tablets—a huge array of electronic devices. With that in mind, your content should be easy to digest for different users. You shouldn’t use graphics that are so complex that when they are resized for mobile devices, it’s hard to tell what the images are. Be aware that the page layout will constantly shift for a responsive site, so the content should be flexible for different device widths. Also note that if your site isn’t responsive, anyone on a mobile device will have a bad experience.
  • Don’t put too much content at the top of the page: Users are accustomed to scrolling, so don’t be afraid to space your content out. Give the text room to breathe and break it up with supporting graphics. The information on each page should tell a story, guiding the user to scroll to the bottom of the page.

Check out some of USGBC’s websites: usgbc.orgusgbc.org/discoverleedleed.usgbc.org, centerforgreenschools.org, greenapple.org and greenschoolsconference.org.

Tools to Enhance Productivity Series: Git and GitHub


Share this :   | | | |
Tools to Enhance Productivity Series: Git and GitHub

When working on large, robust websites, it’s easy to overlook what changes have been made to templates or style sheets. So how do you follow updates and make sure you don’t accidentally undo the work of someone else on your team? There are many ways something could go wrong when enough people are working on the same website. And that’s where Git and GitHub come in handy.

Git is a tool that tracks the revision history of my source code. It knows what changes I’ve made to specific lines of code, and can even tell when I’ve added or removed files from a project. I can also leave comments about different tasks or specific revisions, which makes it a lot easier to figure out why I made certain changes later on. As much as I’d like to think I have a great memory, it’s easy to forget what I’ve done in the past when juggling multiple projects.

GitHub is a service that hosts web projects that are being tracked via Git. The files are published to GitHub where other team members can view the revision history, leave comments, and download the source code to work on their own changes. Team members can create branches of a project if they’d like to take it in a different direction and then merge those changes back to the original project files.

Here are the main reasons I like using Git and GitHub:

  • Version control: When you make changes to a website, you may inadvertently break something in the code. But have no fear, that’s where version control comes to the rescue! Git works as a version control system where you can rollback to previous versions of a project. If you make an update that completely breaks something else on a site, you can use Git to load the files from a previous version before the error or issue occurred.
  • Documenting changes: Over time a website goes through many updates and edits. With so much going on, details can get lost in the mix. That’s where Git’s tool of adding comments before committing changes is incredibly helpful. After making updates or edits to the source code, you add a comment about the changes, then commit the changes to sync with the project. Later you can see when changes were made and why they were made by reviewing your previous comments.
  • Commenting on changes: GitHub makes it easier to communicate with other team members who review your code. You can comment back and forth about specific lines of code, which helps smooth out any bumps in your development logic. After all, having a second pair of eyes review your work is a great way to catch mistakes you may have missed.

USGBC Studio: From Wireframes to Live Sites


Share this :   | | | |
USGBC Studio: From Wireframes to Live Sites

Whenever I tackle a new web project, first things first—I have to do some planning. One of the most useful ways to plan a user experience or website is by creating wireframes.

So what are wireframes? They are a way to map out the functionality and layout of a website. Wireframes essentially look like a stripped down version of a website, with lots of boxes being used as placeholders for function/design elements. It’s important that the planning stage doesn’t get carried away with how things look since that will come later.

My go-to tool for creating wireframes is InDesign. I begin each wireframe by focusing on the homepage or landing page, and then walk through each interaction that takes the user to a new section of the website. I like to work with filler copy or copy that actually appears on the site since it gives me a better sense of spacing between images and text.

When creating your own wireframes, here are a few things to keep in mind:

Do

  • Use it as a way to plan the layout and user interaction.
  • Clearly mark off areas for different functionality (I do this with a numbering system that you can see in the example).
  • Include technical specifications in your notes.
  • Use gray scale boxes and simple shapes that don’t distract from the main purpose of the wireframes—to plan the user experience.

Don’t

  • Don’t make it look like a design mock-up. The design will come after the technical side has been discussed and approved.
  • Don’t use lots of colors or actual images.
  • Don’t spend too much time working on them. They are meant for planning and are simply one step in the web design process.

When the wireframes are complete, what comes next? I typically go through the following steps:        

  • Get approval on the wireframes so stakeholders are in agreement with how users will move from page to page.
  • Send the wireframes to the technical team for review. If something isn’t feasible, a new solution is proposed and added to the document.
  • Once the technical requirements are rolled out, it’s time to get started on styling and designing the site.
  • Plan the design by making mock-ups in Photoshop. The wireframes are used as a guide for balancing graphics and text on different pages.
  • The Photoshop mock-up is converted into a functioning web experience with HTML, CSS, and Javascript.
  • The new pages are tested to ensure consistency across platforms and devices. Any bugs or issues are corrected in the code.
  • Voila! The website is ready to launch.

Check out some of our most recent website projects: gbci.org, leed.usgbc.org, peer.usgbc.org and wellcertified.com.

Translating Print to Web


Share this :   | | | |
Translating Print to Web

At USGBC, we have a number of beautifully designed and informative print collateral. However, in this day and age, there is a high demand for accessing information on a variety of devices—which means converting print media for digital viewing.

Where do you get started when it comes to translating something from print to web? To give you an idea, let’s look at the process I went through to convert our LEED collateral to a digital format:

  1. Study the print version. For USGBC’s LEED collateral, each rating system print piece has its own color scheme. All of the pieces fold up neatly and are stored in a folder. Both of these ideas can be maintained in the digital version.
  2. Develop the digital concept. A microsite made sense since it’s an easy way to share and distribute information. The print version consists of six pieces, which translates to a smaller website that is easier to code and control. Instead of using a folder to tie together all the rating system cards, we created a homepage that serves as a landing page—showcasing the collateral’s colorful cover art. For each rating system page, we created a single scrollable page to make it quicker and easier to access all the information on a given rating system.
  3. Brainstorm and finalize the overall look. Before I could get started with coding and building the site, we needed to make sure the whole team was on the same page with the look and feel. We planned out the layout for the homepage as well as one of the rating system specific pages. In web design you need to design to a grid, and keep in mind how the site will look at different breaking points when a browser window is resized. That means it’s better to design vertically as opposed to adding lots of columns.
  4. Coding and research. Next it was time to roll up my sleeves and get to work—coding a responsive microsite. I also did research on ways to make the site more dynamic and interesting, like using scrollable background images, text and images that fade in/fade out as you scroll, and CSS hover animations.
  5. Testing and launching the site. It’s important that a design looks good across browsers and devices. If you only code and test a site for one browser, chances are you’ll run into a lot of surprises when you look at it in a different browser. Once I tested the new microsite and corrected any coding bugs, it was time to start sharing the URL with the rest of the world.

So there you have it—the process that brought together one of our latest microsites. Check it out at leed.usgbc.org.