Making Netsuite Site Builder Friendly for Mobile Users

There has been a tectonic shift in the way people are viewing your website. Have you noticed it? Several years ago, your site traffic was mostly from desktop computers. Today, a significant percentage of visitors are probably arriving via mobile devices. That should come as no big surprise, given the meteoric rise of smart phones and tablets. And let’s face it, any traffic is good, regardless of how they got there – but only if they’re converting to customers. The problem for most sites is that they’re not, at least not nearly as well as desktop visitors.

Fortunately, there’s a fix.

The Problem

So why aren’t mobile users converting? To put it bluntly, browsing most Site Builder sites on a small screen is a pain and they’re not sticking around long enough to buy. Out of the box, the techniques Netsuite uses to present web data were designed well before the rise of mobile devices. For desktop users, that’s fine. For visitors using a phone or tablet, however, the experience can be frustrating. Mobile web browsers try to cope with a page that’s designed for desktop only by shrinking it down to fit their screens. The result is minuscule text that’s nearly unreadable and equally small images. To see anything clearly requires pinch-zooming , and scrolling around on the page to try and take it all in.

To make matters worse, Google has also noticed that your site isn’t mobile-friendly. On April 21, 2015, they started rolling out a new algorithm, dubbed “mobilegeddon” by some,  that takes note of whether sites being crawled are mobile friendly or not, and lowers the rankings of those that aren’t. So while some mobile users are having a rough time browsing your site, others might not even be finding it to begin with.

The Solution

Now for some good news. Making a SiteBuilder site mobile friendly, both for your users and in the eyes of Google, is within your reach. The key lies in an area of web development called responsive design, which is shorthand for changes to the layout and styling of your site that allow it to better utilize small screens.

At Fourth Wave, we’ve been able to make Netsuite sites responsive with relatively few template changes, while relying on updates to the stylesheets (CSS) instead.

Considerations

When converting a desktop site to responsive, efficient use of the screen real estate is key. Elements that might have been prominent (the logo, search boxes, or top-level navigation) need to remain available while taking up considerably less space. We’ve developed a basic checklist of considerations for successful responsive conversions.

Common Elements

Our first focus is on the common elements that are present on all pages. For most sites, this will include the header, footer, and persistent navigation. By addressing these first, we make significant progress toward a mobile-friendly site by editing just a few files.

Header

The header most likely holds the initial branding of your site, along with some utility links such as cart, my account, and a search box. We’ve had the best luck with creating a new mobile version of the header and using CSS media queries to swap out the desktop header for mobile depending on screen size.

Desktop version with full header

Mobile header

In some cases, we’ve also included some scripting to allow the header to collapse as the page is scrolled down, leaving the essential utility links while sliding the logo and non-essential links off screen. This reserves most of the screen for the content.

The search box is collapsed to an icon, pressing which will slide out the search form. Again, the strategy is hide anything that distracts from the content, but have it at the ready when needed.

Slide-out search form

Navigation

Navigation is perhaps the most complex element to make responsive. Our strategy is to create an alternate static navigation panel, hard-coded in HTML, and keep it off screen until needed. The developing standard is to use a “hamburger” icon to denote navigation. In the interest of usability, we usually include text labels below the button as well, although it’s possible that at some point the functionality will be obvious enough to drop those.

Sliding mobile menu with hamburger icon

Since we’re creating a static navigation pane anyway, several of our clients have taken advantage of the opportunity to beef up their desktop navigation as well by using a responsive mega menu. This allows for images, in-depth menus at a single glance, and marketing messages or guidance, all wrapped in a neat package that scales responsively.

Desktop mega-menu

Footer

Lastly, literally, comes the site footer. Most of our clients already had this in place, although in several cases we suggested moving links such as “About Us” or “Locations” from the header to the footer, again to conserve space. Since the footer is off screen by default until scrolled to, there’s no need for scripting to hide it. It helps to use a different background color, just to differentiate it from the content.

While we find using multiple columns in the desktop version of the footer is a good idea, for small screens – especially in portrait mode – we stack those columns atop one another to make a single scrolling column.

Grid Layouts

Once the header, nav, and footer are in place and working, we move on to more template-specific issues. One of the biggies that needs to be sorted out are any gridded layouts, such as category lists, product lists, and search results.

Desktop grid layout

Mobile grid layout

This is where some CSS kung-fu comes in. Netsuite loves layout tables, but tables are notoriously difficult to make responsive. Our workaround involves taking a mobile-first approach; we rework the layouts in SiteBuilder so that they’re presented as single-column lists. This means only one table cell per row, which isn’t efficient for desktop screens but is nearly a requirement for mobile. Then we use CSS to float the rows so that they appear side-by-side if there’s room, and stack if there’s not.

Other Content

Fixing the above elements will take you about 90% of the way to a fully responsive site. From there you need to decide if any individual page contents will need tweaks to make them responsive. Complex tabular data, such as product configuration tables, can be a pain to deal with. Fortunately, they’ve been few and far between in our experience. Any videos or forms that are contained in iframes will need to be restyled to fit smaller screens, which isn’t too tough but is a bit wonky to discuss here. And then of course, there are the last three Netsuite page types…

Shopping Cart, Checkout, & My Account Pages

Using CSS only to make the standard NS Cart, Checkout, and My Account pages presents some challenges. You can bang away at them and after some trial and error get a layout that flows okay on mobile, or bite the bullet and install the freely available Reference Cart, Checkout, and My Account bundles. The latter option means fewer headaches as far as responsiveness goes, but they’re not trivial to set up and get working. Having done it both ways, we tend to come down on the side of the reference options.

Conclusion

Converting a SiteBuilder site to a mobile-friendly, Google-approved layout isn’t the simplest project, but with some practice it’s very doable and the payoff is most definitely worth the effort. If you do it right, you’re also fairly well future-proofed against the constant barrage of new devices entering the market. Hopefully this post will help you organize your thoughts before setting off on the journey. And if the trip just sounds like too much work, contact us and we’ll be happy to discuss the project with you.

The following two tabs change content below.

• Bio
• Latest Posts

Bill Womack

I've been involved in web design and development since the web itself was just a baby. In the mid 1990's, I started my own interactive design agency in Silicon Valley, working with companies such as Netscape, Apple, IBM, and Oracle. In the intervening decades, I've begun to focus more tightly on front-end development. For the last eight years, I've been helping Netsuite customers get the most out of Site Builder.

Latest posts by Bill Womack (see all)

• Making Netsuite Site Builder Friendly for Mobile Users - May 17, 2016