Category: Uncategorized

Why you should write mobile first CSS

I have seen so many responsive website designs which have been created by taking a desktop/laptop design and then adding CSS media queries to the end of the stylesheet to deliver a responsive solution. Doing it this way means that you are negatively affecting your page load times. Let me explain…

If your user accesses your website with a mobile device the first thing the browser does is work through all of the large screen CSS rules and then works through the relevant media queries to deliver the correct styling. Because the large screen CSS is often a lot more complex you are having the mobile device work through all of the desktop CSS code for no reason only for it to be overwritten, again with lots of code, to deliver the mobile styling. You end up with multiple large sets of CSS fighting against one another.

The old desktop first approach meant that the image would be downloaded on a mobile device and then ignored!

Instead you should write mobile first CSS. Use these mobile first CSS rules as a base style for all devices. You will be pleasantly surprised just how little code it takes to create your mobile/base styles. After your base CSS comes the media queries for your larger screen sizes. Using this approach, if you have large background images for desktop styling they will only be downloaded if the user has a desktop (the old desktop first approach meant that the image would be downloaded on a mobile device and then ignored!)

If you have your mobile styles first, and the large screen media query styles last, in your CSS file then the mobile devices will never have to work through all of the redundant desktop only CSS. The media query criteria for the desktop styles will be not be met by mobile devices and therefore will not be processed.

Using a mobile first CSS stylesheet the page load goes as follows:

For mobile devices; loads only the mobile CSS code and ignores any desktop styles in media queries.

For desktop devices; inherits the base CSS styles and then applies the correct CSS based on the media query criteria.

Next site you build try putting your base CSS styles at the beginning of your stylesheet and wrap your large screen styling in media queries at the end.

Logo Design Tips 101

When we design logos for our clients we focus on a few things. In this logo design tips article you will see just where our focus is, our process, and how to achieve results time and time again.

Here are our logo design tips (thankfully not 101 to remember!)

  • Keep it simple – use just one element of the logo that is the focal point.
  • Ensure it renders well for all sizes – how does it look on a business card or on a billboard?
  • Make certain it reflects the character of the company – no muted tones for the Latin Salsa School.
  • Research – don’t skip this step…ever! – know the company you are designing for and their customers.
  • Close down the computer – I know it hurts but trust me, get out that pencil and paper you used in school.
  • Use a mind map to get ideas – don’t disregard anything at this stage.
  • Sketch anything and everything – they don’t have to be good sketches, just lots of them.
  • Keep it simple – did I already say that?

Our tips on the logo design process

We start off by meeting up with the client and get the discussion flowing about just who the company is. We have an initial logo design questionnaire that we send prior to the meeting so that the client has an idea of what we need from them early on.

It might come as a surprise to many but one thing we do not discuss is colors. All elements of the logo are born out of the work we put into the design process, nothing is decided at this stage, not even colors. We want to know the character of the company and the image that the client wants to portray. Are they conservative and strong, vibrant and outgoing, or wacky and wild? What type of business do they operate? What services and/or products does our client offer? Are they a new company or have they been in business for years? How will the logo be used? Etc, etc…

There are hundreds of questions that can be banded around at this stage but it all comes down to trying to understand the client, their business and their customers.

From these discussions we typically spend a few days researching the world that our client operates in – more ammunition for the stockpile of data we are putting together.

We will brainstorm and mind-map, not discarding anything at this stage, to see where the key words take us. Usually a theme or two starts to develop at this early stage and so it is imperative that we have our sketch pads to hand at all times. Constantly creating thumbnail sketches allows us to express our ideas and thoughts without concerns of questions that get in the way at this stage, such as “does this logo design accurately reflect the values of the client?” or “does this logo design indicate to the viewer the type of business that the client offers?”…right now we don’t care! It is all about output, get some ideas out on paper. Yes paper! Not Illustrator or Photoshop but a sketch pad with no wires and no battery. If you spend more than a minute on the sketches at this stage then you are taking things too seriously. This is just to see what springs to mind and find out where you are flowing.

Logo design top tip: Turn off the computer and use a pencil and paper!

Now it is time to iterate on some of these thumbnail sketches, there are usually some strong contenders at this stage and taking them and running with them can often uncover a concept that was previously hidden away.

Start to simplify the ideas, narrow it down to several that have promise and then open up Adobe Illustator and create black and white vector graphics. Still no color!!! It’s the shapes, the lines, the text – think about all of the iconic logos that you know in an instant, they would be just as recognizable in black and white.

Simplify more, expand the concepts and ideas, explore. Be aggressive is stripping away elements and slicing through existing elements that you believe should remain – you will be amazed at what can turn up.

Okay, at some point you will hit on a design that you cannot think of how to improve it, anything you do with that design just detracts from the original quality. This is the logo design that you have created that was always there, always the right choice, it’s the right logo. Oh happy days!

Now sometimes you have a couple of logos that are really “right”, that’s fine – it becomes a battle of the giants and the clients can only win. Often we present just a single logo to our clients, and sometimes the response is “we would like to see three different ideas” – a reasonable request, especially if we were a “logo factory” all you can eat for $175. Here at Boston ID we create everything with a purpose, we do not just churn out ideas. Logos are developed just like a full web application is developed – they are not pulled off a shelf and we do not have a bunch lying around that we can swap the names out on.

Presenting to our clients the workflow of how we got to that single logo design puts them at ease and they then realize the other two ideas that we could have brought with us would only dilute the “right” one.

Sometimes we present a few, sometimes two, often just one. We have yet to present none…thankfully!

Getting to the perfect logo is sometimes a real pain, often fun, and always rewarding.

About the author:

Glenn Hodgkinson is a published author for Digital Classroom Books and teaches Photoshop Classes at the American Graphics Institute.

New school website launched for Foxcroft Academy

“Thank you. The web site is awesome and I am very glad that we are working with you!!”

The above quote is from the Head of School at Foxcroft Academy after the launch of their new website that we designed and developed. A great quote and one we are very proud of and thankful for. When I first read it I thought that it would be just as apt if we had said it to them because Foxcroft Academy are an amazing client; smart, trusting, and involved.

The new school website launched with over 600 pages of content! There is an array of articles, videos, images, Twitter feeds, calendars, and directories, as well as all the school information pages you would expect. Foxcroft does not stand still, every day there is new content being posted to the site via the content management system that we installed. Take a look for yourself by visiting http://www.foxcroftacademy.org

A quick note to the staff at Foxcroft Academy from Boston ID: “Thank you. The web site is awesome and we are very glad that we are working with you!!” :)

Oh, almost forgot here is another quote from Foxcroft Academy, this time from the Academic Dean (you really should follow him on Twitter, he mentions really cool things and we like him a lot!)


 

 

Website Content Strategy – another “less is more” article…

So you have a brand spanking new website and it is empty and ready for you to populate it with content, what do you do now? What is your website content strategy?

The first thing you should to is fire your web design company! It’s true, if your web design company has designed you a beautiful new website without knowing what the website content strategy is then you have problems. Ever heard the phrase “a Silverback doesn’t fit into cat carrier”? That applies to your website.

A web designer needs to know what the web content strategy is BEFORE  they think about designing that content. Makes sense right… Another phrase to drive it home, “don’t put the cart before the horse.”

There are so many design agencies out there  and they are clamoring for your business, all trying to undercut their competition on price, all offering quick deliverables. You have to ask yourself if you want a web design company that creates bespoke solutions to your needs or you want an answer off of a shelf.

At our Boston web design company we love clients that want a custom solution, that want us to understand who they are as a company, and understand that it takes time, effort, and skill to create a great web presence.

We believe in a mobile first web design approach, this enables us to focus on ensuring that the content is important, no room for fluff – all goodness! The added benefit of this approach is that it helps with your website content strategy, there simply isn’t a gap to throw in “extra” stuff.

Content on your website should either meet a business goal or a user objective. I want to say that again but this time big and bold, ready…

YOUR WEBSITE CONTENT SHOULD MEET A BUSINESS GOAL OR A USER OBJECTIVE

If you have content ideas that don’t meet either of those goals then what does it do? Other than take time, energy, and focus away from generating content that does meet your business and user goals. Use your precious time wisely and keep the focus on what really matters.

Less fluff means that it is easier to manage your content and it is easier for your user to find content that is useful for them (yay, that’s a user objective checked off the list right there!)

 How to create a website content strategy

  1. Have somebody in charge, not everyone – a single person
  2. Know what your business goals are
  3. Know what your user objectives are
  4. Make it an unwavering rule that content has to meet a business goal or user objective
  5. Create a spreadsheet detailing the who, what, when, why, and how of each piece of content (example: Jill needs to create a list of our current services with descriptions in the next 10 days for our services.html page so visitors know what services we can offer them)

Note: If somebody says “hey, can you put this content on our site?”, then ask them “why?” You are not being rude, it is a valid question and you can then ensure it meets the criteria for your web content strategy. This means an answer of “because it looks cool” or “it’s a great image” doesn’t cut it.

Taking control and having focused web content really isn’t that difficult once you set the ground rules. Use the checklist above against your current website to see how your current content stacks up and remember if you are starting a new web project make sure your web design company knows the correct flow: goals > content > design.

About the author:
Glenn Hodgkinson is a web designer, developer, UX evangelist, instructor, and author. He can be contacted via his Boston web design company.