Welcome to 2019
What Is “Responsive Design” ?
Responsive design in a nutshell is when your site automatically fits within the user’s device. Thus, if the user has a small screen (width-wise), the elements will rearrange to show you what really matters (CTA buttons, other actionable items). You’ll often see bigger buttons, more blank space between the various web elements in hopes to avoid accidental user actions, smaller font-sizes, etc.
Enough of the jargon – the word “responsive” in Web Design & Development does not really mean much anymore, but rather has become a standard. If your site isn’t responsive, especially if it’s an E-Commerce website, you’re going to receive some complaints and you are most definitely late to the game. Responsive web designs in the modern age are done in mobile first and elements are introduced as the screen sizes or viewport increases. Whether it’s from angry, frustrated customers, or via low conversion numbers and high bounce rates in your Google Analytics account, if you are receiving any of these, it’s time to get to work.
Where Do We Begin?
If you are reading this, it’s likely you have a non-responsive site built on Netsuite SiteBuilder – which was initially introduced in the year 2003, far before the term “responsive design” even existed. Because of this, there are some initial additions and configurations we need to perform to the surrounding wrapper of your SiteBuilder website and theme
First Steps – Theme Configuration
There is a few important first steps to make to your theme in order for any style changes to become effect:
- First – check which theme is live. Duplicate the existing theme and start fresh so you can always fall back to the old theme in case something goes awry.
- Add in a “Meta Viewport” tag under “Addition to <HEAD>” in your theme edits
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8al; IE=7; IE=EDGE" /> - Remove hard-coded widths (if any) from sidebar elements. These will restrict the widths of the elements to pixel values which we don’t want in this case, since we want it to be adaptive in all browser sizes.
Debugging Workflow
We need to set a baseline to determine what state your website is currently in. If you didn’t know a problem existed before you began the responsive conversion, you won’t know when these issues may have occurred or which change caused them.
- Open up the homepage along with a few main inner pages to check the console in your web inspector for any pre-existing Javascript errors that might be occurring which may be fixed or made worse with the changing of a jQuery version.
- Style changes can be a bit of a pain to keep track of syntax errors, along with other small edits you may not even knew you performed. To alleviate the pain of going “What the hell did i change and where?” questions – I highly recommend setting up a simple local git environment.
You don’t necessarily need to setup and create or push to a repository, but it is helpful to simply “commit” changes and be able to have change log as you go. You can simply revert each commit locally since Netsuite does NOT keep a record of file revisions outside of a timestamp. - Add in and make sure that jQuery is running 2.2, not 1.x or 3.x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> - Under “Body” tab in Themes menu, add
<!-- Begin --> and <!-- end -->
template tags for easier referencing when using the Inspect Element. This saves a TON of time “digging” through the various locations of templates within Netsuite.
Stylesheet Tips
- Download a local copy of relevant style override files from Web Hosting Files which are referenced in the “Addition to
<HEAD>section of the General Theme menu. - For easier reading, go to HerokuApp and paste the entire stylesheet in the left column and click “convert to SCSS”. You can also do this locally via gulpfile and local configuration but I’ve found this is just as easy and the local setup is an unnecessary step most of the time. This tool will also eliminate all duplicated style / parent element declarations and also present you with any syntax errors before converting. Its a pretty useful debugging tool.
- For going from your generated SCSS back to a regular CSS file, which you need to do before uploading or replacing the existing stylesheet, I use the website: CSS Portal. Make SURE to hit clear or refresh EVERY time you convert the code, i’ve had a few headaches where it simply duplicated the entire stylesheet a few times opn accident, causing the stylesheet file to be astronomically large.
- Before the wide adoption of the FlexBox across all major browsers, I used to immediately include / install a reference to a CSS framework, such as Bootstrap or Foundation to alleviate reinventing “the wheel” that is responsive styles. However – now I simply do most of my styles with FlexBox, as it can convert previously non-responsive elements into responsive with just one or two simple CSS declarations. You can read more about FlexBox here
- Do not “Edit” the stylesheet, instead save local .css file and Overwrite file. If you simply edit and try to save it will notify you that the record didn’t change, and the changes wont reflect on the site (due to caching) which could cause some confusion.
- Increase the stylesheet “version” by adding a “-v.x” to the end of the stylesheet filename and re-reference that version number under your theme’s “Addition To Head” section. I.E. “styles-v12.css”.
Converting Table Layout
Since SiteBuilder relies on the archaic HTML element that is tables, certain elements of your template must be in table format. This usually works out fine for Desktop viewport sizes, but once you get into the 1024px and under range, that’s when the table rows and cells begin to become non-resposnive to the viewport window. To quickly alleviate this, I put the following styles in my SCSS stylesheet:@media only screen and (max-width : 1024px) {
#div__body {
table {
border-collapse: unset;
tbody {
td {
display: inline-block;
}
}
}
}
}
This makes the tables behave MUCH better and collapse appropriately on mobile and tasblet devices when the window begins to touch elements on the page.
Conclusion – Don’t Beat Yourself Up!
In conclusion – these are simply just tips and general guidelines which I have provided to help alleviate the stress of converting an existing Netsuite SiteBuilder site to become responsive. There is no single correct way of doing this, but there are certainly wrong steps you can make along the way to make your time performing this task much more daunting. Nowadays – there are so many tools out there and great code editors compared to 10 years ago. If you catch yourself losing multiple days of work and not making any progress, my best advice is to take a step back, rethink things, and just know that you are likely making it harder than it needs to be. If you have any questions about any of these tips, please do not hesitate to leave a comment and let us discuss them.
Happy coding and don’t let the thousands of existing lines of CSS intimidate you as we are here to help you with any sort of problem you have. Contact us via our contact form and we will be more than happy to assist you with any custom solution you may require.
More from Fourth Wave
Site Builder Performance Upgrades
NetSuite Announces Plans to End Promotion Functionality for Site Builder
Protect Your Online Forms from Bots & Spam
What to know about schema.org and microdata tagging
Most NetSuite Websites Are No Longer Tracking Safari Conversions for Adwords
Make Your NetSuite Site Builder Site Secure – HTTPS Throughout
Kevin Carpenter
Latest posts by Kevin Carpenter (see all)
- How to Increase eCommerce Revenue With Upsells and Cross-sells: Cart and Product Detail Page - September 8, 2020
- Netsuite 2020.2 Update: Data-center URL deprecation + What You Need To Know - August 8, 2020
- Site Builder Performance Upgrades - July 19, 2020
- Protect Your Online Forms from Bots & Spam - October 22, 2019
- What to know about schema.org and microdata tagging - May 2, 2019