Just another WordPress.com site

Latest

Playing around with HTML5 & CSS3

I LOVE all the new features in HTML5 and CSS3! I created a page using some of the features that are easy to implement now and still allow a website to function in various browsers. (with a few vendor prefixes and IE workarounds)
**I’ve included links to the website at the end of this article.

There are many websites that offer information on browser compatibility for HTML5 and CSS3 so you can begin experimenting with both and have an idea about what features are best to try now and which have little or no support.

A few sites I recommend:

CSS3 Checklist
A browser support checklist providing an overview of the different browsers and their compatibility with CSS3 features.
html5Test.com
Determines what browser you’re using and ‘scores’ it based on how many HTML5 features are supported. It gives you a breakdown of each feature and your browser’s level of support. It has a tab for viewing how other browsers rank as well.
CanIUse.com
Covers both HTML5 and CSS3 and provides a customizable filter to target compatibility info on specific features in specific browsers – you can even specify previous/current/future versions of each browser!


HTML5

I’m excited to experiment with the new features offered in the current HTML5 spec. Especially those related to forms and adding functionality without the need for additional lines of JavaScript. Once implemented with more cross-browser compatibility – you can use these features to make your forms more user-friendly! I did discover that the incredibly simple DOCTYPE declaration for HTML5 didn’t affect my site’s functionality in Firefox, but when I replaced XHTML elements with some of the new HTML5 elements (i.e. header, section, article, footer) I started seeing some crazy things in the browser because I was in version 3.6 – it is supported in Firefox’s recently released 4.0 version.
*While it’s very important to learn how to use these new features – it’s equally important to remember that most of them are still in the experimental stage and you should be cautious about using them on client sites until there is more cross-browser support.


CSS3

So what about CSS3? My favorite features of CSS3 are the ability to use web fonts, gradients and those wonderful rounded corners you get with border-radius. Yay for CSS3!! I also added drop-shadows and played around with the opacity settings on some of my images.

*Something else I discovered along the way!:  You can change the opacity of images embedded within the HTML document with the CSS3 “opacity” property but if you insert an image in your CSS file with the “background-image” property and then try to change its opacity, you will end up changing the opacity of the entire section within which the image was inserted.

A couple of ways around this:

You can create a psuedo-element within the HTML document and then reference it in CSS to insert the background-image. This will allow you to apply opacity to the image, but then provides some positioning challenges within the page.
(not semantically correct, but an option)

Another option is using relative and absolute positioning within CSS to create pseudo-parent/child elements that prevent the entire element from applying the opacity setting. See: ImpressiveWebs.com for more info on this workaround. (thanks @wddatft)


While HTML5 still lacks basic compatibility – CSS3 is fairly easy to implement into your sites now, if you use the new features sparingly and as an enhancement, rather than an integral part of your design. I can see myself using the CSS3 features I mentioned earlier in a lot of my future projects and look forward to playing around with the other features I haven’t used yet.

Here are a few websites I found helpful on HTML5 & CSS3:

CSS3Please.com
A generator where you can see real-time application of CSS3 features.

FontSquirrel.com
Love their @font-face kits!

5StepstoHTML5.com
An overview of HTML5 in a site created with HTML5 & CSS3!


**My Assignment: Create a one-page website using HTML5 & CSS3 – Theme: Seasons


Link to ‘Seasons’ Website:

For browsers that support new HTML5 elements Click here
For browsers that don’t Click here
For Internet Explorer users Click here 😛

Advertisements

Respect in Web Design

There is new talent joining the world of web design and development every day, so how do you stand out from the crowd and keep clients coming back to you vs. someone else?

RESPECT!

You gain respect with both clients and others in your field by keeping on top of the latest technology and standards and producing work that you can stand behind.  But – it’s not all about gaining respect by impressing others with tech talk and fancy websites… It’s also about showing respect for others.  You need to establish yourself as the expert in the field, but not at the expense of discounting what your client or a colleague has to offer.  Not respecting the experience and input of a fellow designer can prevent you from learning invaluable information or tools of the trade that might help you land that next big project.  Not respecting the opinions, desires or input from a client can cost you lots of money in lost contracts!

There’s another aspect to the topic of respect that deserves mentioning:

As web designers and developers, we represent our field through our interactions with others, our portfolios, blog posts, etc.  Always be mindful of whether or not your actions will gain respect for the field or hurt it’s reputation.  Individuals and companies are always looking for ways to save money and many think one option for doing so is creating their own websites, or finding someone who will do it for a nominal fee.  I’m a member of a local and state photography organization that emphasizes the importance of gaining respect for your knowledge and skills and showing clients why investing in your talents is a smart choice.  By believing in what you do and taking pride in your work, you gain the respect of your existing and potential clients and add worth to your product.  If every web designer and developer applied this to their work imagine the effect it would have on our industry!

More on this topic: You Are Not a Robot by Jonathan Kahn is a great article from A List Apart about the perception many have of web designers and how we can improve respect for our field.

Professionalism in an Inter-Connected World!

In today’s age of social networking and open forums, professionalism now encompasses much more than just how you conduct yourself at the office.  We are all inter-connected through social networking websites, blogs, chatrooms, online forums and other forms of media.  Anything you post on the internet can potentially be seen by anyone, including current or future employers, so use caution and common sense when using the internet and always conduct yourself in a professional manner. Here is a great article on how your online conduct can impact your professional career: How social media can cost you your job!

So what does ‘professionalism’ mean exactly?  Here are a few examples on how to conduct yourself online and offline:

  1. Be respectful of all individuals and communities with which you interact online.
  2. Be polite and respectful of other opinions, even in times of heated discussion and debate.
  3. A professional looks, speaks and dresses like a professional. An amateur is sloppy in appearance and speech.
  4. Respect copyright, privacy, financial disclosure and other applicable laws when publishing on social media platforms.
  5. A professional learns every aspect of the job. An amateur skips the learning process whenever possible.
  6. A professional jumps into difficult assignments. An amateur tries to get out of difficult work.
  7. A professional produces more than expected. An amateur produces just enough to get by.

source: Tips for Success.org and article:Acceptable Use of Social Networking Sites

Today’s job market is much more competitive than previous years. Many employers are using social networking sites to narrow down a list of candidates for a position.  They look for examples of character and professionalism in determining who they will hire.  Some of the examples listed above, may be exactly what your next employer is looking for in their ideal candidate – so be mindful of what you post and ask yourself this question: Will you make the grade?

Being passionate about what you do!

What a wonderful gift, to be able to go to work every day knowing you enjoy what you do for a living.  For me, getting up every morning knowing that I get to come to class and learn about something that interests and inspires me is really exciting! Surprisingly, most people never learn what that’s like or even consider it.  Being passionate and enthusiastic about what you do is so important, regardless of what field you choose to pursue.

“Enthusiasm is one of the most powerful engines of success. When you do a thing, do it with all your might. Put your whole soul into it. Stamp it with your own personality. Be active, be energetic and faithful, and you will accomplish your object. Nothing great was ever achieved without enthusiasm.”— Ralph Waldo Emerson

I had the opportunity to take a day to research and explore a topic of my choice for school – Discover what I’m passionate about.. The nature of web design and development lends itself to multi-tasking, so when working on this assignment, I was also working on another project – redesigning a web page.  I love design and am excited to learn everything I can about the different css techniques used in designing web pages.  I know the information and technology of this field is constantly evolving and the newest version of css that many designers are using is CSS3 so I decided to take this opportunity to learn a little about the new version and some of the techniques of older versions that I haven’t used yet.

In CSS3 you can apply drop shadows to objects within your html document, targeting specific browsers (in this case Mozilla Firefox,  Safari and Chrome) – Internet Explorer 8 supports some of the CSS3 properties and IE9 supports most, but older versions do not.  You can also apply effects like gradient borders, border images, rounded box corners, use easier techniques for embedding font, greater flexibility with opacity settings, and much more!  Here is a great site to visit for more info and examples on some of the new CSS3 properties: 30 Exciting Functions and Features of CSS3

A few older CSS properties and xhtml coding techniques that I experimented with in redesigning the web page were targeting pseudo-elements (i.e. first-letter) in the html document, linking to a specific location in the middle of the homepage from another page in the web site, creating a link that opens up an email window and applying letter-spacing to elements in the site.

There’s still a lot to learn and experiment with in CSS and I can’t wait to see what I discover and how I apply it to future projects!

Communication in Web Design

Good communication with your client before designing a site is crucial in making a website successful – from both the client’s perspective and the end user’s.

Most clients will have an image or idea in their mind, as to how their website should look and what it should accomplish.  As a web designer, you need to know how to ask the right questions and communicate your interpretation of your client’s responses to make sure you have a clear and correct understanding of the task at hand.

Some of the important questions to ask are:

  • What is the main purpose of the website?
  • Who is the target audience?
  • What functions will be performed on the site?

We’ll look at these questions in more detail:


What is the main purpose of the website?

(What purpose does this website serve for your client?)

  • an online brochure or portfolio
  • selling a product
  • creating brand recognition
  • provide customer service and support
  • obtain customer information through subscriptions or memberships
  • educational resource

These are a few examples of what your client might be looking for, but typically, a website serves more than one purpose and you need to determine them and set priorities for the website.   Have your client number the goals  identified, according to their importance.  From that, determine where the hierarchical focus will be in the design.


Who is the target audience?

Because internet users view information from such a wide variety of devices and with multiple browser options these days, it is important to determine who your client’s target audience and how they may be accessing your client’s website.  This information is crucial in making sure the website and it’s content are accessible to the right people.


What functions will be performed on the site?

After determining the purpose of a website, you need to communicate effectively with your client to know what functions may need to be performed on the site (i.e. search tool, email subscription form, shopping cart, interactive map, etc.)

For more information on this topic, read the article  Clear and Effective Communication in Web Design by Stephen Snell

“My Homepage is Better than Your Homepage..”

Homepages are important.  We established that in my previous blog.  But, now that we know why and how to make them better (Homepage Design and Navigation), let’s look at a few examples of good and bad design and how all pages, even the best, leave room for improvement.  Some of it is based on personal preferences of the client or their customers and some is based on basic design principles.

“How can design teams be confident their content pages are understandable to users? How does a team ensure they’ve designed content pages that communicate the essential information effectively?” This is a question Christine Perfetti asks in her article entitled:  5-Second Tests: Measuring Your Site’s Content Pages.  I’ve used that “5-Second Test” to review various website homepages and see what works and what doesn’t.

The first site I looked at is Shutterfly.com.

When you enter this site you know this is a company that offers photo printing products such as cards, calendars, photo books, etc.  They provide a good example of their product variety with direct access to specific product categories.  The main goals of this website are to get viewers to sign-up for a membership and to order their products.  Membership information is predominantly displayed with straight forward form entry sections.  Most users do not like entering a site, only to find that signing up for a membership is required to have access to a company’s products. Shutterfly.com, however, anticipates this and provides a brief overview of the benefits of signing up, located within the form section of the page.  This strategy, along with the images included in the design of the homepage, help entice the user to take action and sign-up for a membership.  This website’s homepage is also successful because it is routinely updated with new product photos and features throughout the year to keep the content fresh and interesting and make users want to return to their site.  The only recommended revisions in the home page would be to replace one of the product images with a slideshow of product examples specific to current consumer trends.

Another site I looked at was Flickr.com.

This is a great example to compare the previous site to, because of the obvious difference in design style.  While Shutterfly.com had a clean and organized design, Flickr.com takes an even simpler approach.  They use the white space to focus on a few key areas without any other content.  Although this is a successful mainstream website, I don’t feel like the homepage emphasizes the benefit to users of creating an account in the same way Shutterfly.com does, so my suggestion would be to add a small section giving incentives or benefits that would make a viewer take action and create an account on their first visit to the site.

Unsuccessful Homepages

With the creation of web-authoring software and the growing number of webisodes offering instruction to amateurs on how to build a website, chances are you will come across sites that defy all design and navigation guidelines, if you haven’t already.  It didn’t take long to find examples of website homepages that needed help in both those areas.  Take a look at Photography-on-the-Net.com and InspirationalImages.com and think about what changes you would make to the design and navigation features on those sites.

Let’s start with the first one – Photography-on-the-Net.com

When first viewing the homepage you know it’s about photography, but you aren’t sure to what extent.  Is it an educational site?  Is it a resource for other photographers, or maybe a source for images created by one or a community of photographers?  One thing the site does correctly is include a tagline that explains the purpose and content of the site – but it doesn’t stand out on the page and is only noticed after viewing all the information in bolder typefaces.   I would apply design to that information that draws the viewer’s eye immediately so they know where they are and why they might want to stay on the site and look around.  I would also add images to the page that give an instant visual cue as to what the viewer can access from this site (i.e. photo galleries, forums, industry info, etc.)

Now let’s look at the second site –InspirationalImages.com

You can tell fairly quickly that this is a gallery for an independent photographer.  It has images displayed on the page and a centrally placed content area that tells you about the website and it’s purpose.  Underneath that content area are three links to other pages in the website, but there is no design coding that lets the user know these are links, so your eye wanders around the page, with no navigation cues.  The best navigation on this homepage is positioned below the fold.  I didn’t even realize it was there at first.  The user must scroll down to find it and as you scroll down even further, you find an email subscription option, search bar, articles and much more information most viewers will probably never see because it wasn’t visible in the browser window when entering the site.  This homepage needs to include all important links, forms and tools above the fold, where it can be seen immediately by those coming to the website.

All these examples, give you an idea of the importance of good homepage design and how it affects the success and usability of a website.  When working with clients, web designers need to stress the importance of quality vs. quantity when it comes to homepage content, while ensuring that the homepage contains enough information to attract the attention of those who come to the site.  No company wants to invest time and money into promoting a website that is ineffective.  Getting users to your website is only half the battle – keeping them engaged once they arrive on your site is the ultimate goal.

Importance of Homepage and Navigation Design

Every business in today’s world, no matter how big or how small, needs to have a web presence.  A vast majority of consumers, future employees, potential members/investors, patients, etc. all turn to the web for information that will help them make a decision on what company or business to use for any number of situations.  Once a viewer logs on to a website, your web page has a matter of seconds to engage that viewer and keep them on your site.  A website’s homepage is critical in achieving that goal, because that is where most viewers will make that split-second decision on whether to stay on your site and view your information, or move on to the webpage of a competitor. Here are a few guidelines on what your website’s homepage must do in order to be successful:

Make the Site’s Purpose Clear: Explain Who You Are and What You Do

  1. Include a One-Sentence Tagline Start the page with a tagline that summarizes what the site or company does, especially if you’re new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site’s purpose. It is especially important to have a good tagline if your company’s general marketing slogan is bland and fails to tell users what they’ll gain from visiting the site.
  2. Write a Window Title with Good Visibility in Search Engines and Bookmark Lists Begin the TITLE tag with the company name, followed by a brief description of the site. Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”
  3. Group all Corporate Information in One Distinct Area Finding out about the company is rarely a user’s first task, but sometimes people do need details about who you are. Good corporate information is especially important if the site hopes to support recruiting, investor relations, or PR, but it can also serve to increase a new or lesser-known company’s credibility. An “About ” section is the best way to link users to more in-depth information than can be presented on the homepage.

Help Users Find What They Need

  1. Emphasize the Site’s Top High-Priority Tasks Your homepage should offer users a clear starting point for the main one to four tasks they’ll undertake when visiting your site.
  2. Include a Search Input Box Search is an important part of any big website. When users want to search, they typically scan the homepage looking for “the little box where I can type,” so your search should be a box. [Make your search box at least 25 characters wide,] so it can accommodate multiple words without obscuring parts of the user’s query. (Update: Based on more recent findings, my recommendation is now to make the search box 27 characters wide. This and other new guidelines are covered in my tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.)

Reveal Site Content

  1. Show Examples of Real Site Content Don’t just describe what lies beneath the homepage. Specifics beat abstractions, and you have good stuff. Show some of your best or most recent content.
  2. Begin Link Names with the Most Important Keyword Users scan down the page, trying to find the area that will serve their current goal. Links are the action items on a homepage, and when you start each link with a relevant word, you make it easier for scanning eyes to differentiate it from other links on the page. A common violation of this guideline is to start all links with the company name, which adds little value and impairs users’ ability to quickly find what they need.
  3. Offer Easy Access to Recent Homepage Features Users will often remember articles, products, or promotions that were featured prominently on the homepage, but they won’t know how to find them once you move the features inside the site. To help users locate key items, keep a short list of recent features on the homepage, and supplement it with a link to a permanent archive of all other homepage features.

Use Visual Design to Enhance, not Define, Interaction Design

  1. Don’t Over-Format Critical Content, Such as Navigation Areas You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads, and focus on the parts of the homepage that look more likely to be useful.
  2. Use Meaningful Graphics Don’t just decorate the page with stock art. Images are powerful communicators when they show items of interest to users, but will backfire if they seem frivolous or irrelevant. For example, it’s almost always best to show photos of real people actually connected to the topic, rather than pictures of models.

Source: Top Ten Guidelines for Homepage Usability

Taking Stock

  • What are your web design goals?  To become a professional web designer?  To make personal web sites only?

 I come from a family of entrepreneurs.  I jokingly refer to our entrepreneurial spirit as our ‘sickness!’  Most business owners will tell you that owning a business means you work twice as many hours, for half as much pay.  So imagine my excitement, when I started reading about web designers and bloggers who have created highly successful businesses out of their own homes and now work only a fraction of the hours normally worked in a typical work week!  I would love being able to spend more time with my family (who wouldn’t!?), but back to reality…   As it stands, I don’t know a lot (okay, very little) about web design and development, BUT I have the drive and determination to master these skills and use them professionally – whether it be for a large corporation, local .com company or … yes, that’s right – my own business!

  • Which aspects of web design interest you the most?

I know a large number of people coming into this field, just want to learn how to make ‘pretty web-sites,’ so to speak.  I also know that there are many web authoring programs that simplify the process for the “I-can-do-it-myself” website creator in all of us.  I had that same ambition when I decided I needed a website to display my photography years ago.  What most people will discover (as I did), is just about anyone can create a fairly basic and decent looking website, but those websites are normally based on a standardized format or lack the ‘pizzazz’ and functionality that a truly successful website must have – not to mention the compatibility with all the various mediums utilized by the average internet user in today’s world.

Because I’ve always been a creative soul, I of course, can’t wait to learn all the fun design techniques associated with web design and the technical side of design has proven to be a bit of a challenge for my (apparently non-technical) mind – but I take pride in everything I do.  If I plan to learn web design, I want to learn EVERYTHING  I can about EVERY aspect of it.  I don’t like to put my name on anything that I didn’t put 100% into.  Even though the technical side is a bit more challenging, I also find it very interesting.  Once you’ve learned and adapted your perspective to the behind-the-scenes knowledge of web design and development, it’s a lot like viewing the world through the metaphorical ‘adaptive-lens’ I’ve developed from being a photographer.  Your view of the internet world and every website you view from then on, will be from a brand new perspective! 

  • What current skills do you have that will be useful in creating web pages?
  •  

I was thinking about what skills I already possess that will be useful in creating web pages.  Each student who comes to the WDD program, brings with them, a unique combination of talents, skills and life experiences that will contribute to the type of web designer they become and will influence what path they decide to take after completing the program.  For me, my experience with photography/photo-editing and my marketing material creation and production experience will help with visual design.  My experience with office management and bookkeeping will assist with the organizational aspect of website creation and my public and competitive speaking experience should help give me an edge in a world of tech savvy people who might not have the experience with interpersonal skills that would be needed to work with a broader clientele or in the marketing side of WDD.

  • Which skills will you need to brush up on?

Time management skills related to project completion will be something I hope to improve over time.  I believe the more experience and knowledge I gain, the less of a challenge this will be for me.

  • Which hardware and software tools do you already have for web design?

Right now I am using the necessary hardware and software provided by the campus.   I currently have a desktop computer and laptop with Windows XP operating systems, 320 GB external hard drive, Windows Movie Maker, Photoshop 7.0 and a digital camera with lighting equipment.  Once I’m a little further along in the course I will look into investing in additional equipment and software.

  • Which tools do you need to buy?  Which tools would you like to buy eventually?

While I have access to everything I currently need for WDD, I would eventually like to purchase a Mac, a newer version of Photoshop, dual-monitor setup and additional relevant software.  This of course, doesn’t take into account the multitude of gadgets, hardware and software options I am certain to discover in the near future and beyond!

Journey into WDD

Here I am, entering a new chapter in my life with unlimited opportunities ahead of me. That unlimited potential is mirrored in the worldwide community that has emerged on the internet – what an exciting outlet at our disposal! I entered a web design and development program a week ago, hoping to learn a skill that I could take out into the world and use to provide for myself and my children. What I have come to realize, is there is so much more to this field than I ever realized. The amount of information you must absorb can be intimidating, but the challenge of learning all there is to learn will be an adventure! (and considering the ever-evolving state of the web – that adventure will continue well into the future!) I love that you can take the information and skills you learn about web design and apply them to a career with another company or choose to take an entrepreneurial approach and create any number of web-based businesses. You can also help others market their ideas/products and help them become more successful. With web design/development I can incorporate my creativity and interpersonal skills into a career path that has many outlets. I know my biggest challenge is going to be efficiency, and I hope that the further along I get in this course, the more efficient I will become. Meeting project deadlines is crucial in this field and I am interested to see how I adapt to the faster pace! Life’s challenges are the best lessons!