Author: Brockenstein

This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.

In April 2015 the amount of mobile only internet users surpassed desktop only internet users launching us into a new digital age of mobile first. It’s been over a year since then and it’s now time to look at how our mobile users like to view the web and what design changes we should be making.

After reading this article it made me realize I needed to adjust my view on website design especially concerning mobile users. The article brought out that the web is full of more and more designs that are “long scrolling”. Perhaps it’s a parallax design, one page design or infinite scrolling design. The common theme is mobile users love to scroll! The myth that people don’t scroll and that no one will see your content unless you make sure your it is above the invisible fold, like an old newspaper, no longer exists. Next time you’re on the subway or in a spot to people watch mobile users watch them. They love sites like social media and will continue to scroll and scroll just to see if they missed a post or just because they enjoy the gesture swipe interaction. The thing in design we have to remember is making sure it’s evident in our design that there is more to scroll to. So while the content does not need to be above a magical “fold” we don’t want users to think they are at the end of our page either. Some designers have decided to completely hide content to solve this and while some times that is good, like on a search results page where we may shorten or remove the description, it’s not always good for a page that is supposed to have content on it. Adding collapsed content like accordions or read more comes at a interaction cost.  Mobile users aren’t wanting to click a button to get to the next page or to read more of an article they like using gestures to navigate, they like the sliding feeling of a site going by normally caused by scrolling.

In fact gestures might be more intuitive than we once thought. A study back in 2009 showed that regardless of nationality or proficiency with mobile devices gesture-based controls seem to come naturally to us, or at least can be picked up quickly.  If that were the case back in 2009 just imagine how more true this is now in this new age. Think about the first gesture you learned on your mobile device. It was likely a swipe to navigate or at the very least to unlock your device. Since its the primary gesture for navigation on a mobile device it’s actually more natural and intuitive to scroll on a mobile device then click and drag a scroll bar on a laptop or desktop.

Now let’s think about the future of the web. I look at my brother-in-laws who are only 3 and 5 years old and they can use a mobile device with ease because of how intuitive gestures are and trust me they love to scroll. Growing up in this digital age of mobile first they will desire their web experience to be even more intuitive and even less interaction costs. As we are building the web for this generation we might see a path to pageless websites. 

Back to the present, the truth of the matter is In split tests, long pages often beat shorter pages. So as we build sites for our modern users, while we wait for this current one to grow up and build even more interactive sites than we dreamed of, let us not be afraid of scrolling content. Now why do I say content instead of design? Because sometimes the design can get in the way of content. While we don’t need to worry about the old newspaper fold when it comes to our content we don’t want our user thinking they are at the end of a site. If it’s perfectly okay if the content goes beyond the page or if content is below the initial view but we have to let the user know it’s there. After all most users don’t have or don’t notice the scroll bar that might popup while they are scrolling. A scroll bar varies depending on their device and browser. So we need to make sure our users know there is content to scroll to. This is especially important when the user goes to a new page on our site, they need to know they have landed on a new page. Since we can’t rely on a scrollbar showing how long the page is we have to make sure our layout is good enough to suggest there is more. Large design elements , such as banners, logos, navigation, search forms and etc, can cause the user to not realize they are on a new page with content. The last thing we want is the user having to scroll past a design to just find out if they are on the page that has the content they want. So if we have a large banner, maybe had an arrow high enough so that no matter you screen size the arrow is there and when you go to the next page maybe shorten or remove the banner all together.

Some goals while designing we can have:

• Always be able to identify when you are on a different page on load.  A general rule (that might change as technology changes) is your headline for mobile shouldn’t be lower than 340px on the page.
• While scrolling you should be able to tell that there is more content to scroll to. Don’t allow large images, videos, white space or element that are normally at the end if the site, like social icons, break up the content to the point where you can’t see the next piece of content.
• Avoid collapsing content, its okay to collapse functions of a site like, search forms and other forms, filters, navigation. Things that aren’t content. Content is why the person is on the page. So if its just a page with a a sign up form and that is why they are there you wouldn’t collapse it but if the content was an article and you had a signup form after the article you could collapse that form so that the user can easily see there are related content links below that.
• Test your design on devices before development
• Test your design on devices after development
• Allow for changes in the design after initial development 
• Avoid auto scrolling on load, this takes control away from users. It implies we know best for the user, another reason we shouldn’t collapse content is we are suggesting to the user it’s not important they will want to scroll past that section. If we can auto scroll past a section or collapse it, maybe it’s not important enough to even be on the page?

Since we aren’t afraid of scrolling anymore in this age then Is infinite scrolling the way to go? We have seen some major successes with infinite scroll like Facebook, Instagram, Pinterest and some failures like Esty. There are pros and cons to infinite scrolling. Really infinite scrolling is great for combing over large amounts of information. A big flaw is the fact that you easily lose your place if you click away and try to come back. This site is an example of a solution for that but, it really is a limited use case. Most clients have a big header and big footer, really this is only good if you only want to see a list of results. So, the determination on infinite scrolling has to be made with the end user in mind, or else your site will fail like Esty did. Really based on most feedback from users if you aren’t building a social media site then infinite scroll is not the way to go especially with the fact that even in social media users give feedback of frustration on trying to find something they saw before.

So, while infinite scroll has its limitations remember, if you have to scroll a lot on a site, especially on a mobile device, that is okay. Don’t feel the need to collapse or hide content, if the content is long that is fine. If there is content after the main content, that is fine too. Users will scroll as long as design elements don’t suggest they are at the end of the page. Let’s cut back on interaction costs and allow users scroll or more likely swipe through our sites.

Please share this article with anyone you feel would benefit from it.

This article was originally written in 2015 for a team of developers but is now published on this site for public consumption since 2022.

For years we have used the term web friendly or web safe font. What is a web friendly font? Web friendly fonts are fonts that are pre-installed by many operating systems. In the past it was considered any font that was supported by both Windows and Macintosh at least by 90% as web safe by many. We would check this percent with websites like cssfontstack.com that estimate the percent a font is pre-installed on a computer. So generally speaking, web safe fonts were Arial, Arial Black, Tahoma, Trebuchet, Verdana, Times New Roman and etc.

There has been an increase of internet usage by smartphones 394% and tablet 1,721% higher between Dec 2010 and December 2014 according to comScore. comScore also reports that March 2015 marks a new era of a mobile first world with Mobile only users exceeding the amount of desktop only users. Now there is still a large percent of multi-platform users, but statics are showing as of July 2015 mobile devices make up 51% of internet usage in the USA.  Something else we have to be mindful of is the increase of other devices that can access the internet and internet users are buying these devices with many owning multiple devices that can access the internet.

So, the question arises. In 2015 can we still use the term web safe font? Arial has always been the choice of font for the web, but Android devices technically don’t have Arial instead it uses Droid Sans that looks similar. As previously noted, Arial black was supported 90% by both windows and Macintosh but it is not supported by iOS or Android. So that means while you may design and program text to look a certain way on a desktop it may not have that same look on a mobile device. And as different TVs and smart watches and other devices grow it will harder to call any font web friendly or web safe.

Should we use custom fonts? Although Android and iOS may not have the exact font we want to use in most cases when we stick to using Arial our designs will generally look the same on mobile as it does on a desktop. So, we should still try to avoid using custom fonts. Still some clients will want a fresh look so you may need to use custom fonts. In this case there are no concerns about it looking different between desktop and mobile but there are some things we do need to consider.

Performance when using custom fonts is extremely important. No matter if you are on a phone or a laptop you don’t want to have to wait for a font to load to see the site. So, when using custom fonts try to limit it to one custom font on the site. The other thing you have to be mindful of is even when you use just one font, how many versions of that font are you using? When you make a font bold or thin or italic that means an additional font file for each look. Try to keep this down as much as possible. You shouldn’t ever really go over normal, bold, italic and bold italic. That is 4 font files a user has to load. Depending on how large the font files are they could extremely hinder a person’s use of the website especially on a limited or slow data plan.

Hosting the file is the next thing you have to think about. If you are getting your custom font from Google Fonts or Typography or a place like that, they often offer a way to link to the font straight from your site to theirs but is that ideal? Think of it this way say you drive up to a fast-food place and order a combo meal. The burger comes out right away but then you see a worker run across the street into the next building and comes out with your fries. Sure, it didn’t take long but for a moment you didn’t have the complete order and you couldn’t leave the drive thru till you got your fries. It’s the same with allowing your fonts to not be hosted on the same site as your website there may be time where the site loads it is the wrong font and then it’s the right font. This can still happen when you are hosting the font on your server, but it does cut down on this issue. Hosting the font file on your own site also helps you keep control of the font and avoid the issue of the font you were referencing gets moved or edited it.

Creative and Development working together. When you are working in an environment where you have artists and developers working separately it’s a key thing for the artist to document what font they are using in their mockups. So that way the developer knows what web fonts are needed. When an artist uses google fonts, they can easily just provide the name and what styles they used. When using something like Typography it would probably be best if the artists can just provide the downloaded font from that site. No matter who gets the font communication is key between both parties for a good user experience for the end user of the website.

So, no matter if we are attempting to use common fonts or custom fonts on the web lets be mindful of all the users and the potential future users of our sites.