The Select * Blog: April 2016

Tuesday, April 19, 2016

Blog 10 - Favicon, what is that?

Ever notice those Icons that appear in your web browser tabs or web address area? Well that's a Favicon!

These small icons (16px x 16px) are associated with a website and used as a graphical representation of the browser. It's like easy branding.
It's also an easy way to save space on a site, browser, or favorites bar since they don't take up that much space.

Favicon formats have .ico, .gif, .png and .jpg extensions so they can be supported by typical photo editing software whether it be opensource like paint.net or Photoshop. However, if using something other than a Favicon-html kit then you have to be sure to save your file formats with the .ico extension or using type="image/ico" so that all browsers will recognize your favicon as you want.

Most mobile sites don't have favicons or aren't supported. Usually you simply end up with some sort of short cut or thumbnail and these aren't always pretty. However, touch icons are those "pretty" icons that show up on your iOS products like iPhone and iPad that look similar to a favicon but are bigger.

Once you've created a favicon, you simply add the icon to your head elements via <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ > and the browser should render it appropriately.

I'd love to try this out if I have time in one of our upcoming projects. Fingers crossed!!!!

Monday, April 18, 2016

Blog 9 - Semantic Markup

Semantic markup are those "things" you add to your HTML code such as <header> <footer> <body> <div> <spans>, etc. that allow you to one) easily organize your text and two) provide you an easy way to style your design.

Without the use of the semantic markup your page would simply be full of various paragraphs, headers, etc. that would need styling. In order to style those elements individually you would have to either do it inline or create a lot of different tags in order to separate your content for styling.

Additionally, as your webpages become larger, more complex or span multiple pages - you will want to label your sections in order to easily identify them for editing (and also styling).

Last but not least, semantic markup helps with search engines and indexing. Your markups help tell the search engine what your context is and how it should be indexed. And if you've ever worked in web you know how important indexing is to get your content out there in search results or in trying to remove it (which is easier said than done)!

Blog 8 - Experience Design

Experience design, what is that?

User experience focuses on your users - what they need and value. In your design you want to improve the overall quality of the users interaction and how they interact with your products and brand.

Here are a few items to consider when creating your site:

Is the content high quality that users will want to come back to in the future
Does the navigation make sense and is easy to find
Are your page errors user friendly
Users scan, does your page require too much reading

Good examples of websites with great experience design:

www.refinery29.com
www.tumblr.com

I think these sites provide good experience design because the content is credible, easy to navigate and find, its very straight forward and the user can interact with various items on the page simply without too many steps or instructions. The sites are also intuitive which makes moving around the site very easy.

Can a site be developed with both experience design and usability in mind? I think so! The two are not mutually exclusive and I can see that if you focus too much on one (i.e. usability) it could be detrimental to your user experience (aka experience design).

For example, a designer could decide they want the user to sign up for their service as quickly as possible...so maybe they ask for a lot of personal information up front to make the sign-up process easier. Well from a user standpoint that would be really off putting. So many people are leery today of providing personal information online that this would be a major deterrent.

So as they say - all things in moderation. I think when designing you should take both these into account and find a good medium that will provide a fast website with a great UI.

Blog 7 - Usability

What is Usability?

Usability refers to the actual use of a website - not the design or visual aspects of a site but the user experience. Meaning - can they access the site and complete their tasks easily? Key usability issues to consider when designing a site include:

Can the user accomplish their goal
Does it require a lot of effort or focus to complete the task
Is the site intuitive or easily learnabe
Is it simple

One way to really look into usability is to look at usability testing, which provides you with how users actually experience your website or app. Users self report on their ability to use the site by performing tasks they are instructed to do.

I have been part of a such testing for website design in a survey. I was instructed to navigate through different areas of a website and then provide my feedback. In some cases they had me simply look at a section and then try to recall items from the page without any prompting. It's a really great experience and I'm sure provides good feedback to the designers (so long as their test subjects stay focused and on task!)

Here are some sample sites with great user usability:

www.glossybox.com
https://www.letote.com/
www.birchbox.com

These sites are pretty straight forward, I can get to the topics/areas very easily. And if I want sign up for the service its also very simple and straight forward.

Blog 6 - Fonts!

Since the early days of web, fonts have come a long way! Previously designers were limited to just those fonts installed on their own computer. As time progressed, designers could download fonts BUT if the user didn't have that font installed...well then that design aesthetic would be moot.

Now there is the CSS Rule @font-face which allows web designers the ability to specificy online fonts to display on their web pages. This means you can provide your own fonts outside of those just installed on your computer. However, there is still a ways to go. @Font-face since it can decrease performance time and may use fall-back fonts that have other consequences - such as rendering a text transparently.

But I still love this option. Why? Because there's no other way to render fonts to a user if its not installed on their computer. Sometimes a client's default browser faults can really diminish the overall look and feel of your website.

Check out this example of a website using @font-face http://craigmod.com/journal/font-face/. It's a bit overboard but you get the idea of what you can do.

What is WOFF?
Well that's a good question because, I have too, have never heard of it. According to Wikipedia WOFF is, "The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009^[2] and is now a World Wide Web Consortium (W3C) Recommendation.^[3]

WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints."

Not helpful I know...so what more can we learn about WOFF. So this Web Open Font Format was developed by Mozilla with Type Supply and a few other organizations, which compresses font data. This means sites using WOFF use less bandwidth and will load faster. There are also a number of fonts that vendors were not willing to license elsewhere, so font availability is better for designers. This file format can be embedded into your web pages and is included in the HTML5 standard.

I've always had problems with typography in my web design. I'm a true beginner and don't use HTML or CSS much for my job but need to be familiar enough with it to use some standard programs. I get frustrated when I have this great layout and all these fonts that I'm using but they don't render on my webpages...which ultimately means it doesn't look exactly like I want it to AND I feel like I wasted tons of time looking for fonts which didn't work in the first place. Maybe WOFF will help with that as I progress in my design.