From Microsoft’s Metro interface, to Google plus, to the recently redesigned Facebook icon flat design has gone from novel minority to ubiquitous standard in a relatively short time. Is this the look that the web was made for? Or just a passing fad?

A Skeuopmorphic Start

Skeuopmorphism created a sense of familiarity. It grounded things in the real world. The more something looked like its real life counterpart, the easier it was to make a connection with its use and function. “Buttons in reality pop out. So they should look like they pop out on a web page.” No doubt it was also intended to add a sense of ‘richness’ to the designs. “This notebook looks like it’s made of leather” or “this heading has gradients and shadows”.

However, the web is not as young as it used to be anymore. Many of its users cannot imagine a time when it did not exist. Those connections are not as necessary anymore.

Flat Design Sticks Out

It may be hard to pinpoint the exact turning point when we started turning to flat web design and its accompanying minimalist fare, but most point to the introduction of the aforementioned Metro user interface in the popularizing of it.

After years of being perceived as uncool compared to what was coming out of Cupertino, Microsoft wanted something to set themselves apart. Something fresh, different, eye-catching. And in that respect they have truly been successful. It is visually arresting. When every new Android phone looked genetically identical to the iOS offerings, the new Windows OS stood out. Mechanics aside, it was clean and easy on the eyes. But is it a case of what is new is fresh – Like getting a new haircut or rearranging the furniture? Or is this what the web is supposed to look like?

A New Standard or Bandwagon?

Well, flat web design certainly has it’s advantages.  It’s clean, minimalist and uncluttered, if you like that sort of thing. Definitely a boon in the mobile realm where space is precious. Easier navigation and making salient features stand out better can capture the user’s attention. From a design perspective it can also be liberating.

“I don’t have to make this camera icon look like a camera. It can be more stylized – give the impression of a camera.”

Solid matte colours tend to stand out against a monochromatic background. Colour and space are what it uses to highlight and accentuate. And it works. At the end of the day though, it is still a trend. We all thought that Web 2.0 with it’s bubbly buttons was the coolest thing until the cool kids started wearing different shoes. The fact is, only time will reveal if this is more than just a trend.

Flat design is beautiful, clean, and functional. It is contemporary. Will your site look dated if you do not use it? Probably. Will there be more pressure to conform to its style? Definitely. Will this be the de facto standard? Well it seems that it already is.

The post Flat Web Design appeared first on Razor Edge Labs.

If you have a bright design with a white background it’s not so bad.  The problem is that the link ‘s default color is blue and is almost completely unreadable on sites with dark backgrounds.  The worst part is it makes us look bad and not Apple.

So here are 2 ways to fix it.

1. The Meta Tag Option

First step is to add the following meta tag. This will stop all recent Apple devices from turning the phone number into a link.

<meta name="format-detection" content="telephone=no">

The problem with this is that if you like the idea that people can click your phone number and the device will initiate a phone call to you then this solution will totally ruin your day.  Which brings us to option 2.

2. The CSS Option

This option is the one we went with so that we could keep the native functionality of iOS without having it mess with our styles. Basically, iOS adds the text “tel” to the href value. Their phone number links are coded something like this:

<a href="tel:4165168844">416 516-8844</a>

Knowing that we simply target links with the “tel” in the href and, presto, we can style as we wish. The CSS would look something like this:

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

That’s it. Now you can keep you site looking spiffy while also keeping Apple happy. A win-win if you ask me.

The post How to Stop Apple iOS Devices From Styling Phone Numbers appeared first on Razor Edge Labs.

It is easy to think that there is no profit in building websites for non-profit organizations.  The truth is actually quite the opposite.  However, you need to step back and look at the bigger picture with non-profits.  You see, many of them are funded by private donors or by the government and quite often by both. Therefore, their funding does not come in at regular intervals.  It usually arrives in large chunks.  These chunks are usually attached to a very specific set of deliverables.  If you’re services are required to achieve their funding milestones then you are in business.

The Catch

We have learned over the years, a non-profit can sometimes need web work done that does not have any direct funding.  Obviously we do not work for free.  However, understanding the ebb and flow of the funding cycles of non-profits can help us to plan for the lean days.

The Cycle

Most non-profits are thinking about a new year of funding in the early spring, usually February and March.  April is a new year baby!  And with it comes new projects, new strategies, and new rounds of funding.

This means that it is actually in the February and March time period that you want to approach non-profits and talk with them about their ideas for the new year.  You can write quotes and they can include them in their budgets.  Once the budgets are approved and money starts rolling in you are on their list of people to call.  Not to quote…but to get started working.  It’s a great feeling.

Conclusion

A non-profit web design client is a long-term commitment.  They may not always have a tonne of money but when they do they are willing to share it with those who were there during the lean days.  Stick with them, bend over backwards for them when their funding is at a low ebb and you’ll be reaping the rewards in due time.

The post The Non-Profit Sales Cycle appeared first on Razor Edge Labs.

Bootstrap 2.3

A popular choice these days.  With Bootstrap you get a baked in responsive grid system, custom jQuery plugins and LESS functionality – yes batteries are included. Need a cool looking button?  You can do that with literally 2-3 words of code.  A nice looking table?  Easy as pie.  A pop-up modal?  No need to get into the jQuery, just throw in a few cool new HTML5 data attributes and you’re done – it’s that easy.  A common complaint with bootstrap however, (as with other frameworks) is that it violates an old maxim of never mixing style with your markup.  Indeed Bootstrap stylings are not all semantic – especially when it comes to the grid.

With Bootstrap 3 on the horizon, it promises an overhaul to unify the grid into a single fluid one and ridding itself of redundancies of code and classes, but no talk as of yet to reverting to a more semantic one.  We will have to wait and see.

• Pros:  Easy to launch sites.  Default styling is clean and aesthetically pleasing
• Cons: Styling not always semantic.  So popular, sites that use it may start to look all too familiar.

Foundation 4

More of a veteran in this space and it shows.  Many revere Foundation for the greater degree of control one can exercise on the code. It’s quite a robust system utilizing SCSS for it’s styling.   Foundation is taking a mobile first approach with it’s building process, which will accommodate the rapidly changing way people access the web on a variety of devices. A reworked grid.  A handy new feature to get you started is the template.  It can aid in the speed of set up by literally providing a framework of code for several popular site types.  Also the grid brings a welcome change that many have been clamouring for – a semantic grid.  No more style and markup mix up.  Everything is nice and squeaky clean via the use of mixins.

• Pros: Semantic grid system.  Lots of templates.
• Cons:  Mobile first means changing the way you approach construction. New, which means there will be bugs to be worked out.

Conclusion

Well its easy to see why both frameworks are so popular.  The distinguishing marks between both can many times come down to personal preference or needs (e.g. LESS vs SCSS).  It seems that Foundation 4 has really stepped up its game and has some real killer features (read: semantic grid). We here at REL like working with LESS so hopefully Bootstrap 3 responds with equally if not better feature set. In the meantime we will be incorporating a lightweight semantic grid into Bootstrap as a bit of a hybrid (who says you can’t have it both ways?).  But it is imperative to remember that frameworks are used to speed up development  and never to replace the design process.  Good design is a must for any website.  We must let the collaboration between the client and designer determine design and let the coders wrestle with the framework to make it play nice with the design.  Both Bootstrap and Foundation are but a piece of the web design puzzle.  When used properly they can be a huge benefit to web designers and developers.

The post The Framework Wars appeared first on Razor Edge Labs.

Last spring we started hiring more staff and by September we had to move into a bigger office. As our clientele grew and our processes became more sophisticated we realized that our previous website was just not representative of who we had become. Today we are proud to reveal the new and improved REL!

New Website

Our previous website was getting old.  Whenever we looked at it we knew that it was no longer a reflection of Razor Edge Labs and the work that we do.  We had grown, but our website had not.  Over the past 6 months we have been working tirelessly to refine our processes and development philosophy.  We knew that this was the only way to serve our clients properly.

Operationally we have grown far more sophisticated, but our website had not.  It is time for our web presence to catch up with us.  We hope you enjoy the new website and feel free to leave a comment with your feedback or suggestions.

Responsive Mobile Design

It is shocking how many people access the internet with a mobile device.  We who create websites can no longer treat mobile as an afterthought.  It must be a part of every website’s design process.  We teach that to our clients, we preach it to our colleagues, now we can show it off on our website.

Research from Google (PDF) shows that 90 percent of people start a task using one device, then pick it up later on another device—most commonly, people start a task on smartphone, and then complete it on the desktop.

New Staff

Over the past year we’ve also hired a bunch of great people and we’ve been waiting to let y’all know about it.  We are now an 8 person web development agency.  A far cry from the 3 person shop we were last year.  While we have always been focused on our website’s user experience, we are really working hard to improve our client’s experience.  Building a website can be a daunting experience and trusting another company (us) with managing how your business or organization is presented on the world wide web can be scary.  By hiring more people in the design and project management disciplines we can better care for our client’s needs.  This in turn makes our web projects more fun for everyone.  Over the next few weeks we’ll be introducing our new staff members.  Please take some time to get to know them…they’re awesome!

New Office

You guessed it.  What would a new website and new staff be without a new office too!  We love our new digs.  Right in the heart of Liberty Village we are in the hub of Toronto’s design community.  Most of us can walk to work too.  What makes it even better is that we have a bright new place to work together and build awesome website for you.  Check it out.

A lot has happened in the past year.  We have all of our clients to thank for it. We work hard to make their websites work great, look great, and perform great.

The post Welcome to our new website! appeared first on Razor Edge Labs.

Why a shared space?

It is true that a more traditional approach would have been to seek out independent office space with four walls separating us from the next guy.  Where we could hunker down and pump out websites and web applications without the influence of the outside world.   However,  the influence of the outside world is often what is missing from design.  It would be arrogant to assume that our ideas are always best.  The value of sharing space with a multi-disciplinary group of designers who are committed to igniting eachother’s ability to do better work and do it for the greater good is too good to pass up.  In the end, we are confident it will result in better work and happier people.

The space was created specifically for people who are pushing the boundaries of their disciplines and who are actively using design thinking to invent new solutions to social, cultural, environmental and economic challenges.  Being a socially conscious web design agency, we feel that this space is perfect fit for us.   Not only does it give us space to grow professionally, but it surrounds us with a like-minded community of design thinkers.  We are convinced that our participation in this space will increase our ability to provide innovative solutions for our clients and help us to make the web a better place.

The post A Natural Fit: REL joins the CSI Design Common appeared first on Razor Edge Labs.