Fluid-Blog: Web Design Blog

CSS Mastery: Advanced Web Standards Solutions, by Andy Budd is a great introduction to coding “POSH” standards based websites. This book covers all the basics and some more advanced techniques in how to use CSS effectively. It also educates the read on some key pitfalls that you will run into with various browsers.

At a Glance
This book covers:

• foundations
• understand the basic visual formating model
• background images and image replacement
• styling links
• styling list and creating nav bars
• styling forms and data tables
• layout
• hacks and filters
• bugs and bug fixing
• and 2 case studies to learn from

My Thoughts
I really enjoyed this book and use this book on a regular basis. I think this book is more geared for the designer and should be in the bookself of any modern web designer. It is an easy read and the case studies are very useful. While this book doesn’t go into super detail on everything it does cover all the bases and is a good primer for learning about CSS.

Rating
I rate this book 5 of 5

I was thinking about creating a simple library application that would allow me to store the following:

• Title
• Author
• link to amazon or such
• rating
• link to review
• read status (read, reading, not read)
• sorting
• Category

I think that at first i will just write this as XML with an XSLT controlling the layout and some CSS. I will also look to make this a RSS Feed just so that I can learn that as well. Eventually I would like to create this with a backend administration and also try this out with Apollo.

A list apart is currently conducting a survey to get an understanding of todays web market. It focuses on a series of questions related to your current job position and location. I think that this will be a great resource to get a feel for what web designers are currently getting paid and also a great way to see the trend in where they are headed in the future.

If Your a web design and would like to take the survey head over to A List Apart’s website and take the survey

In the recent years flash has come under fire from accessibility and usability experts. I feel that flash gets a some bad wrap. While some of the arguements are valid I don’t feel that we should just opt to not use it.

I thought that I would highlight some of the good aspects and missconceptions of flash as well as some of the new technology that has some serious potentail to contributing to the future of the web.

When looking at when to use flash you should look at a few things.First you have to look at what is the value of using this technology. here are some great examples of when flash would be a great solution to use.

Integrated video: this has become a huge selling point for flash with its high ubiquity on browsers and now with flash 8 it is unparreled in what it can achieve with video. Some of the great features for video in flash are alpha transparency( for using blue screening and green screeening), skining the player with your own style, custom shaped video so you are not tied to a specific form factor, flash overlay to add aditional functionality to the video.
Interaction: Another one of flashes strong points is its ability to create interactions with your users. Don’t under estimate the power of being able to think out of the box with interaction. This is a great way to visually show your users presentations and how stuff works. Also with its powerful scripting language you could also provide complicated equations and graphs to illustrate your point. You can also update those results without refreshing the screen.

Shattering myths
Flash can not use the back button
In flash you actually can enable use of the back button. Application developers in flash will often leave this feature in active as it can actually confuse the user in complex application.

Deep linking
Many people don’t believe that you can not have a link to a section within a site using a url. this is actually false and it has been for some time now.

Meta is the little bit of hidden code at the begining of each page that tells the search engines what the page is about. It is import to fill this information out completely. In this post I will go over some of the basic info that you will need to put into your pages.

The Title tag
When creating a title you should come up with a single sentence to discribe the content on the page. You should also think about what keywords you are targeting on the page and try to use those as well in the sentence. Lets look at an example.

say we use my site as an example Fluid-logic. If I wanted to create a title tag for my services page it would look something like this:

“Fluid-logic offers a full line of web design services, ranging from custom designed webites to ecommerce.”

Notice that I used the name of the page, the name of the company, as well as featured some of the top keywords on that page. Over all this is a very easy section to write don’t over think it.

there are two location to see this tag. One is in the top of your browser when your on the page. Another location is on a search result that shows up in a search engine such as Google , Yahoo, MSN, ETC. In the search engines this is the linked text heading for your page.

Meta Description
This is similar to the title but you can go into a bit more detail. This discription is what shows up under the page title in the search engine results. When creating this section you should look to provide the user with a little bit of extra detail about the page.

meta Keyword
this is a list of both keywords and phases that are found on this page. The should be separated by commas and the search engines use these to help determine what the content is about.

So you want to have a website for your company or for yourself here is a few things that will make the process a bit smoother.

First and foremost content. On the web “content is king”. When creating a site nine times out of ten the thing that holds the project up is the content. So when you are ready to have a site designed get you content together as soon as possible. Here is a brief list of content pages that most sites have: Homepage, about, contact, and services to name a few. It is best to get the content to your designer as soon as possible.

Design provides your content with a mood and can convey professionalism and trust in a site. When thinking about what your site should be you should ask yourself some questions:

Is this site an informational or a sales site?
This will dictate how your site is structured. A sales site such as an ecommerce site should funnel your users through the check out process. On the other hand an informational site can be better suited for browsing and so its structure would be different then that of a sales driven site.

What do you want the look and feel to be for the site?
do you want the site to have lots of smooth edges or sharp hard lines. It is important for the designer to know your taste. Also note that you should be doing market research to determine what the trends are in the industry so that you can make an educated choice in the matter.

What colors do you want to use for the site?
Color is a very important part of your website. Work with your designer to come up with what colors you should use for the site. Some things to think about are using contrasting colors for backgrounds and text so that the text is easy to read.

This should get you on the way to a great web site. The key to having a great looking website is not only a great designer but also putting the time into developing the sites structure and function. The old saying you can’t shine ” ” holds true in that a designer can only take poor content so far.

It looks like adobe will be releasing a revision to all major applications including: Photoshop (now with two versions), Illustrator, InDesign, Flash, Dreamweaver, Contribute, After Effects, Premiere Pro, Soundbooth as well as other minor releases. I am excited to finally get my hands on the intelmac versions of all this software.

One interesting app is the Adobe Device Center which allows developers to test for mobile devices. This should allow developers to better support web development on the mobile web.

I will make updates to this section as the information becomes available.

This is another interesting implementation of flash that is similar to SIFR (flash based text replacement). It allow the designer to implement and combine a small group of image filters such as rounded corners, borders, drop shadow as well as allowing users to scale images within an elastic image. It does all of this in a light weight script that degrades gracefully.

I really like to see these unconventional ways of using flash. It really gives flash a new life even with web standards based designers and search engine optimizers alike. Flash does not have to be a resource hog that takes forever to download and can really bring some extra punch to your design.

Another great use for this is with in a content management application so that you could use CSS and SWFIR to dynamically alter all images with a give tag very quickly and unobtrusively to the editor.

Over all I really like this application. I think that this is a great addition to any web designers arsenal .

Well now old news I thought that I would write a bit on my take on the iphone from a web designers perspective. As I am sure you know Apple has released the iPhone its next generation devise that they are looking to hit a home run with. So why should we as web designers care other then now we don’t have to to carry both a smart phone and an iPod around.

One of the best features it boast (in a web designers eye) is the safari based web browser. The thing that makes this a bit different from other web browsers on mobile devices is that it is a fully featured web browser and can display the pages as a whole. Now I know your probably saying well that is no good because who the heck can read it . That leads me into why it is so different. It allows the user to be able to select a region of the web page and zoom in and view just that section. the user can then pan and scan around.

So what does this mean to us as web designers. First off this does make for slightly easier development for the iphone. The main thing that this technology does which is why I am excited is that it pushes the envelope of the mobile web. By doing this I see other mobile companies following suit and delivering more rubust support for there devices and a renewed interest in high speed connection. It also brings the mobile web back to the forefront of the consumers eye.

“Don’t Make Me Think by Steve Krug is a great introduction to web usability and usability testing. Steve Krug is a well known web usability expert and has a great low tech way of explaining things in this book. This book is geared toward web designers and web owners alike. While it does focus mostly on ecommerce site the principles are universal and easy to understand.

This book covers a wide verity of site pitfalls and stumbling blocks that sites have had. He does this by illustrating on sites that for the most part have gotten it right but these are the little extra things that will push them even farther along the road to a great usability with there users. Steve Krug brings his years of usability testing to this book in short easy to digest chapters. he keeps you interested with his short jokes and anecdotes that I found myself laughing at more then once.

Whats in this book
This book covers
How users really use the web with examples of what a user will see on the page and also covering different ways that users will navigate your site.
How to design a web page for scanning instead of detailed reading.
Why a user likes mindless choices and how to cater to your users by making what they want easily findable and at their fingertips when they want it.
Copywriting do’s and don’ts covering how to write copy that will keep your users interest and get them to where they need to be.
Designing navigation
Homepage design
User testing covering both how to conduct your own user testing and also how to justify user testing.
Accessibility thru CCS and webstandards
What to do when the client or your boss wants you do something that you know is not good for usability.

Verdict
This book is a must read for and web designer, developer and is also well within the reach of website owners. I highly recomend this book because it is an easy read which was also one of the authors goals. It is under 200 pages and could be read within a week or two.
Rating 5 out of 5