Avallo's Blog

Less Compiler in Custom CMS

By Justin Jordan

We recently started talking about how useful it would be to use a CSS pre-compiler, like Sass or Less, on our projects built with Avallo Custom CMS.  It would allow our designers to turn colors and frequently used styles into variables and allow them to take advantage of all the extra functionality these systems provide. Only problem was, in order to make use of these technologies, our designers would have to write their styles in a separate text editor, compile the code into CSS using the command line or a desktop app, and then copy and paste it into the CMS text editor. It would work, but would be cumbersome to have to bounce around between several different apps just to style a website, especially when making frequent changes.

Finding a Solution

At this point, it was clear that we needed to build a compiler into the CMS. We started looking around for a PHP based compiler that would work with our framework and Custom CMS and we decided it’d be best to only support either Sass or Less to reduce complexity and prevent accidental mixing of the two. In the end, we chose to support Less, but not because it’s necessarily better than Sass. There were a few reasons that factored into this decision...

Similar to Vanilla CSS

Less looks more like vanilla CSS, which makes it much easier to grasp for those already familiar with CSS. Designers who are not used to seeing dollar signs and variable declarations might feel like a fish out of water writing Sass for the first time. Less, on the other hand, uses special characters and syntax CSS developers are used to seeing, so styling with Less isn't much of leap.

Easy to Install

The biggest determining factor was to find a solution that didn’t require anything to be installed on the server. We build a lot of websites, though many are hosted on our server where we have a custom environment ready to go, some clients opt to host their own sites, so we want to keep Custom CMS as easy for us to install as possible. Therefore, we wanted a compiler that was in the form of a PHP library. Sass has a PHP based compiler; however, it’s a PHP extension that would have to be installed on our server and our clients’ servers in order for it to work. Luckily, Less has PHP libraries that could be bundled with Custom CMS and included programmatically without the extra server setup.  

Building the Solution

Once we had decided on what pre-compiler to use, we had to implement it. I started playing around with different ways I could incorporate the compiler into the Custom CMS admin panel—adding a compile button, making a dropdown menu for code type, or even requiring a special tag on Less files—but everything seemed to overcomplicate things when the point was to make things easier. I wasn’t entirely sure how it should work until it occurred to me, it makes no difference to the Less compiler whether you compile Less or vanilla CSS. If the code doesn't contain any Less, the compiler, more or less, just passes the CSS through. I decided to just compile the code no matter what and call it a day. The beauty of our Custom CMS is that the styles are already being combined and cached into a single file to prevent unnecessary server requests, so I was able to take advantage of this caching by inserting the compile process right before the code is written to the file system. Aside for some special code for displaying syntax errors, the solution was dead simple, and works better than expected. Now Avallo Custom CMS lets you sprinkle in LessCSS into your styles as much or as little as you want.

In Practice

The outcome has even better than expected. We've been using LessCSS in Custom CMS for a couple months now, and honestly, it's easy to forget the feature is even there. The only time it makes itself known is when there's a syntax error in your code, which displays a message telling you where the error has occurred. It's really convenient that variables can be used across different files. We mostly use this to keep all our color variables in one place, which makes it super easy to make theme changes on the fly. Ultimately, it was definitely worth adding this feature to Custom CMS and we look forward to using it to increase efficiency and lower production times on new websites.

Less is More

"The more dishes, the lower the standard." - Chef Gordon Ramsay

Sometimes a client will have so many subpages on their website, they feel like they're drowning in them, and they have no idea where to start concerning organization and display of all their links.

Challenges include cutting their options down on what to say and how much of it to say at once, as well as how to lay out and manage their navigation areas.

I always refer to Chef Gordon Ramsay's views on restaurant menus when helping with this problem. Less is more. You don't want to overwhelm the end-user or yourself with too much information.

But maybe you want to hold on to all of that content for records, or SEO reasons, or something like that. That's just fine! Just make sure you're putting forth a pleasant "first impression" for new visitors. The internet has become so much of a reflection of society that you really do need to consider your website comes across as if it were your store-front and you're standing behind the counter (because if you think about it, it is and you are). This is the whole idea behind UX-- level with your audience. Give them an enjoyable experience, don't challenge them, don't waste their time.

So, how do you put your website on par with a classy five-star menu with steak and lobster and a shrimp cocktail, printed on a narrow sheet of the finest parchment, and not like one of those mall Chinese food places with over 200 choices? Keep your first impression simple:

  • A small selection of useful navigation links that fill your new visitor on who, what, and why.
  • Call-to-action blocks, a.k.a. quick links that are placed and designed so as to stand out and grab attention. These are the portals to the most frequented and valuable areas on your website-- the main reasons your visitors found their way to you in the first place.
  • Quick access to contact information. There's a very good chance your visitor googled your website just so they could find your phone number or email. Some people aren't readers- they want to hear it straight from the horse's mouth. So, let them!

This is your primary content and should be displayed as such. If you have a back-stock of deeper, more involved information, allow it to be accessible but out of the way, perhaps in the footer and/or the site-map. Disclaimer! In rare cases, it's a good idea to put a large selection of links up-front, like if you're a department store or some other type of retailer that specializes in variety. Ask us if you have any questions about User Experience in regard to your website content.

Web Optimization: Sending Less Data

A website that loads too slow will lead to people leaving the website before it even loads. They will assume that the website is offline and abandon it to look for a faster loading option. By sending less data over the network to your website visitors, it will speed up how fast they can view your website and get the content they were searching for.

Optimize Images

Out of all of your website’s content, images take the longest time to load. One of the ways that you can help to speed up load times is by optimizing all images on your site. Optimizing images can be done in a multitude of ways depending on the end result you want to achieve. Images should be resized (in height & width) and be compressed (in kb and mb) into a size appropriate for the web. Doing so will make the user’s experience much better and allow them to see the website the way it was meant to be viewed. This is important since images play a large role in the design of the website.

Compress & Enable Caching for Resource Files

Another cause for slow load times on your website is if your resource files (Javascript and Stylesheets) are uncompressed. JavaScript (JS) and Cascading Style Sheet (CSS) files should be minified (the process of removing whitespace), and JavaScript can also be ran through a compiler, which removes unneeded characters from your code, making it shorter. Beyond that, you should also set up your web server to tell the visitor's browser how long to hold onto these downloaded files for. Generally you should have it hold on to the files for approximately a month.

Web Optimization: Giving Markup Meaning

The structure of the content that goes into your website is almost as important as the content itself. Having content that is not properly structured can make it difficult for some users to access your site. Markup with meaning also helps a lot with SEO. When your content is properly formatted it ranks higher for Google.

Image Tag Alt Text

The images on your website convey meaning to visitors, but what if that visitor is blind or a google bot crawling your website? Adding alt text to images gives a text description to that image to let blind individuals and Google know what that image is about. Alt text can also be helpful for SEO purposes since it tells what the images on your website are about.

Headings and Paragraphs

A great way to tell Google what is important on your website is by utilizing heading and paragraph tags in your content. As a rule of thumb you should only use H1 tags for the most important items on the page, like the title of the page. H1 Tags (large headings) tell your reader and google that this is the main subject that you are talking about. All paragraphs under this H1 should be related to that main subject. You can also make an H2 under an H1 which will tell them that you're now talking about a subtopic of that main subject. All paragraphs under this h2 are talking about that sub-topic. You can then make a new H1 on another subject and start the whole process all over again.

Mobile App or Web App

Mobile App vs Web App graphicMobile App vs Web App graphic

So you've got a great idea- or a specific need for a business tool- and you’re looking into getting a custom application. For some, it’s hard to know where to start as to whether the app in question needs to be specially built for smartphones and tablets, or if a browser-based web application would make more sense.

What’s the difference, anyway?

Mobile apps are applications downloaded via distributors such as Google Play (Android) and the App Store (Apple). App icons appear on your device for quick access to your newly installed programs. Examples of mobile app uses include scheduling and calendars, note-taking, organization, and games.

Web apps are available in any common browser such as Chrome or Safari. They’re more advanced than a regular webpage in that they are specially programmed for user interaction- for example, inputting and storing information. Examples of web applications include shopping carts, payment processing tools, and discussion forums.

Which option should I go with and why?

Mobile apps are well suited for management of information stored offline, bill paying and service or maintenance request portals, scheduling and notifications, quick access to promotional content like coupons and limited offers, applications utilizing common smartphone-driven technologies such as GPS and transit routes, and applications or games utilizing physical engagement with devices (shaking, etc).

Web apps are well suited for advanced management of web content, backend administration, storing and compiling data, applications requiring typing, or applications used primarily for display.

Avallo Web Development has you covered.

Here at Avallo, our team of engineers have the skill and experience to build your custom application on both platforms. We will work with you to determine which path would be the most sensible for the purpose and functionality of your idea or tool. Contact us today and tell us your thoughts!