Web Design and SEO Blog

If you're a designer or work with designers, you're certainly familiar with the concept of designing "above the fold." This is a design philosophy that originates in newspapers, where the upper half of the front page is loaded with the most important stories and photographs, as well as the prime advertising space. Above the fold information is what's first presented to the viewer, and it has been extended as a concept from the world of newspapers and print design to the world of web design.


Even within the realm of web design, presenting all important information and navigation "above the fold" — without requiring the user to scroll —has been passed around as gospel. This dates back to the early years: when the internet was brand new to its users, many people didn't scroll at all.


Is the fold still relevant in 2014?
According to a study by Clicktale(1), 76% of visits to pages with scrollbars scrolled down. This is conclusive evidence that users do scroll — but what does that mean for our page layouts?

Most user time and attention is still spent at the top of the page: to be specific, 80% of user viewing time is still above the fold (2). User attention is at its height when visitors first arrive on the page, with a focused drive for relevant information. This gradually decreases as they quickly scan through the rest of the page, until they reach the bottom, where they focus a bit more attention (if they make it that far).

Jakob Nielsen describes this phenomenon:
"It's as if users arrive at a page with a certain amount of fuel in their tanks. As they "drive" down the page, they use up gas, and sooner or later they run dry. The amount of gas in the tank will vary, depending on each user's inherent motivation and interest in each page's specific topic. Also, the "gasoline" might evaporate or be topped up if content down the page is less or more relevant than the user expected."


Guiding the user.
The "emptying gas tank" phenomenon can be mitigated somewhat by designing a clear hierarchy and trail of information, with the top of the page used to introduce the point of the page — the product, service, or subject being explored. From this jumping off point, it's useful to introduce visual cues, which range from the subtle to the blatant.

Shown above: in the example at left, text reading "Learn More" with an arrow pointing downwards encourages scrolling. In the example on the right, a line leads down the page to the rest of the timeline.

A simple approach is to design your content that it spans the fold and appears incomplete or cut off at the bottom of the window, suggesting that there's probably more to see below. Be wary of horizontal bands of empty content that span the page — they can easily be mistaken for the page's end.

Pinterest offers "cards" of information in staggered columns, which makes it obvious that there's always more content to see if you scroll down.

Less subtle approaches involve visual connections from one element to another — arrows pointing down the page at the next stage in a process, or a visual trail that leads visitors through the story being told by the page. Most obvious of all is a big button with text: "Scroll down for more!"


Responsive design and the fold.
"Above the fold" used to be a fixed dimension — the top 600 pixels or so of a website were guaranteed to be visible to the vast majority of visitors. In today's world of phones and tablets and massive desktop monitors, there is no longer a reliable "fold" to design for. Today's screen variance — and especially the reintroduction of small screens — means that we must focus on organizing and content into logical hierarchical groups.

Using the strategies shown above — deliberately cutting off content, visual trails and scroll buttons — will all help encourage mobile users to scroll. Even if we wanted to, there simply isn't enough room to cram all the important information above the fold on mobile screens. However, there's evidence that certain content should live below the fold anyway.


What content should live below the fold?
Web landing pages focused on selling a product or service are a valuable example of how to organize content on a webpage. The traditional, conventional advice is to provide a prominent call to action above the fold: "Buy Now," "Get Started," "Get It Free," and so on.

However, in cases where building trust or persuading a potential buyer is a necessary part of the pitch, it may be better for your call-to-actions to appear lower on the page, after evidence, testimonials, or other trust-building material has been presented. If you're selling insurance or medical services, a below-the-fold call to action could be advisable. Even when building trust, however, it’s important to present the essence of your topic above the fold.


Conclusions
There is inarguably value in presenting important information up front. Visitors to your website immediately begin making decisions about whether you're trustworthy or offering something that they're interested in. If the first impression is positive, you can focus their attention through well-organized content that flows strongly from one section to the next.

However, visitors to your website will scroll. The more relevant and well-written the content, and the better the organization, the more they will scroll. If your website is a novel, the space above the fold can function as your book's cover and introduction — no need to try fitting the whole story on the first page. Because mobile devices have all-but-guaranteed that some of your visitors will have to scroll, it makes more sense to focus on establishing the story and getting your visitors' interest.


Citations:
(1) ClickTale: Scrolling Research Report v2.0
(2) Nielsen Norman Group: Scrolling and Attention
(3) Conversation Rate Experts: Crazy Egg Case Study

Bozeman, Montana: A month and a half ago we took Zach on as an intern to work under the wing of our development team. We've found him a welcome addition — full of creativity, energy and a well-rounded technical background. Appreciating the strengths and development capacity he's added to our team, we've now invited Zach to be a full member of our team as a junior developer.

Please join us in welcoming Zach to JTech — again!

Images are critical: they're a universal language that speaks directly to the intuitive, emotional half of the brain. The images you choose to represent your organization and communicate with visitors can have a greater and more immediate effect than the text they accompany, starting with the immediate decision of whether to view the rest of your website or whether to go elsewhere. The images on your website will be the first impression visitors have of your company, determining their gut-level reaction — positive, negative, trustworthy or not. Let's take a look at what goes into effective imagery.


1. Subject and emotion.
Whether you choose to use stock photography or hire a photographer, it's important that the images convey the right message and emotion. For instance: using Montana imagery for a business based in Montana, or photos of smiling people if happiness is a key component of what you want associated with your organization. If you're positioning your organization as affordable, using a larger number of smaller images signals comparisons as on supermarket shelves. For upscale websites, fewer images are used, but they tend to be positioned strongly for maximum emotional or conceptual impact.

2. Trust.
Do the images on your website give visitors a realistic expectation of what they can expect? If you're a small business, using stock photography of a large team working together is disingenuous and can lead to broken expectations further down the line. Whether or not the photos are actually photos of your business or product, it's important that they accurately convey a sense of who and what your organization is.

3. Appropriateness.
Be sure to use photos that are suitable for your target audience. If you're a non-profit marketing to families and children, photos of sultry women would create an odd dissonance — whereas a tanning salon might find bronzed women soaking up sun to be a perfect fit.


4. Uniqueness.
While stock photography can be a cost-effective way to approach imagery, it's important to use assets that are sufficiently different than your competition — including simply using different stock photos. By now, you may have seen some of the "live chat support" women with smiling faces and perfectly coiffed hair so often that they've begun to feel like old friends.

5. Good content.
Investing in getting your images right isn't good enough, sadly. If the images are not accompanied by quality content optimized for your target audience, any good impression you create will soon evaporate. If you'd like help with content creation and optimization or choosing the right imagery, contact JTech. We'd be happy to help.

Bozeman, Montana: Our Montana web design team is in the process of rebuilding Clark Film Buying's website with a clean new aesthetic and fully responsive design. As with Clark's current website, the vast majority of the functionality is hidden behind the scenes in a secure extranet that Clark uses to manage their company's operations.

Clark Film Buying is a film buying and booking service based in Bozeman, Montana. They book for more than 160 independently-owned screens in 17 states, providing advocacy and support for their clients with film companies.

With the responsive website rebuild, the extranet is being expanded to add support for Clark's clients to login and access some of the services provided by Clark. We delight in returning to previous projects to refine their usability and add polish to the interface, and we always love working with the friendly folks at Clark Film Buying.

We're very excited to be working on a major project with our longtime customers the Gem Gallery. JTech built their original website more than a decade ago and replaced it in 2008 with the site they have today. We're proud of their current site, and it's always a treat to look at something that's already great with an eye for how to take it to the next level.


This time, our web development focus is on upgrading their site for a new beautiful layout and performance on mobile devices — responsive website design. The Gem Gallery's branding has evolved in the years since their website was built, so we'll be bringing the website's aesthetic into alignment as well as creating a great experience on mobile phones and tablets. Everything we like about the current site will be carried to the new site— its live-filtered storefront of gemstones and jewelry, easy checkout, gallery of custom work and detailed information about Yogo Sapphires and the Gem Gallery.

We look forward to sharing the new Gem Gallery website with you in 2015!

Bozeman, Montana: We're always looking for ways to improve the advanced web development services we offer to our clients. Often this means research and development into the latest web technologies and methodologies — but it also means looking for performance enhancements in how we work together as a team and schedule work.

Two Week Development Cycles
Starting December 1st, we'll be switching over to two-week development cycles. This is part of an internal reorganization that will allow us to deliver better work more quickly. A practical result for our customers is that new work orders will be scheduled into the next production cycle after they are approved, rather than being inserted into the current development cycle.

We're very excited about the many projects, opportunities and friendships that our clients share with us, and we look forward to taking all our work to the next level. Thanks for your business and happy Thanksgiving!

Our Montana web development team is focused on honing the experience offered by our custom websites — which means perfecting the interface's usability and expressing our attention to detail through small touches that add delight. We don't just want to help you get things done — we want it to be smooth, painless, and possibly even fun.



All the news fit to print.
With that philosophy in mind, we've made some changes to our website. In the previous iteration, we'd hidden all of our announcements and long-form publications — the Technical Blog and Business Dispatch — on our About Us page. We're emphasizing publishing and curating information for companies doing business online, and as a result we determined that the articles we've published needed their own section and a higher profile.

The News section, our most recent addition, is presented as a feed that shows complete articles — no more snippets or truncated content. To read the next article, just keep scrolling — articles will load on demand as long as you want to keep reading. We've also added distinct News channels, for those interested in a particular type of content — be it business-oriented, technical content or announcements from JTech.

Let's have fun.
Adding a new section to our website meant evaluating the balance and iconography of our site's navigation. This is where we realized that usability — easy navigation, fast page-loads, and responsive design — wasn't enough for us. We convened at the drawing board and designed unique animations for each of our icons to add fun and greater detail to the interactions. Sometimes getting the job done well isn't enough — sometimes you need to add a flourish! Our website is where we do business, and it's important that it reflect the values and priorities we hold.

jtechcommunications.com

Mobile phones and tablets account for most internet traffic.

The number of people using phones and tablets to access the internet continues to grow. At JTech, we use responsive website design to craft and develop websites that look great and perform well on devices of any size. Your old website — the one that may have only been built a few years ago — is no longer adequate to accommodate the way that people are using the internet today.

In January 2014, 58% of American adults had smartphones and 42% owned tablets. (1)

Smartphones and tablets were responsible for 55% of the United States' internet traffic — compared to 45% of internet traffic from PCs. (2)

More than a third of phone internet users use their phones as their primary means for accessing the internet. (3)

This is an incredible shift in how people access information, communicate, and buy goods or services — and if your website doesn't work well or look good for people who are using mobile devices to access the internet, they will often choose to go elsewhere. Not only will a responsive website lead to more time spent on your website, higher sales (if you're offering eCommerce), and a more satisfying experience, it may also improve your search engine rankings.

Google offered the following thought regarding mobile search results:
“According to our studies, 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. That includes sites that use fonts which are illegible on mobile, or sites where users have to zoom in or pan around excessively. Mobile is a very important area; the mobile device penetration is over 50% in the USA and most users use their device for browsing websites. Because at Google we are aiming to provide a great user experience on any device, we’re making a big push to ensure the search results we deliver reflect this principle." (4)

Already, Google penalizes search rankings (5) for sites that offer a poor mobile experience or load slowly on phones. As of October 2014, Google was experimenting with offering a "not mobile friendly" (6) icon to name and shame websites that won't offer a good experience to those searching.

These days, it is no longer a question of whether your site has mobile traffic. The question is how much it's costing you not to serve mobile visitors to your organization's website. To learn more, contact JTech about how you can make your website work on mobile devices.

Citations:
(1) Pew Research Mobile Technology Fact Sheet
(2) comScore data reported by CNN Money
(3) Pew Research, Cell Internet Use 2013
(4) Sent to Barry Schwartz of Search Engine Round Table
(5) Google Webmaster Central Blog: Changings in rankings of smartphone search results
(6) Search Engine Roundtable: Google Displaying Not Mobile Friendly Icons in Search Results

Bozeman, Montana:
My JTech, our next-generation custom website content management system, is now being put through its paces in early access testing for select customers. My JTech is an integrated platform for managing websites, email, internet marketing, eCommerce, email campaigns, and more.

Custom-configured.
Our Montana web development team custom-fits My JTech to each customer’s website for an amazing experience: no pre-built templates or clumsy one-size-fits-all interface. The interface is structured around your organization’s data, with responsive design for screaming-fast performance on all modern browsers and devices.

The evolution of content management.
My JTech can do everything you’re already able to do with our Control Center — and that’s just the beginning. Even for existing functionality, we’ve taken some big leaps forward: huge improvements in speed for eCommerce management, on-demand loading of databases, and drag-and-drop file uploads (with huge speed improvements when uploading large images).

Request an invitation.
If your organization wants to be involved in the next phase of testing My JTech, send us a message.

This month Kate Burgan joins JTech's Bozeman internet marketing team as a Marketing Intern. Born and raised in Seattle, she came to Bozeman to study marketing and graphic design at Montana State University — where she's also minoring in international business. Kate will be working with Mike, our Search Marketing Manager, and Diego, our veteran Marketing Intern, to develop custom website promotion plans.

Like many pilgrims to Bozeman before her, Kate is an avid student of the outdoors. Whether it's skiing or hiking or fishing or soccer, the call of the Montana wild is strong. We're excited to have Kate's enthusiasm and energy added to our internet marketing team. Welcome, Kate!