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.

Adobe Creative Cloud and its impact on Web Designers

Web designers tend to rely on Adobe’s creative software tools. They use tools like Photoshop for image editing and Dreamweaver for HTML editing. Last week Adobe announced a new version of their creative software, but the features and capabilities weren’t the biggest thing on designer’s minds. What caught the attention of most web design firms and individual designers was the new way for licensing the software. No longer would you buy the software outright, but instead you would lease the software. If you didn’t keep up with your lease payments, your ability to use the software would expire.

Web designers have mixed feelings about this. Some are up in arms, equating this to a hardware store requiring monthly payments for a hammer over the entire time you will be using it, instead of simply selling it to you. Others who regularly update their software don’t appear to be as upset.

It remains to be seen if the users who are upset will decide to boycott the subscription model. After all, they have Adobe’s software applications that are working and don’t require monthly fees. If enough users decide to not upgrade, will Adobe be forced to change directions with their Adobe Creative Cloud licensing?

About the author:
Jennifer Smith is co-founder of American Graphics Institute, an Adobe training provider. She is the author of numerous Photoshop Books, and also teaches Photoshop Classes and HTML Classes.

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.

Mobile first web design for information architecture

When people think “mobile first web design” then often thoughts of single column layouts and a simple interface spring to mind. What I really love about a mobile first approach is how it helps to organize the structure of your website and each page within the site.

Thinking mobile first design has enormous benefits for your information architecture. It forces you to think of just those really important elements, and it forces you to ensure that you get those correct. Let’s take a look at what I mean.

Mobile first web design navigation

Unless you want your users to scroll through dozens of navigation items(you probably don’t) then thinking mobile first forces you to really look at what sections and pages within your site are of primary importance.

Let’s look at a few questions you might consider for any specific page within your site.

  • Does this page need to have a link from the primary navigation or can it be a link from within a primary page?
  • Can this page be filtered into a section with other similar pages?
  • What would the section be for this specific page?
  • Does this page warrant a link from a secondary navigation unit?
  • Will a secondary navigation unit be of consistent content on each page or will it be dynamic depending upon the current section/page?

Thinking mobile first for your website navigation will help you to structure all viewport navigations better. You will dedicate time and effort to ensuring that your site structure is correctly formatted for the viewer and gives them easy access to those areas of importance.

A side note to consider:

What you think is important is not the deciding vote, what really is important needs to win. Let me explain…

At our Boston web design company we always sit down with our clients to discuss how we will create a page structure and navigation structure for their site visitors. The discussion usually kicks off with our client giving us their opinions on what pages need to go into what sections, this is great information but really looks at the issue from the wrong viewpoint. We need to deliver a navigation and site structure that makes sense to their visitors not the client, the two are not necessarily the same.

We like to use card sorting as an exercise to give information on possible site structure. Using this technique you will be surprised just how different the results often are when comparing the client data and their customer data.

Okay, back to the mobile first website design approach

Ask yourself these two questions:

1. You have a canvas that is 960px x 700px, what content goes onto that page for your website?

2. You have a canvas that is 320px x 480px, what content goes onto that page for your website?

Now, never ask yourself question one again :) Think mobile first, the content that is important enough to be placed into that mobile environment is the same content that is important enough to be placed in a larger viewport. This also helps dramatically with your content strategy, more on that in an upcoming article…

Your next website project will have a lot more focus if you try a mobile first approach to web design, give it go.

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

Scope Creep

What is scope creep?

It is when the original plan for a web project evolves into something that is beyond what the client and web design studio initially agreed upon. The scope of the project gradually creeps ever outward.

Scope creep is what happens on many, if not most, web design projects if you choose the wrong web design company. The interesting thing is that designers typically put the blame on the client, saying things like “they just don’t understand what that one change they are asking for means”. The truth is that it is the fault of the design studio if scope creep happens, not the fault of the client. The client comes to a design studio because they do not have the skill-set to execute on the project goals, so how on earth can we blame them when they don’t understand something – it is the job of the design studio to help them understand each phase of the project and lead them through the process.

How to avoid scope creep.

Choose the right web design company. It really is that simple.

A good web design company that understands the whole process of the project will guide you at every stage. If you choose a web design studio that promises a custom website tailored to your specific needs for just $500, guess what…you aren’t getting one!

To ensure that the plan for your web project is correct it take time, effort, and skill. Most web design studios can quickly whirl out cookie-cutter websites that look nice, and if that is what you want then you can get one for $500.

What the better web design studios deliver is a truly custom internet presence, tailored to your specific business goals. Not just a pretty face but real solutions to existing problems.

Often clients at our Boston web design company are surprised by just how much time is devoted to the analysis and planning stages in comparison to the whole project time. When we explain the reasoning behind our process they immediately  understand and they also understand that we are delivering a custom web based solution and we will guide and involve them every step of the way.

UX Design – My Comcast Issues

Why is it that things I use every single day are so poorly designed? Why do the companies that have these products not change them for a better user experience? Do these companies not realize that it affects their bottom line? UX Design is important people!

I recently moved house and switched cable provider to Comcast. I am happy with the package from Comcast but I loathe the terrible process of getting what I want out of their service.

Let me start with the remote control. We all know that remote controls by default are terrible, they are the perfect example of something that we all use and yet are overly complex and not intuitive to use. Comcast take this experience a step further by having buttons do one thing in one menu and a completely different thing in another menu. It’s not that the button functionality is dynamically changing to suit the user experience – it’s the complete opposite. You click the “last” button and depending on if you are watching live tv, a recording program, or an on-demand program you get different results. It is just annoying that the user has to learn and remember what button does what in every situation. I mean, it’s a remote control not the nuclear launch codes – make it simple.

Next is the menu of recorded programs. Why do I have to delete each episode individually? Why can’t I just delete all episodes of the program if I want? If I want to clear up space in the DVR it takes a hundred clicks! Seriously, we are all comfortable with being able to delete a folder of content on digital devices if we want to, so let me do it…please.

These are simple user experience issues that can be solved with a little thought, good design, split testing, and evaluation.

Rant over, I have to go record the soccer game…wish me luck!

HTML5 is not just HTML – Part One

It is the big buzzword, “HTML5″.

Everybody wants it…they think, well they are not sure…but you need it for mobile devices right???…don’t you???…anyway, it sounds cool and most clients want it.

Here I will try to give an overview of just what HTML5 is, the pros and cons, and why or why not to use it.

I teach HTML5 training classes at the American Graphics Institute and the first thing I mention at the beginning of the class is, as the title of this article states, HTML5 is not just HTML. You can think of HTML5 as an umbrella term for a variety of web technologies that can be grouped into two main categories; HTML5 Core and HTML5 Family.

HTML5 Core is the new, yet to be finalized, standard specification of HTML. We have had HTML4 and XHTML and now we get HTML5. You may have heard of some of the new semantic tags that have been included such as the <header>, <nav>, <section>, and <aside> tags (there are many more). You may have even heard of the new attributes and input values we can use.

HTML5 Family is a range of technologies such as CSS3, JavaScript, Geolocation, Web Workers, Web Storage, etc, etc… It is these technologies that most people have in mind when they think of HTML5, they think of CSS drop shadows, transitions and animations, and rounded corners.

In this first part of a series of articles I want to write an overview on HTML5 Core, so here goes…

So what’s good about HTML5 Core?

It makes sense! No longer is a web page made up of numerous <div> tags with id’s or classes. HTML has always been designed with structure in mind, it could just never keep up with what developers were asking it to do, and now that structure is coming back with a vengeance.

Let’s take a look at the new HTML sectioning content which includes the following tags:

  • <article>
  • <aside>
  • <nav>
  • <section>

Each one of the above elements will now be used to give defined structure to a page.

The <article> element will be for main page content that could also stand alone as an information piece.

The <aside> element will be used in two ways; (1) to create a traditional “sidebar” with content that can exist aside the main page content, (2) as a “more/related information” piece to the main content.

The <nav> element will be used to define and group links.

The <section> element will be used to define a thematic grouping of content.

Remember that if you want a container just for styling purposes then the <div> tag is still there and still the one to use. These new tags are for structuring content, not layout design (although coupling them with CSS we can obviously achieve both.)

“What’s the point, I can just use <div> tags?” I hear you ask.

Here are a few of my thoughts as to why the new markup is far superior:

  • You are using a screen-reader to read browse articles and your device comes across the <nav> tag. You can now choose to skip this and jump straight to the content in the <article> tag if you want. That would be kinda cool, doesn’t happen yet but it could.
  • You as a designer and developer pay more attention to the structure of your content which can only lead to benefits in the way your content is presented to the user.
  • It makes sense when you look at the code and it isn’t difficult, let go of the <div> and try it!

This was just a soft entry into the world of HTML5 and in future posts I aim to dig deeper into all areas of HTML5, right now however I need to sleep.