Search This Blog

Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Jun 7, 2012

TIPS: Internet Explorer CSS Hacks

Even though it is not a best practice to use hacks in targeting IE6, IE7 and IE8 stylesheets, it is still important to know when and how you can use them. And besides, it is fun to fix IE issues, right? :))

Hacking IE8 and Below
Using "\9", you can target Internet Explorer 8 and below. Appending it on your style and let the magic happens.
For example:
#myId {
  color:red ; /*this will affect all browsers including IE */
  color:blue\9; /* this will override the style above on IE8 and below browser*/
}
IE7 and Below
Using star (*) symbol on before the style.
#myId {
  color:red ; /*this will affect all browsers including IE */
  *color:blue; /* this will override the style above on IE7 and below browser*/
}
And lastly, the OLD IE6
Targeting IE6 is by using the underscore before the style, like this:
#myId {
  color:red ; /*this will affect all browsers including IE */
  _color:blue; /* this will override the style above on IE7 and below browser*/
}
Please take note that I’m not promoting to use hacks here. I only used these hacks if there are one or two changes. If there are handful changes, please make sure that you use the CSS conditional statement for better maintenance and avoid confusions.

May 10, 2012

Web Design: HTML5 and CSS3 Generator

Tool has only one purpose, and that is helping you to save time and achieve your goal much faster and accurate. This general concept is also applied in terms of web design. It needs tools to create mock ups, wireframe etc… Most of experienced designer used tools to complete their task quickly. Here is a list of generators for CSS3.


1. CSS3-Tricks Button Maker

CSS3-Tricks Button Maker is a button generator created by Chris Coyier. It use color selectors for top gradient, bottom gradient, top border, hover background, text, hover text, and active background.

2. CSS3 Button Generator
CSS3 Button Generator is an awesome button generator. It gives you options to manipulate font, box, border, background and hover.

3. CSS3 Me
CSS3 Me is a fully customizable CSS3 generator to fit your needs. Now with older browser and internet explorer support.

4. CSS3 Generator
CSS3 Generator is a CSS3 generator with a simple dropdown menu comprises CSS3 property. You will choose one then it will give you option and preview on your choosen category.

5. CSS 3.0 Maker
The CSS 3.0 Maker generate border radius, gradient, transform, animation, colors, text shadow, box shadow, and @font face

6. Webestool
Webestool lets you generate a CSS3 code that adds a shadow to an html box. This generator lets you easily configure different parameters of the shadow. You can change the size (spread), the color, the opacity, the blurriness, the type of shadow (inner or outter) and the offset of the shadow. While you change the parameters of the shadow a preview automatically updates to the new configuration. When the result satisfies you, you can directly copy the CSS3 code of the shadow in the Code section of this generator.

7. Fontface Generator
Fontface Generator lets you generate @font-face kit that you can use for your website. All you need to do is to upload your font and download the generated kit

8. Initializr
Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5

9. SwitchToHtml5
SwitchToHtml5 generate HTML5 framework. This will generate HTML5 template that you can use to start your HTML5 project.

10. Transforms
Transforms generate 2D and 3D CSS3 transformation on the HTML element. It also ddjust the origin, scale, skew, rotation, and animation.

Jan 17, 2012

Forbidden permission issue on Typekit

Typekit is a service launched in the year 2009 which allows web owner to use @font-face css property to embed non-standard font for online documents using javascript and subscription services.

Installation of typekit is pretty easy. You can follow their suggested steps here and made the beautiful fonts they have available in your site. OK, let'’s jump to our main objective, there are 3 main font events and they have corresponding class names which are: “loading”, “active”, “inactive”.

 1. loading (.wf-loading): Web fonts are loading
 2. active (.wf-active): Web fonts are active
 3. inactive (.wf-inactive): Web fonts are inactive

 So what were going to tackle here is the inactive font event. If you use firebug to check if typekit javascript is loaded in your site – you will see a .wf-inactive class which mean that the javascript is either not loaded properly (404 error) or you are having a 403 error (permission error).

 If the problem is 404:

 1. You need to check if your embedded code has the correct typekit id.

<script type="text/javascript" src="http://use.typekit.com/oef4kts.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

The typekit id there is the : oef4kts 


If the problem is 403:

1. The main reason could be is your kit setting. You need to make sure that you added the correct domain on your kit setting. Eg: "nytimes.com, *.nytimes.com, localhost, 127.0.0.1".




2. Save the setting and publish your kit again and wait for few minutes.

Sep 2, 2011

5 Ways to Improve Website Readability

Readability is making a great impact in the overall design structure of once site all over this year. Design didn’t stop with the correct color scheme and placing right elements at the right place. It is like more giving care when you deal the readability area carefully.

1. Make a standard design.


For the year 2011, most of the Internet users have standard monitor size 1024x768 pixels. From that time onward most of designers make their design to meet the standard.
Though, some of them make their design a little narrow with 770px width trying not to offend the 1% users left.
However they didn’t know that they were sacrificing the 99% of users since it is ghastly to look for the white spaces left.

2. Make your text large enough.


This is the most obvious issue that comes to our mind when we say "readability”". Use large enough font-size and standard font-style as possible to make your content easy to read and understand. I usually used between 13-14px font-size with Tahoma/Arial/Verdana font on my site.

3. Use right text-color and background. 

In my judgment, use of white background and dark color text is still the best when dealing with text contents. On the other hand, if you are creating an attractive design please remember to use contrasting colors and use your best judgment to decide what colors to use. Don’t limit yourself in experimenting something but make sure you know what you’re doing.

4. Use enough line-height.


Line height refers to the distance between you content sentences lines. In most cases, it’s ignored, yet, using right line-height help a lot when dealing readability. It can achieve using line-height CSS property. Ex. p {line-height:23px} In this blog, I’m using 23px line height and you can see it quite clear and enough.

5. Check, check and check.


Check misspelled words, grammar and format on your site.