web image formats

There seems to have been some confusion amongst you about this. So, just a very quick post on which ones to use and when:

GIF: Will only use up to 256 colors when saving, so this works best for solid colored things (preferably with aliased edges) that have few colors and no gradients. You can also have transparency with GIF, however it will hardly ever look right, will give you some very nasty jagged outlines unless you are using it on straight edged shapes such as bitmap fonts.

JPEG: The one which you will probably end up using the most, works very well with all types of images, in that it uses millions of colors when saving - except that there is no transparency.

PNG: There are two types to this  - PNG8 and PNG24. Avoid 8 like the plague! Use GIF instead, works the same way, with only 256 colors. The one to go for is PNG24, which is a fabulous image format that also works with millions of colors + transparency. So, you cannot go wrong with this. Downside: Will create large file sizes when used on large, complex textured images, in which case JPEG is a much better option.

.................................................................................................................................

blogspot: separate boxes and timestamps for posts that were created on the same day

This is something which is much needed indeed! Furkan has spotted the solution at Southern Speakers where it is all explained very clearly here:

http://www.southernspeakers.net/2010/12/show-date-for-each-blogger-post.html

Thank you Furkan!

Southern Speakers seems to be hard to reach at times, so I am also copy pasting the code onto here. However, this is a really long bit of code, so to see it please take a jump break and

Find the first line of this code in the HTML editor:

<!-- posts -->

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

    <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.isDateStart'>

        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>

          &lt;/div&gt;&lt;/div&gt;

        </b:if>

      </b:if>

      <b:if cond='data:post.isDateStart'>

        &lt;div class=&quot;date-outer&quot;&gt;

      </b:if>

      <b:if cond='data:post.dateHeader'>

        <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

      </b:if>

      <b:if cond='data:post.isDateStart'>

        &lt;div class=&quot;date-posts&quot;&gt;

      </b:if>

      <div class='post-outer'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      </div>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </b:loop>

    <b:if cond='data:numPosts != 0'>

      &lt;/div&gt;&lt;/div&gt;

    </b:if>

    <data:adEnd/>

  </div>

Select the code and very carefully scroll all the way to the end, making sure you do not miss anything or select anything extra. Then delete all of what you selected and insert this instead:

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/> 
 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
  <div class="date-outer">
   <h2 class='date-header'><span><data:post.timestamp/></span></h2>
   <div class="date-posts">
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "static_page"'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == "item"'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
 </b:loop>
 <data:adEnd/>
</div>

.................................................................................................................................

blogspot stuff: this (too) is "awesome inc"

I seem to notice in class that you are not really pushing the limits of the templates as much as you should. These templates are a fabulous start out point, however left in their default state they will hardly be adequate to suit any sort of ambitious design criteria. They are not even meant to do so - they are meant to be modified! And, as far as I can see, very few of you are modifying them to the extent where they will really suit your needs.

So, I have decided to do a few examples for you. Here is the first one: My visual communication history blog was long overdue for an overhaul, so it will be a good one to work on for this.

As visual material I have modified an earlier photoshop file, so nothing new there. I did make some new header typography for it, however. Which I may still change, not entirely happy with it yet... 

The template that I have used is one of the subcategories of awesome inc, and as a matter of fact it is that particularly nasty looking pink one with the white band underneath the header. So, yes, it did take quite a bit of work to get this to look the way that I wanted it to look.

What I did want out of this was a semi transparent background for the widget area. To get rid of all the white stuff I went into the code and replaced the image file which they had used with my own image file, a tiny 16 x 16 pixel semi transparent dark gray 24 bit png file, which I had previously uploaded to Picasa.  (Tip:  just do a ctrl+F for "http" and you will find all of it, since it is one linked image which has been used several times. And after that it is just a matter of replacing it with yours  ).

Next thing was adjusting all of the line heights. Which meant pasting this code into the CSS box all the way on the bottom on the advanced tab of the template editor. This is a really great thing (almost as good as the split window in Dreamweaver), since you can see the changes take effect as you are tweaking. The parameters you need to play with are highlighted in black:

#PopularPosts1 li{
line-height: 140%;
}
.post-body {
line-height: 1.7;
}
li{
line-height: 140%;
}

And then finally, all the other colors, etc, were fixed in the advanced editor as well. And, now I have a brand new look on my blog! See it in action here:
http://visualcommunicationhistory.blogspot.com/

You can also download the template from here >>>

.................................................................................................................................

linkwithin - post recommendation widget + beautiful design!

Caution: Beautiful as this is, it does not serve the same function as the one that was posted before. That one gives you ratings as well as recommendations. This one here only recommends, doesn't let people rate the posts.

http://www.linkwithin.com/learn?ref=widget

.................................................................................................................................

Front-End Web Developer / Integrator - Ad-Verto - Lebanon

Description
- Implement innovative designs and graphics using XHTML, CSS, JavaScript and Flash animated segments, that matches a Photoshop/Illustrator design layout, and understand how mockups translate to code.
- Integration and updating of content (text, images, animation) in multiple web pages
- Ensure that the code is adapted to the project's needs, while keeping it light, reusable and based on W3C standards
- Work closely with the back-end development team and implement dynamic elements
- Maintain cross-platform and cross-browser compatibility

Candidate Profile
- Must have a minimum of 3 years in professional web integration experience
- Experience working with web standards and related processes (W3C)
- Experience in Usability and User Experience
- Ability to generate clean and reusable code
- Hands-on knowledge of current web mark-up or scripting languages: HTML5, XHTML, CSS, and JavaScript (particularly jQuery libraries)
- Experience and understanding of site architecture, color theory and color management on the web, proper file formats, compression methods and optimization techniques
- Understanding of dynamic or active web content and databases
- Experience with desktop publishing/imaging applications (Photoshop, Illustrator, Flash, Dreamweaver…)
- Ability to interact competently and coherently with designers, programmers, technical director and project manager
- Experience with Social Media Integration is an asset
- Experience in Search Engine Optimization is an asset

Personal Attributes
- Ability to set and manage priorities
- Strong capacity and willingness to learn
- Detail and Problem-solving oriented
- Positive contributor to team environments

Languages
- Bilingual (French & English)

Apply online

HTML Producer - ProFed - Lebanon

- Building HTML web pages
- Using industry standard tools
- Creating and updating HTML files
- Using CSS formatting and layout techniques
- Editing and preparing web images and coordinating with the design team
- Make the necessary QA with the designers on the produced web pages
- Managing and updating websites content
- Using jQuery as needed
- Optimize code for best performance

Qualifications
- University degree in computer science, multimedia or equivalent
- Good knowledge of HTML, CSS and JavaScript
- Good knowledge of Adobe Dreamweaver
- Good knowledge of Adobe Photoshop for image editing
- Knowledge of jQuery
- 1/2 years of experience in website production
- Flash knowledge is a plus

hr@profedme.com

fine line between good web design & usability

As the technology advances, we get more and more freedom in how we design our websites. While this aspect allows creativity beyond imagination, it also creates dangerous pitfalls that should be avoided. First, you have to accept and understand that you are designing a web-page not a print (poster etc.), which is the most dangerous pitfall for beginner web designers especially for those with a graphic design background. (GripLimited; welcome to poster design 101, great typography but a ton of problems). Then, you have to think like a simple internet user, where will they look, what will they see, can they reach the desired information easily. Know that, not everyone will be as proficient as you are with internet browsing, nor will be able to see your website like you see it.

During the design process, there are mainly 5 issues that you have to be careful with. These are visual placement, visibility\accessibility, navigation, loading times\problems, categorizing\archiving (if used).

Below, I will try to give you some examples of what "NOT" to do. The selected sites are particularly well designed however due to one of the facts above, each suffers major problems in usability.

Visual Placement - or in this case Visual Mess:

ContentOf

This is what I would like to call hammering the visitor. I don't even understand what the page is about, nor where I should click.

Crative with AK

Nicely done, but what am I looking at? There is so much going on, stuff moving on its own. It is impossible to understand what is a link and what isn't. A navigation disaster as well. Plus on smaller screens, it re-sizes itself, I can't even imagine browsing this site on a netbook.

Visibility\Accessiblity - or in this case Invisibility:

BioBak

Incredibly fun and innovative design, yet an overkill due to the ridiculously big design. It gets tiresome to drag yourself around, not knowing what is where.

Lego

Innovative design and yet again too large for its own good, it is hard to understand what and where is content. Plus the site scrolls from bottom to top and the scroll is at the right bottom. Also too much content at one page, it takes quite long to load.

Navigation - how will I browse?:

Theologs

Where to begin? This site is a lesson by itself. Disturbingly long load time, no proper menu (just a bunch of images that bring out names that don't mean anything). Slow and jagged transitions on images. Again more load times for new pages. And marvelously, you have to go to a new page to actually shut off the sound.

On Toyota's Mind

There was on thing that wasn't on Toyota's mind while designing this beautiful website, navigation. It is really unsatisfying going over those numbers on the bottom to actually see where they might be linked to.

Loading Times - lets face it, no one will care how beautiful your page is if it takes more than a minute or 2 to load. This is especially a problem with those who tend to use flash. In HTML, the only thing you have to be careful about is the size of the images you use. If you are crating a page with massive and high quality images, try to use pre-loading and loading screen javascripts to prevent partially and slowly appearing images. Even in this case, there is the same problem with flash, if you overdo it, it will take disturbingly long:

Coca-Cola Light

Along with no proper navigation, it also takes quite a while to load. Add to this, the fact that there is no way whatsoever of skipping the introduction animation and you get a beautiful and yet useless website.

Categorizing & Archiving - you have to create an intuitive interface so that the visitor can find what he/she is looking for easily... or maybe you don't as in the following cases:

VanAlen Ins.

This is the pillar of confusing categorization. Just click one of those stripes and see what happens, how could anyone find what they are looking for over there.

Self Titled

Another very confusing categorization, just move your mouse pointer to the right side of the page and you will see.

Finally...

I hope this gives you a good perspective on what to consider when designing for web. Good and innovative design is very important but overdoing it results in losing visitors which I guess no one would want.

.................................................................................................................................