Communication

Communication is key in any business. You must listen to your client, and you must know how to get your point across as well. Listening can be difficult. You may already have ideas in your head that get in the way of what the client wants. Work at clearing your head and really hearing what they have to say. It could be that your client is not a good communicator. In that case, you may need to be armed with ways to extract the information you need. Make a list of questions that the client will need to answer. Help them understand what it is you need from them in order to make their website a success. During the development of the site, be sure to keep the lines of communication open. Don’t wait until it is too late to find out you are on the wrong track.
Find out how to best communicate with your client. Some people are easier to contact by email. Or maybe a phone call is best. Your client may want to meet with you in person occasionally to get updates, or maybe they don’t care to see you till you are done. Find out what your client expects, then do your best to deliver.
Keep your communications professional and to the point. Do not get lazy and forget to let your client know the status of the project. Keep them informed and in the loop. Hopefully, by employing these tips, you will save time and money by completing your client’s website in a timely manner.

Responsive Web Design

I recently read the book Responsive Web Design by Ethan Marcotte.  The idea behind a responsive web site is to make the site viewable on any size device.  That may be a desktop, a laptop, an iPad or an iPhone, to name a few possibilities!  I think this is a fantastic idea.  Why wouldn’t you want your website to be viewable as many ways as possible?

I was given a project idea and was asked to make it a responsive website.  First, I made a wireframe using the 960 grid layout.  This gave me a base for figuring out the percentages of various components of the website.  I designed the page which would be for a normal-size computer screen first.  To make the layout flexible, I converted pixels (fixed width) into percentages (flexible width).  This is done with a very easy formula ….target / context = result.  The target is the size you want to have, the context is the size of the containing element, and the result is the number you will use to make your layout flexible.  I  converted font, elements, images and media sizes from fixed to flexible sizes.  Once the main page was designed, I added media queries for the various view-port widths (also called break points) of devices.

It is pretty cool to see how this works with your own site.  I know I’ve run into many sites that are not responsive.  You end up having to scroll to see the whole page, or maybe you can’t even make the page operate.  This can be very frustrating for the user.  I can see how important it is for a website to be responsive in order to deliver a good experience to all users.  I would recommend this book to other web developers.   Check out the screen shots below of my page at various widths, or give it a try yourself using my site.

http://inetstudent1.francistuttle.edu/jh0916369/discography/index.html

Desktop

iPad

iPhone