GOTCHA!

WELCOME TO THE BLOG
CHECK IT OUT!

Tennis Anyone!

We are proud to showcase the new, fully responsive, GSM Tennis Club website (http://gsmtc.ca). They have a beautiful indoor tennis facility in the Cambridge area and sport a state of the art surface to play on that will keep it’s users feeling good while playing on it. It was a pleasure to work with the GSM team and we look forward to seeing the club grow.

Urban Home Launch!

We are very happy to announce the launch of the new urbanhomewindsor.com responsive website. Our good friends at Urban Home Windsor (Furniture & Design Studio) have been in the press a lot lately with winning the Small Business Of The Year award (Congrats again ladies!). We know the previous website we designed for them got significant praise from their clients so hopefully this one will really knock their socks off! It’s totally responsive (mobile, tablet & desktop ready) and the gorgeous imagery provided by Urban really makes this site stand above the rest.

As always they were a pleasure to work with and we would love to continue our relationship over the coming years.

Keep up the great work over there! You guys rock 😉

Good Luck Velle!

Launch days can be crazy but are always rewarding! Today we launched a fully responsive website for our newest client, Velle Technology (velletechnology.com). Velle Technology provides applications for students and administrators on college and universities across the globe. Their latest product, HappsNow, connects college students to every event on-and-around their campus through easy-to-use, real-time event calendars. The free HappsNow app engages the entire student body by making student organizations more efficient in promoting their events.

We hope you like your new look and we want to wish you the best of luck in your pitch meeting today!

Let’s Talk CDN (Content Delivery Network)

Here we go…another web acronym that you should know.

Content Delivery Network (CDN) is an essential way to optimize the performance and availability of your website. In a nutshell, a CDN will provide multiple sources of your website files located on servers all over the world so they are closest to the user accessing them. This means that the user will be issued the site at lightning speed because the CDN will determine which location to issue the files from.

Here’s an example – Say your website files are hosted on a server in Toronto and someone is trying to access them from Los Angeles. They will have pull across the country to gain access to the files which could cause slower load times for your content. If your site was on a CDN then instead of trying to access the site from the server in Toronto, the CDN will make an assessment based on location, availability, cost, and other metrics so it can point them to an optimal server that will issue the site much quicker.

Some of the amazing advantages of a CDN are:

  • Better Performance
  • Increased Availability
  • Cost savings for high volume traffic being offloaded on localized servers
  • Isolation of attacks to localized servers

A Content Delivery Network is becoming essential to the user experience for global websites and multinational corporations who have access points across the globe. Hopefully this helps you understand the benefits of this service and how it might help your organization.

Sparkles From Above Charity Website Launched!

Our friends at Sparkles From Above (http://sparklesfromabove.com) have recently launched their fully responsive website that we designed for them. Sparkles approached us for a responsive site that would help promote their very worthwhile event called the “Parking Lot Battle” (http://parkinglotbattle.com) which is a 3 on 3 road hockey tournament that the proceeds support helping families who are dealing with childhood cancer. A very important cause and hopefully the new site will get them more donations and help organize their upcoming events even better. Good luck to you Sparkles! It was an honour to help with your worthy cause.

How About Some Video In Your Web Design?

You’ve most likely seen that full-screen video backgrounds are gaining popularity in modern web design. Web speeds are up, browser technology is advancing, and acquiring HD video has become much easier. Since this trend is on the rise, I’d like to review some aspects of background video in web design.

Many businesses are incorporating full-screen videos into their design but not every project can benefit from this server-intensive design technique. A proper setup paired with careful attention to detail is required for full-screen video backgrounds to have an effect on overall design layout and branding.

Keep it Simple

If your video is being used as a call to action then I suggest you keep it simple by creating more contrast between the text on top of the video. The video should be either darker with light text or light with dark text. This works the best for the message not to get lost in the movement. This will also help lower the file size of the video which will allow it to display quicker to the user.

Mute it!

Video media setup to auto-play has one problem: loud audio. This happens to me all the time and is completely annoying. I really don’t want to hear sound unless I ask for it. I would say if sound is necessary for your video effect then instead of an auto-play background video, I would issue the user a play button so they know sound will come with it.

When users notice a video player on your page it usually waits to be activated. The user can choose whether to play the video or leave it alone. Video backgrounds are set to auto-play, which is great, but there’s a reason why most of them are muted by default.

Save your users the bad taste and mute background videos. Your visitors will be happy you did.

Browser Issues

HTML5 has helped shorten the gap between video file-types but we’re far from a forever solution.

So how do we ensure compatibility with background videos? First we check browser support for native file-types. Can I Use provides an analysis of CSS & JavaScript properties, along with HTML5 elements. We use this to your advantage and remember to aim for a specific audience.

Analytics is especially useful here as we can track which browsers are commonly used and add up the level of support for each video type. Flash video is perhaps the most widely-supported choice if you need to handle legacy versions of Firefox and IE.

But generally speaking aim for the most widely-supported codecs and video containers. H.264/MP4 and VP9/WEBM seem to be the two most popular choices. If your video uses at least one of these file-types then your most likely going in the right direction.

Another very important thing to keep in mind is the size of the file. Your 1080p video might look great scaled on a larger iMac, but is it worth the pain of forcing a video that’s hundreds of MB onto a visitor using a 13″ laptop?

Unlike traditional JPEG backgrounds, videos have a more natural method of scaling. Even with a reduced file-size your video should still look pretty darn good. So for video background usability the two most important things are proper file-type and reduced file-size.

Keeping in mind these aspects for your video backgrounds will see your bounce rate decreased and the “WOW” factor increased.

Actio New Website Launch!

Actio Corporation, our trusted client and good friend has recently launched the new responsive website we designed for them. We are so excited for you guys and look forward to your continued success in compliance and risk management software solutions. If you’d like to read their official press release for the launch of the new design you can do that here.

Congrats again and we love you guys 🙂

Waratek Launch!

Congratulations to Waratek (waratek.com) on the launch of their new responsive website! It was a true pleasure working with you and we hope the best for you in 2015.

Flat Web Design is Hot in 2015

So you may have heard the term Flat Web Design – here’s what it means:

Flat web design is really a minimalists approach to designing to optimize load time and viewing for a user. This requires a designer to provide super clean HTML & CSS, utilize low resolution images (or none at all) and to shy away from things like gradients, high impact backgrounds and complex javaScript. Designers use font icons because of their scalability and low resolution as well. All of this makes for a super clean and very easy browsing experience for the user.

One of the design trends to look out for in 2015 is Flat Web Design due to it’s ability to load a page furiously quickly and display the content in a clean and legible manner. This is what users are craving for on their mobile devices. They don’t want to sift through complex elements that should be exclusive to the desktop browsing experience, they want to get to their result as quickly and easily as possible. If the result means they have to read something then you better make sure it’s easy to read on even the tiniest phones – think Derek Zoolander 😉

Flat web design in alignment with a responsive foundation is truly the optimal user experience for 2015 and you’ll be hearing clients talking about it and huge companies migrating to it very very soon. Apple and Microsoft are on board so….Check back for more on the subject very soon.

What is Responsive Web Design?

So if your here, you’ve heard the term but aren’t quite sure exactly what it means and why it’s important to you. Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience (easy reading and navigation with a minimum of resizing, panning, and scrolling) across a wide range of devices (from desktop computer monitors to mobile phones).

Doesn’t that sound nice?

It is nice and awesome at the same time. So why is this important for your business?

Because your users expect this now and when presented with anything else, they get a bad taste in their mouth and outright leave. Why should I have to pinch and expand to try and view what I’m looking for? Know-one wants to fight with a website to view it’s content comfortably. You should provide me with optimal viewing on all my devices. 2015 is here and it’s the year for responsive web design. All websites should be migrating to responsive and with an increasing user demand for it you will see just that happening.

The way we used to try and display a site optimally on all devices was to detect which device was viewing it and then spit out specific code for that device. Can you imagine how difficult this is? It was fine in the beginning when there wasn’t that many devices to design for, but nowadays it’s impossible to do this because of the multitude of brands and sizes. Responsive doesn’t detect the device at all really. It detects the size of the browser instead which means it doesn’t care what you are viewing it on but what resolution you are viewing it on instead. Ah..now we’re talking. Now we only have to design for a certain number of display resolutions (breakpoints we call them) and it will show nicely on every device. You can literally drag the corner of your browser and shrink the page smaller and see the website resizing in real time. You can try this right now with this website if you want. It’s really cool and very friendly to the user.

We obviously love responsive web design and how it helps with the user experience. I’m sure we’ll be talking quite a lot about it this year so stay tuned for more on the subject.