Category Archives: development

The era of pixel-perfect is over

If you came into an office like ours five years ago, an early phase of the development process would have involved creating an exact, pixel-perfect model of the page.  You then had a reasonable expectation of seeing the actual web site looking exactly like the mockup.  We’ve had people send us messages saying “move the title 3 pixels over”, and five years ago, we honoured them.

This is no longer an acceptable practice.  It creates unrealistic expectations for the modern web experience.  Now, when you get a mockup, it’s more about showing overarching design principles than exact measurements.  There are several reasons for this change.

Continue reading

Don’t Hide Your Loading

For years, web developers have been driven to try to find ways to mask the performance characteristics of our sites.  We know that graphics are getting larger, third-party libraries are more prominent, and expectations are rising– but at the same time, everyone wants something up in 1.2 seconds after hitting the link.  Get something to load in a hurry, even if it’s not the full content, and everyone will feel like it’s faster.  However, like most “philosophies for web design”, this can be quickly followed from sensible to downright hazardous. Continue reading

The Problem With Building Your Own Website

First off,  I would like to say that I think it is a great idea to learn how to code. It will benefit you in a lot of ways and help you become a better problem solver. However, your first website probably shouldn’t be a website for your company. The website for your company should have one sole purpose: make you money.

The problem with first time web developers/designers is that they learn a lot of cool little tricks and they try to use all of them on their website. They learn how to make a button flash, add a cool gradient, and make rotating slides that look amazing – at least in their eyes.

Everyone starting out does these type of things. I remember when I first learned a few tricks. I thought they were the coolest things ever. The problem was that none of those little tricks help any website make more money.

An experienced design team approaches a new design with conversions in mind. An experienced designer has all the same tricks but knows when and why to use them. Everything added to your website needs to be added to improve the customer experience, not have the customer leave and say “wow, that website was cool.”

So go ahead and learn how to code, but try it out on your personal blog, not your company image.

RWD2014 || Year of the Mobile

Responsive web design is extremely critical in today’s world; it is necessary for survival among the fittest. No doubt mobile browsing has blown up and continues to grow exponentially. There are times where no matter how good a company’s web site looks on the monitor, if it is not “mobile friendly” and the user gets a poor experience, well, the site might as well be deemed no good at all. On a personal level, I can relate to the importance of mobile browsing. For example, after giving someone my business card usually one of the first things they do is pull out there iPhone, and look at my portfolio. If my personal site was not built with a responsiveness to adapt to different media devices and viewports such as the iPhone; and the viewer looking at my work does not have a good experience, this could jeopardize the integrity of my work and in turn, possibly be loosing future customers and contacts. I would like to quote Andy Clarke, web designer, author and founder of Stuff and Nonesense. Andy says, “Anything that’s fixed and unresponsive isn’t web design anymore, it’s something else. if you don’t embrace the inherent fluidity of the web, you are not a web designer, you’re something else. Web design is responsive design. Responsive Web Design is web design, done right”…

Q&A with a UI/UX Designer

For this weeks blog I decided to interview a friend of mine and professional graphic/web designer. 

 Ryan Canfield is UI/UX designer & front end developer at Synapse Studios specializing in web-based javascript applications.


What do you think is one the most important thing as a web designer?   Thinking past static design & layout to consider the web at all screen sizes.

What about the creative process?   We use a repeatable, successful pattern. It starts with sketching, wire framing, mock ups, rapid prototyping and then development .

 How important is the creative process to you?   Very! Synapse didn’t have designers a few years back, it was developers doing front end. Having designers makes a huge difference in the usability of web applications.  Being classically trained as a graphic designer helps me daily in web design. I use the principles of design, like color theory, rhythm, balance etc. these fundamentals are paramount!

What is your outlook on simplicity?   Simplicity depends on necessity. That is one thing designers forget with the web design and graphic design in general. They feel like they need to fill all the space like it is some “hole to fill” esp. junior designers. Question the necessity of everything you include in the design and then question whether is it presented in the best way possible.

What about the the placement of things like “call to actions?”   You want to make sure your main call to action is available and accessible almost anywhere.  If you’re delivering information you want it at the end of that information. It should be the most prominent path for a user to take.

What do you think about traditional web placement i.e. headers etc. and switching the placement of them up, in non traditional ways?   It really depends on the users of the site or app. Sites that have the same user base are better candidates than sites that have mostly unique visitors. Additionally, younger, more techie users are going to figure out the placement of things and are less likely to get frustrated. With users that struggle you probably want a more conservative layout. You have to determine purpose of the site and the target audience. A marketing site is going to be selling products/services, reference website will be delivering information etc.

Any input for junior web designer?   Mobile first approach, responsive design and write clean code!   

 

world wide web banner

A web sites web banner is by far one of the most important area of a site. It is what people see first,  this is where the viewer makes initial visual contact and gets an overall feel and vibe of the site, and ultimately decides if they want to continue on or not. I can not tell you how many web sites I have left due to the  fact they had a weak header. Even though it is the content that matters in todays world people judge books by there covers, and the web banner is the cover. I like this piece of information I found online, it is from a graphic designer and multiple business owner named Dawn Papandrea-Khan. She states, “usually when we visit a website or blog, we can get a feel for what the site represents in only a few seconds. This is the reason why it is even more important to focus on making the right first impression through a custom header graphic.”

As a designer, there are a few key aspects and bits of information I think the header should contain. The company, the product etc. Which brings me to my next point I found in an online blog talking about this exact topic. This is from boostability.com the importance of a header. 

1. Who are you? (You would be amazed how many websites make their visitors dig around to find out the name of the company!)

2. What do you do? (Again, the number of visitors who are forced to assume your site sells a product rather than just talks about it is ridiculous. Be clear!)

3. Why should I buy from you, not the other guy?

The web is littered with garbage, visual noise and a bunch of sites that house web banners that all look the same. It is up to me as the designer to produce clean, visually interesting web banners that represents the sites overall demeanor and entice people to stay on the site and explore further. It is also up to me to find new and exciting ways to display the content  so we can separate ourselves from the crowd.   Also, I feel like in design I have to take risks. I have to try new and “edgy” things and think outside the normal design box that I often get tunnel visioned in. I would also like to explore maybe trying a banner with out the traditional rectangle box, maybe another shape  or placement? That is something definitely for the sketchbook and some thought.

An Overview of Responsive Design

First, a little history. Responsive design is the fourth major evolution in web design.

The first generation of web design, circa 1994, was “full screen width because we can’t do any better”. In this era, you had to build sites to be very forgiving of a diverse and primitive browser landscape, one frequently lacking support for even the most basic HTML features.   <center> and <h1> were hot stuff!  Ironically, it tends to age pretty well, because there’s simply nothing there to age.

The second generation showed up in the late 1990s with table-based design. All of a sudden, you could wrap content in a table, or later, some carefully cantilevered div elements, and have it sit in a fixed-width column in the centre, of the screen. Finally! Some control! Unfortunately, this often led to layouts that were brutally inflexble… comical looking on a big screen, while still forcing people to scroll on small ones. Continue reading

Proposal: Microformats for Easy Mobile Checkout

Right now, purchasing on a mobile device is, frankly, a nightmare. You’ve got your phone in one hand, trying to read the figures off a credit card in the other, and barely able to peck out the data.

Now, there tend to be a lot of over-engineered “answers” to this problem– usually in the form of elaborate new third party systems or complete shopping cart re-engineering. This frequently involves liability-intennsive situations like “we’ll store the customer’s credit card number”, or solutions that only solve the problem one vendor at a time.
Continue reading

Run and Hide! The Upgrade’s Coming!

There’s nothing wrong with responsibly using off-the-shelf software packages. Whether it’s a WordPress blog or a commercial shopping cart, they often represent an affordable way to avoid reinventing the wheel, both from a development and a user-interface perspective.

In addition, many of our clients also find that commodity shared hosting is a fair choice. Face it: if you’re operating a fairly light-weight site that’s getting a few hundred visitors per day, tops, you don’t need that much performance. There’s also a “too big to fail” aspect to being one client of many on a huge machine with a fast connection– odds are, if something fails on their end, you’re the 67th person to report it and they’re already working on it by the time you find out.

However, combining the two can open yourself to surprising difficulties.
Continue reading