Blog
Re:Build Indy Conference 2011
Last Friday, I had the pleasure of attending the Re:Build Conference 2011, a web design and development forum held at the Harrison Center for the Arts. It was definitely worth the investment and I highly recommend attending next year. It brought in people from all over Indianapolis, Indiana, and the mid-west. The caliber of speakers was phenomenal and I was able to make some excellent contacts with other designers and developers. Here are a few major impressions that I picked up from the conference:
I was inspired by all of the beautiful slides paired with the presentations, and in particular, Jan Cavan went the extra mile to create gorgeous slides that made a huge impact on her audience. Since I really have no words, you can check out her slides here. I have included one slide to whet your appetite.
Ethan Marcotte was also a presenter and raised a few great points about responsive web design:
1) Design the mobile version of the website first. You never know what kind of device your readers are using to access your website, so focus on the smallest screen and narrow the information to the bare essentials. If it is not useful information to the user then why is it there?
2) You should never need to create a guide when designing a mobile app. It should be completely intuitive for the user.
3) This was more from my own response to the lecture, but appreciate good developers. We need more of that talent in Indianapolis and if you have a strong developer who is engaged in creating responsive design then treat them well!
There was also humor during the conference, especially from both Neven Mrgan (Panic) and Brad Colbow (Illustrator). In particular, Neven encouraged designers to work a day job, but also have fun side projects that stimulate creativity. Work enables fun and fun enables work = Furk. Fortunately for me, I Furk all day long no matter where I am.
Final thought, limits and boundaries make good design. We all learned in art school that you can’t use every tool in photoshop at the same time, but once you are working on your own, it can be intimidating to think about the endless possibilities of design. Create rules for each project you are working on. My advice to you (and myself) is to do what you are good at. Perfect your own style.
Overall I could not have been happier with attending Re:Build Conference 2011. Now that I know how beneficial it was I will do a better job next year about spreading the word.
Favicons
I have recently been struck by how many websites I come across that do not have favicons. What is a favicon? you might ask. A favicon is a small symbol (usually a company’s logo) that is included on the tab of a web browser or the symbol next to the name of the website in a favorites menu. It is a way to display the company brand next to the title of the website. For example, the Twitter website uses its bird logo for its favicon.
The most shocking part of missing favicons, is that in many cases it is very large and reputable companies that have not taken the care to include a favicon on their website. This decreases the professional image of the site as well as harms credibility. It is the little details that matter.
Here are the basic steps for including a favicon when you are developing a website. Since I typically use Word Press when developing, that is how I will show you the steps.
1) First, create a favicon image in Adobe Illustrator. Make it 72×72 pixels to begin with. Like I said before, this is usually a company logo.
2) Next, export the favicon as a 72×72 pixel PNG.
3) To create the ICO version, upload the PNG to http://tools.dynamicdrive.com/favicon/ and click the boxes “Merge with a 32×32 desktop icon” and “Merge with a 48×48 large XP icon.”
4) Click on “Create Icon.”
5) Once it is complete, click on “Download FavIcon.”
6) Now you will need to create a Plug In for the Favicon on your Word Press site.
- When you are in the dashboard area of the Word Press site, click on “Plug Ins” on the left hand bar.
- Click on “Add New.”
- Search for “Favicon” and choose “All in One Favicon” then “Install Now.”
- Once the Plug In is installed go to “Settings” on the left hand bar.
- Also on the left hand bar, click on “All in one Favicon.”
- From here you are ready to create the various files and upload them to the Word Press site backend.
7) Use the ICO favicon file that you downloaded in step 5 and upload it to the “Frontend ICO.” You can copy and paste the link into “Backend ICO” as long as you want it to look exactly the same on the backend. If you want the backend to look different, such as creating a black and white version of the Favicon, then create a new AI file and begin from step 1.
8) Next, create a PNG version. Open the original AI file of the favicon and “Save for Web & Devices.” This time change the dimensions to 32×32 pixels and save as a 24-PNG.
9) Upload this file to the “Frontend PNG” area on the Word Press site. Again, if you want the Favicon to look exactly the same on the backend, copy this URL to “Backend PNG” as well.
10) Create a GIF version of the Favicon. Go back to the AI file and “Save for Web & Devices,” this time as a GIF with dimensions of 16×16 pixels.
11) Upload the GIF file to the “Frontend GIF” and “Backend GIF.”
12) Finally, create an iPhone version by opening the AI file and “Save for Web & Devices” with dimensions of 114×114 pixels, 24-PNG.
13) Upload this file to “Frontend Apple Touch Icon” and “Backend Apple Touch Icon.”
14) Be sure to “Save Changes.”
That wasn’t so hard, was it? Increase the professionalism of your website design by always remembering to include a favicon.
