Design and Development

Author: Caleb Mellas

Caleb Mellas
Profile:
Caleb Mellas is the Creative Director of Webinsation, a design firm dedicated to creating extraordinary websites that meet the needs of their clients. Caleb is passionate about web standards and especially enjoys building responsive websites. When he's not developing websites, drawing Photoshop mockups, or talking with his clients, you'll find Caleb running, strength-training, playing volleyball, or just spending time with his family. You can find him on

Redesigning the Miva Merchant E-Commerce Application

By

Filed under: Case Studies, Design Inspiration, Web Development.

After working with the Miva Merchant E-Commerce app for the past few months, I have been getting more and more frustrated with the overall design and layout of the app. Miva is filled with bold purple, dirty yellow, table-based layouts, non-reponsiveness and hard to read small fonts.

I took it upon myself to reimagine the interface in a more modern, user-friendly way while still keeping to a similar Miva branding. I also tried to stay as close as possible to their overall organization principles so as to not make this project too massive.

I find myself saying: “Why can’t it just be like Shopify or Squarespace?”.

Squarespace Admin Shopify Admin

Maybe I will just switch over to one of those platforms soon, but for now I am bound to Miva.

Read more…

IE9 taught me something valuable today

By

Filed under: CSS, Web Development.

Recently, while working on an app project with one of my clients (MinistrySync – Events made Easy), I discovered some interesting things while testing for IE.

Normally, IE is the bane of my existence, and I have been known to rant and rave about how terrible it is to anyone who still chooses to use it.

Ugly IE9 Logo

But for once, IE actually forced me to learn something very interesting about Sass and the SMACSS to code structuring.

So here I was humming along testing our new app in Chrome, Safari, a few tweaks for Firefox… and then IE9…

Read more…

Flat Design: Some Good, Some Bad…

By

Filed under: Design Inspiration, Web Development.

First off, I need to say that I am a proponent of flat/minimal design when done correctly. Websites that are loaded with 3d skueomorphics remind me of something from the by-gone severely bloated flash era.

Glossy Skeuomorphic Button

Glossy Button: gentleface.com

When creating things with a flat design aesthetic, we need to always remember to focus on our users – not on a popular design trend. So if that gradient or dropdown-shadow doesn’t help the usability factor, get rid of it… but don’t get rid of a subtle gradient or some animation just for the sake of flatness…

Flat design reminds me of the fashion industry a little. Every year a new fad comes out that everyone must wear to look cool and be popular. If you don’t wear what’s trendy – you are outta it man!

Read more…

3 Business Lessons from the Benham Brothers

By

Filed under: Business of Design.

A few weeks ago I was at a conference where twin brothers, Jason and David Benham, spoke on business and how to excel in your field. The Benham brothers, formally drafted by the MLB,  now turned business men have started many companies and have been featured in many publications including Inc. Magazine, Entrepreneur Magazine, The Wall Street Journal and more.

Benham Brothers

During one of their talks they focused on three guiding principles they follow in their businesses that has made them what they are today. I want to highlight these things and show how you can apply them to your work/business.

Read more…

Responsive Design vs. Mobile “m.dot” sites

By

Filed under: Responsive Design, Web Development.

After reading this negative article on responsive design, I felt compelled to write a response.

Responsive Design (RWD) is something I have studied and thought through a lot over the last couple years. It is just one solution to a very complex issue that we face.

That complex issue is the endless sea of devices that are used to visit websites. You have cutting-edge phones that support the latest standards, and you also have old Blackberry’s that don’t have a full-fledged web browser – not to mention large smartphones, phablets and tablets.

Vast sea of web-capable devices

Image credit: Brad Frost

Read more…

What is so amazing about Icon Fonts and SVG’s?

By

Filed under: Responsive Design, Web Development.

The year is 2010, the web world is peacefully floating along…  suddenly everything is shattered as Apple announces the world’s first high-resolution Retina screen.

Designers everywhere are reeling with this news trying to figure out a solution to this problem. Suddenly one designer has an idea – we can create two sizes of all our images and serve them up based on your screen resolution!

The only problem is that not only is maintaining two versions of every image a hassle, but it hasn’t really solved the problem.

The problem is not Retina screens, the real problem is static non-scalable images. It is only a matter of time until Apple or Samsung releases a 4x retina display that will force designers to begin creating 4 versions of every image asset.

Icon Fonts vs SVG’s

What we need are truly scalable vector graphics – enter Icon Fonts and SVG’s. Both of these formats give us a huge step in the right direction of completely resolution independent graphics.

No more creating multiple sizes of your jpg/png images, and serving them up with media queries and javascript – hooray!

Read more…

How to standout in a world of mediocrity

By

Filed under: Design Inspiration.

Last week I went to an Entrepreneurship conference where I heard an amazing talk on excellence by Mr. Gary Powers. Powers is the Owner of Ortho Molecular Products, a company who aims to change the way the health supplement businesses are run.

Excellence: How to standout in a world of mediocrity

Powers says many company’s products are not accurately represented on their labels. A supplement label may say it has Betaine to aid with digestion, but how much does it actually have? Many companies will add just a few drops of an ingredient to a huge mixing container and add it to their label to help it sell.

Power’s company is looking to set a new standard of excellence in the industry. His talk led me to think about how these same principles of excellence can be applied to the web industry. If you are tired of the status quo – business as usual – then keep reading!

Read more…

Flat Design: Trend or Revolution?

By

Filed under: Design Inspiration, Web Development.

Over the last several months, I’ve been reading post after post about “Flat Design”. It seems like every designer is adopting the trend of so-called “Flat Design” and applying it to their work. Even larger companies like Microsoft and Google have followed this “trend”.

Flat Design: Trend or Revolution?

So is “Flat Design” here to stay, or is it simply a passing trend that will be eclipsed by the next great thing to come up next year?

Read more…

The current reading experience of the web

By

Filed under: Typography, Web Development, Website Layouts.

I think most of us would agree that the reading experience of the web is pretty broken.  Whether it’s too many ads and distracting elements on a blog, text that is set to 11px (which is completely unreadable), or even lines of content that have a too long line length – the reading experience of the web can definitely be improved.

Today, more and more things are being read on the web every day. Not only do we visit websites to find out information about a company, but we also read e-books, blog posts, and articles online.

Improving the web reading experience

Over the last few years, we’ve begun to read more things on our smartphones, tablets, phablets, and laptops then we ever read in books or printed material.

One of the great things about web articles and books is that you can access them from where ever you are, at any time and from any device.

Read more…

Typecast Reviewed: A Designer’s Thoughts after Using Typecast

By

Filed under: Typography, Web Development.

A while back I wrote about typography and its importance on the web. Typography and content is really 90% of what the web is; so if you are going to create beautiful, consumable content, you really need to pay attention to your website’s typography.

Traditionally we’ve used static tools like Photoshop or InDesign to design our typography and then we recreate it in code. But this has always been a bit of a hassle when switching from static mockup to code and to an actual browser canvas.

This is all changing with great new tools like Typecast. Typecast is a web app that is built to help us as designers use the browser to design our typography and websites. It gives you access to over 1000 web fonts that you can try out on your live website content in an actual browser.

Typecast – Experiment with Type from Typecast on Vimeo.

After using Typecast for a while, I want to share my thoughts with the community about some of its great features, and where it could be improved.

Read more…