Designing in the Browser

For years website design has taken certain steps before acheiving the final goal of being usable in the browser, but there is a new methodology developing. Before many designers and web developers would start with a site list and create a wireframe based on the navigation. From the wireframe a designer would create a design based on the user's or client's needs. Once a design had been approved it would then be passed to a web developer to put that design into real-world implementation.

Now designers and/or developers are thinking of moving toward designing right in the browers to help create a clear idea of what the end product will be like. The earlier process (that is still in use) can create dificulty when design does not quite match up with implementation due to limitations of variety of browers and screens or what types of coding is accepted within browers and users' devices.

Responsive Web Design

Responsive web design is where we are headed right now. With all of the devices that users can interact with your site it makes sense to create a responsive site from the get-go. Size is becoming something we just can't/shouldn't control any more otherwise it will limit the capabilities of users to interact. It is difficult to incorporate response from an existing site, and is typically easier to keep the variety of screen sizes in-mind when you begin designing a site.

With these type of sites you need to use media queries to allow pages to auto adjust to screen size or float down to the next line. A transition being made to fluid grids and using percentages and EMs rather than pixels and points to adjust type and images.  There even needs to simplification in mind that when you get to a mobile phone size screen that parts of the information you see on a desktop or tablet go away complete so that users can focus on the most pertinent information. The extra code to help you pages adapt to screen sizes means that you should have a single set of code rather than multiple sets that respond to various devices (iPad, android phone, or ect...)

This field of responsive design is spreading like wild fire, because of its usefulness across the many ways we choose to access websites today.

Check out Hyrdant's adaptive website.

HTML Cheat Sheet

I have been doing quite a bit of coding lately, but since I do not do this everyday I have trouble remember coding I need for even simple code tidbits. So I created a sheet cheat for myself, so I thought I would share what I have been looking up constantly lately:

Dashes
em dash(—) —
en dash(–) –

Styles
<div style="font-size: 18px;
                    font-style:italic;
                    border-right: 1px #7c1120"></div>


Tables ( I have been working in word press and needed to use tables to create columns)

<table>
     <tr>
     <td></td>
     </tr>
</table>



Always check your closing tags </> is very important, and can mess up your code badly if you forget to do it.

ebay: grows up

Ebay is launching a new look for their logo as well as their website. Gone are the letters are various typefaces, weights, and sizes. Ebay is left with a cleaner more modern look. I love the more modern cleaned up look. The problem? It is just so boring. You couldn't say that about their old logo, but this is just too generic and says nothing about the company. The last logo was a little too kookie, but at least it had a personality.

If they were going to re-haul their entire design and branding for the site I would expect something that looked like it had more effort put into it. In their press release they implied that the many colors represent their global community—four is not a lot of colors. Maybe instead of tight kerning the letters could have been overlapped (similar to before) to include more colors and vibrancy. 

I like their site dedicated to promoting the new logo a whole lot more than I do their logo. It is modern like the logo, but contains unexpected elements and depth. What do you think of ebay's new logo?

Be Animated

With Flash becoming obsolete the animated GIF is making a comeback. I found a nice little video tutorial on how to create simple animated GIFs. Apple choosing to no longer support flash has made it likely that it will become obsolete. Photography sites used to be streaming with various flash code, because it fit the purpose. Photographers need large beautiful images in small file size and flash can do that, but now if you want to appeal to the market that owns apple products photographers have to adapt there sites to use other forms of code such as java, but some are making motion with GIFs.

Since I work in advertising we still use flash a lot for making online ads because you can get the best movement and resolutions for file size. Some clients create their own ads and turn in animated GIFs so the file will move on all formats, but they will have grainy images and can't figure out why.

GIFs have a selected amounted of colors you can use, and changing your number of colors can greatly decrease loading time. This type of file is limited to 256 colors, so you have to be mindful of the color spectrum in your photography. One way to reduce the number colors is to use simple vector art. Keep this in mind when you want animate on your blog or website.

GIF is Making a Comeback

Now that GIFs are retro, they are coming by and style. In reality it is Apple's decision to not support flash that have forced people to find new ways to add motion to their websites. It turns out the best way is the old way (cir. 1984 ‒ 90s). Photoshop's animation integration has made it easier than ever to animate your gifs and try to optimize them best for web, without annoying pixelation. There will be some in most cases, since you are limited to 256 colors. The animation panel now has an animation timeline to Adobe's AfterEffects timeline with position, opacity, and style  settings.

Best advice for animated gifs is too simplify images and color palette. You can do this by using simple shapes and color fields. I avoid using human faces because the face has so many gradations it is difficult to make anyone look good in a limited palette.

Photoshop also has tools such as posterize to help simplify the layers of color in an image. (This is a life saver for my online ads). Also always using save for web optimization will help insure you get the file right.

Want to be Liked?

Facebook is another useful tool for promoting your product and interacting with customers. I unfortunately cannot provide support toward which to use twitter or facebook. I tend to appreciate facebook more for business because it allows the customer to have many options to interact. Sharing pictures and videos, as well as comments and galleries. There are many facebook fan pages that fail, because of how these pages are utilized.

Some fail from lack of use. If you have made the jump to be social, those tools should be used often, at least once a week.

Some become just another advertisement slammed in your face. It is nice to be updated if there is sale going on for your company, but it should not be your only type of post. I think this is extremely common with business that work for other businesses.Particularly for media companies, I think it is a strong temptation to tell all about your clients specialties. For once it is not about them, but about your company. Make it so. A constant sales pitch is not something someone wants to read about. Facebook page is supposed to help you connect with your audience, but sales pitch after sales pitch becomes another forceful feeding of advertising. We are inundated with enough of that in day to day living.

Some focus on only one feature of facebook. I know that when I "like" someone I want to see a variety of content.

If you have a blog. Facebook can be a great way to connect your fans to some unique and in-depth content. Facebook tends to be quick snippets of  updates and events going on, and letting people know about a new blog post is a great way to let them know you have something more substantial to offer. This also can increase traffic to your blog. Not everyone will choose to follow a blog (especially when we follow so many), and posting your blog updates to facebook lets your audience pick and choose what they want to read.

Facebook is an excellent way to let people know about events you are having. It doesn't always have to be through "events" in facebook. Share through photos. Tell us what the employees are up to at the office. Having an office party? Share some fun photos from the event. Dogs come to work day? Share the photos of the pups and their owner.

Keep your voice. Facebook is part of social media. Be professional, but with personality. Let your facebook page be the "voice" of your brand. Most of all be authentic. Patronizing people will only push them away, and potentially loose clients and customers. (Yes, we can tell if you are being fake.)

My favorite brands that embody all of these tips:

• Callahan Creek
• Paper Source
• Hammerpress

Anyone what to share on how to have a successful facebook page or a favorite company?

Unfamiliar Territory

Graphic Design often dances together with marketing, but it is a different beast altogether. Like, design it is a skill-set that never ceases to change. Requiring one to endeavor continuously to adapt to media, market, and most importantly people! I have often thought of continuing my education at school to learn more about marketing, since it is so closely related to the work that I do. Marketing is still a part of every person who wants employment. We become our own product to market. I have never taken any class in marketing, and only have suggestions based on what I have experienced.

Being an introverted person it works against my nature to market, but every person has it within themselves skills that make them unique and there is not point hiding them. To make these skills easier to find on the webs there are few courses you can take to ensure more people are finding you, you business, or your product.

• META TAGS: You have probably heard it before about the importance of meta code: the "invisible" part of code that helps search engines pick up your important keywords and descriptions. This code goes in the <head> tag.

•  TELL GOOGLE: This will add your site to a Google crawl list. It can help google to find you more often.

• LINKS: You are socially active across the web, so make all your sites connect back to one another.

•  UNIQUE TITLES: When you name each of your webpages make sure to name each page distinctively to help search edges find you.

• SITE MAP: Most hosting companies can provide this for you. This lets search engines filter through your pages more quickly.

None of these are guaranteed top spots or success, but a way to enhance your online promotions. I also recommend that you post a favicon (the little photo next to your domain in the browser. This looks more professional, and shows that you think of all the details. If you have any pointers to please share with a comment below.

QR Codes vs Microsoft Tag

I am just starting to use QR codes with my clients, but I have been seeing more and more about Microsoft Tag. It uses CMYK colors to create a code. These are high capacity color codes, that can hold more information than a QR code can, but the Microsoft Tag code reader is not as common as the QR scanner. QR scans can be used in BW (which is common for cheaper prints and newspaper ads). Microsoft Tag must have CMYK. Both can be branded with image. QR codes can be colorful as long as the contrast is high enough. Microsoft tag can do both black and white and any color of the rainbow; but, the Microsoft tag can be transformed into images and icons more easily than QR code without losing readability.

Microsoft tag is a great way to continue your brand, while being functional. Some people believe that Microsoft Tag will replace QR codes. I think it's more likely they will co-exist until they are replaced by something else. Currently simple Microsoft Tags are free, but the website states that they will charge in the future for anything more than the basic features. 

There are enhancements sites for QR codes as well, and they also charge. The original QR code has a license that is not be exercised by the creator. I doubt that would happen with Microsoft tag. You have to have an account with Microsoft tag (it is simple: just your hotmail or msn account), but something very beneficial about this type of coding is there are analytics that Microsoft manages for you for your code. Codes could be "temporary" in that they would exist within a pre-arranged time period, which creates a valid reason for Microsoft to limit who can create their type of coding. There could be too many codes interfering to make relaying information difficult. 

Enhancements to either code do not have to be done my expensive sites, but by you through Adobe Illustrator, but unless you are skilled in the program you would have a difficult time developing the image, while allowing the code to still connect to your information. Skills could save you some doe, but it can save effort if you want to use what Microsoft already has available.

This Microsoft Tag Code links to my website, but I limited its availability until the end of this month.

Goals: A Formal Announcement

Not too long ago I answered a question posed by GeneralOverachiever about managing creativity. I talked some big talk, but very little commitment. Lists and sketchbooks help me define my goals, but I have discovered that they to not inspire me to complete the work I have set out to do.  I am more prone to do something if I inform others of my goals. The thought that others could hold me accountable, makes it easier to force myself do it. I believe all of these goals will help me to be a better designer, employee, blogger, and person. 

_____________________________________________________________

 LIST OF GOALS

_____________________________________________________________

YEARLY:  Go or do one thing out of the norm or at least out of WICHITA.

BI-ANNUALLY: Update my website (at a minimum)

MONTHLY:  Have a food adventure in the kitchen.

WEEKLY:  Create an illustration every week. Whether simple or small I need to create something for myself every week.

EVERY TWO DAYS: Continue to post every other day, or sometimes more often!

DAILY:  Do something active and engaging every day.

CONSTANT VIGILANCE: I want to constantly observe and engage in typography around me, and particularly the typography I use and create.

Let's check back in one year and see if I have accomplished my goals! Do you have any goals you are hoping to attain in the near future?

Quickly Responding (this month)

I had seen QR codes, but I had never used them. This past month it seems like all of our clients are requesting QR codes on brochures, posters, and ads. I have had to learn about these little codes for my clients. QR stands for Quick Response Code often linking from the code using a mobile app to connect to a website. Up to 7,089 characters can be encoded in these little squares, where as a traditional barcode is only 20. It carries information vertically and horizontally, which is how it can hold so much information. It even has error correction built in. Data can be restored if then is up to 30% of code words are damaged.

These codes are easiest to use if they are black and white, but as long as the contrast is high enough the code can be read in any color. But after experiencing a frustrating QR scan from the newspaper with 4 colors I would suggest keeping the code simple. It is great to have a pretty code, but if it doesn't function it is pointless. Since 30% of the data can be damaged you can take some risk in creating images within the code to give it an extra detail and design.

Shelby Montross of Meadowlark Creative.
I love the simplicity the QR code enables
this business card to have.

There are several sites out there that allow you to generate QR codes, and usually give you a choice of file type, size, and sometimes: color. QR codes can be great to put on business cards, to drive contacts to your portfolio or website. They are also good for  promotional pieces, such as posters where people can link to the event site or a location to buy tickets. It is most helpful on long/specific website addresses. If it is something short and easy  to remember: like apple.com, it is probably not worth the extra effort to develop a code.

There are a variety of mobile codes that you can use (but not all apps can read all codes). Some codes  to choose from are QR code, Color Code (microsoft tag), Shot Code, Maxi Code, Aztec Code, Tillcode, Semacode, and EZCode. QR codes were developed by DENSO Wave, and prominent in Japan and has taken longer to become popular in the United States. Has anyone else experienced an increased use of this QR code, particularly in your own work?

Some good resources to check out if you are interested in using QR codes in any marketing that you are doing:

• QR Code Resume: This QR code on his resume that led to a rich experience.
• 5 Mistakes to Avoid in a QR campaign.
• QR Code Generator.
• QR Codes are on the Rise, and I am not the only one who noticed!
  

It's Live!

I am glad to announce that my website went live this morning!
www.mrosegraphics.com
Please check it out and leave any feedback.

Not Musically Inclined

It seems increasingly I have noticed to more and more websites using music. This is a fatal error for almost any site. Ones that sell or about musicians it is understandable that they would play music (although I don't think any website should automatically play music it should have to be selected). Music is a lead turn off for me of any website. Most of the time it isn't music I like (a big problem is that there is only a small selection of people that like the same type of music). When I am on my compute I typically am playing my OWN music so the websites contribution just makes noise to drive me nuts.

So if you are looking to enhance your website look for something besides music. Especially photographers seem to be the worst at it. Don't choose music, choose a cool transition effect for displaying your photos. Learn some Java, anything but music.

Remember friends don't let friends put music on their website.