In Designing a Website for Mobile Viewing Where is “Above the Fold?”

website mobile viewing on a smart phone

Like many former readers of print newspapers and magazines, I now read these publications online. It’s quite satisfying when using my 21” iMac desk computer but increasingly I find myself reading publications on my mobile phone, along with millions of other people.

Even more people are catching the news on tablets, which are actually shrinking in size, too.

Who Started That Rule?

So how about the “rule” that the most important information on any website should be above the fold?

That terminology came into use because newspapers were and are still displayed folded so that only the top half of the front page is visible. That space above the fold is designated for the most important news and information.

But the rule is a little ridiculous. How can you possibly squeeze everything that’s important into the top of your website so that it stands out on a mobile device?

According to the Nielsen Norman Group, you need to design a separate mobile site. And after doing some research that’s just what I did. I’ll show you my current mobile design and the one I’m planning to replace it with (I still may do a little tweaking).

I like the new one better.

Do It Yourself

I formatted my website for mobile viewing a couple of years ago. I should say that a representative from Network Solutions at its trade booth at Blog World (now known as New Media Expo) convention had a little extra time so he did it for me.

I liked the design because it offers the reader a table of contents. You have a choice of things you can do: visit my blog, the full website, and even click on the phone icon and call me directly. Here is what it looks like:

Write Speak Sell old mobile viewing above the fold

I just screened Network Solution’s video and it’s still necessary to do your own formatting, as is the case with other providers. By the way, several WordPress templates automatically format for mobile viewing.

Things Have Changed

But a lot has changed in the last two years. I pay $8 a month but you can get a basic plan from other providers without charge. All you do is type in your website URL and your site is automatically formatted. Before going live you can even tweak the design.

I did a search and clicked on the site of the first Google paid ad I saw. It’s called Duda Mobile. I typed in my URL and voila! There was my website. However, there are quite a few templates to choose from.

This is where my technophobia kicked in. I decided to call customer service and spoke to a most patient and pleasant tech support rep named Ronald. He patiently explained things to me as I tried formatting a couple of templates. Below is the one I think I am going to use. I like the idea the viewer can scroll directly to the information he wants.

Also, there is the added feature of being able to follow me on my social networks and if you scroll down just below those icons you will see the titles and excerpts of my latest blog posts. I blog for business so that’s important to me.

Write Speak Sell website mobile viewing above the fold

I’ve saved it and I’m letting it marinade for a few days to see if I still like the design or if I want to tweak it. I chose the paid plan because it allows for more visitors, a customized URL and tech support.

What the Big Companies Are Doing

Several of the biggest companies have chucked the idea of including what’s generally been considered important to include “above the fold” such as contact information and descriptions of products and services.

I visited Apple’s mobile website and the iPhone 5 is most prominently displayed. Apple knows what’s making the most profit for them.

Apple website mobile viewing above the fold

IBM is a global organization with many more services than they could possibly display on a mobile screen so they simply have a list of posts – does my heart good, as a blogger.

IBM website mobile viewing above the fold

I’m happy with my website design when viewed on a regular desktop or laptop computer. I feel all the important information for my readers is “above the fold.” I’m not so famous as Apple so that I can get away with showing a single image on my mobile site. Besides, I don’t sell a product.

The idea of “above the fold” is really an outmoded idea. What’s important to your company is very different from other companies. You want your mobile site to represent your brand in the best light possible. Highlight what will induce a visitor to continue reading.

If your website is not now formatted for mobile, then just do it.

I would love to hear from you about my new mobile design. What do you think? Do you like it? Is it easy to read and understand? What would you add or delete?

Leave a Reply

Comments

  1. Jeannette,

    You were fortunate to have a representative from Network Solutions format your site for mobile devices. That’s a great testimonial for the value of getting out and networking in person.

    I admit that I have been lax in formatting my site for mobile. I simply rely on the WPTouch plugin. Thanks for the tip on Duda Mobile. When I get a chance, I’ll check it out. I need to think about this a little more. My first inclination is to go with the layout that IBM has. Thanks for giving me something to think about.

    • Sherryl — Yes, I was lucky to have Network Solutions do the formatting. But I was pleasantly surprised at how much easier it is now. I’m not so facile as you are at technology so I think you’d find it quite easy. Duda Mobile will actually format the site for you automatically after you type in your URL. I chose one of their other templates. The tech support rep on the phone was very patient and helpful. I will probably do a little more tweaking and then publish. What’s striking is that the big companies are not using mobile views of their websites but rather of products and services — or, in Apple’s case a single product. IBM is only showing posts. Fascinating.

  2. Good for you getting a mobile design Jeannette and I will check it out. My theme has responsive design which is supposed to make it mobile friendly. I rely on that but haven’t checked my site out for a while to see how it looks.

    • Susan — I know that a number of WordPress themes automatically format for mobile. What’s nice about using a third-party vendor is that you have more choices about how your site is formatted and the information you want to highlight.

  3. A question about your new design: what will it look like on my mobile phone when I select blog?

    I like the look of things.

    My webmaster is going with what Susan says she has – a responsive design. We’re doing a TOTAL makeover of my website and blog.

    Thanks for bringing up the mobile compatablity again.

    • Pat — when you click on “blog” it should go right to my blog, as it does on my current design. As I mentioned to Susan, though, you have more design choices with a third-party vendor and you can highlight what’s most important to you. I like what you’ve done so far with your new website design!

  4. Cheryl — More people than ever are viewing websites on their mobile phones so I think it’s really necessary to have a mobile view. It’s isn’t that difficult to set up. In fact, Duda Mobile will actually do the formatting automatically, as I’m sure other providers will, too.

  5. Amy — when customers visit you on their mobile phones it is another form of engagement, as you point out. Employers are loosening the reins on their employees and allowing them to use their own mobile devices for work and engaging with customers. It’s a whole new communications channel.

  6. Your point is well taken. Planning for mobile has to be integral to developing one’s business strategy. For different businesses, this will mean different things. For online retailers this means preserving browsing history across platforms, as research shows individuals are increasingly viewing content from the same website across a variety of platforms. However, the purchase still happens on a desktop or laptop computer due to concerns about and difficulty with entering payment information online.

    As you think through what’s on your home screen for mobile, it’s always helpful to do as Jeannette has done and ask people to give their thoughts about the new design. I think the new design is good, but suggest that you add a link to the full site for those who would prefer to view this way.

    • Thanks, Janet. Because, as you point out, the purchase is a two-step process, view on a mobile, buy on a computer, your mobile view needs to be compelling enough to have the visitor make that move to his or her computer. Re my design, you can’t see it on the new mobile image on my site, but there is an option to view the full website for visitors who care to.

  7. This is great food for thought. I love the idea and will be working with my web guy regarding this, I haven’ yet done this. Although my site is viewable (well enough any way) on mobile it could always be better. Thanks for the suggestions. I will forwarding this information to him now. 🙂

    • Susan — so glad that my post nudged you to make it better. According to Cisco, mobile viewing will increase 13-fold by 2017.

  8. I like the new template that you are thinking about using. The big buttons are more inline with the look many mobile sites now have, and familiarity can be a good thing. I don’t mind drop-down menus on cells phones, but half the time it seems like they never work like they are supposed to. Buttons make much more sense. The JetPack mobile version of my WordPress blog didn’t strike me as anything special, but maybe someday I will look into other options.

    • Jeri — I’m glad you like the template. I do think it is more user friendly and contemporary looking.

  9. Like many others that have commented, I have also been lax in coming up with a decent mobile design that is pleasing to the eye. I like the second image you put up, and I do think it is time to rethink the “above the fold” idea. However, I do have to ask, do you think the same thing should apply to websites? Should we still be designing our sites with the idea of “above the fold?”

    • Thanks for visiting, Darnell. I’ve switched to my new design which I also like. I still think “above the fold” is valid for websites. You’ve only got a couple of seconds for a new visitor to understand what you’re about and what you’re selling. It can’t be fuzzy. That’s why my three main service offerings are right at the top. If you like what you see you’ll stay and hopefully click through my site. If you don’t, well, thanks for stopping by.

  10. Hi Jeannette,

    Cool, really like the mobile version – just pulled it up on my iphone here to check it out. FANTASTIC.

    I’ve got to do some of this myself….tried “responsive” themes in the past on other websites, just never been real pleased yet.

    thanks for your beautiful inspiration here – and on mobile. 😉

    -ML

    • Hi Matt — thanks for visiting and for taking the time to view the mobile version of my site. And thanks for your kind words. There are several companies that offer user-friendly templates for creating your own mobile site. It’s even easier than when I set up my first mobile view only a couple of years ago. Good luck.

  11. Jeannette:

    I’ve just started with a new website guy, who was givin’ me an earful about above/below the fold! 😉 I’ve got a lot of learning to do and eventually want to get my practice’s site on mobile too, since all the younger folks are browsing that way now!

    • Jerry — I just looked at your site and it’s well designed with a lot of good information. I think the size of the image on your first page, though, will move the important information “below the fold.” I’m not a designer, but I think that would be the case. You can check for yourself on a laptop.