Avallo's Blog

New Server Upgrade Coming Soon

Here at Avallo we pride ourselves on providing our clients with access to our highly reliable hosting environment, which we have been using for the past 4 years. As we grow, we want to upgrade our server so we can provide this to even more clients.

Hosting Upgrades

Reliability

Our hardware has actually only crashed once in the last 4 years, and it was down for only a short period of time - however we have had issues with DNS lookups due to other DNS servers going down between our clients in Minnesota and our Name Servers. To help alleviate this, we will be implementing a new system where we use three NameServers from 3 different physical locations.

Speed

We are transferring all accounts to new Solid State hard drives. This means that reading and writing files on the web server will be much faster, and the process of loading a web page for one of your website visitors involves reading from many files, so we expect to see a faster time to first byte (TTFB), causing faster load times.

We will also be modifying all instances of our web server to implement HTTP/2, allowing visitor’s web browsers to load websites more quickly.

Security

While we have not had any issues with viruses in the past 6 years, we will be implementing a system that has even more strict permission management as it comes natively in our new environment.

If you host email with us, we have had a few issues recently with email delivery that arise from when one of our clients has their password stolen (usually from a phishing scheme), and their email account is hijacked and used to send spam. To resolve this issue, we are implementing a robust outbound spam filter.

Transfer Process

Migration Process

For our clients who we have registered your domain name for you - we will handle everything for you internally. For our clients who we do not have access to your registrar, we will be reaching out to you individually to either request access or work with you to let you know our new name servers and/or IP Address(s).

Using our NameServers

If you are not already using our NameServers and you would like gain this new reliability / speed upgrade for any of your domains we are hosting as a free addon, we would also replicate any DNS Zone Records you need as a part of your hosting package.

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.