About design and nearby

Using Non-standard Fonts with Cufón.js

Posted: November 17th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

During some time I was looking for the way to apply any non-standard font for a website. I do not like to use Flash, so I didn’t think about sIFR. And I’m not happy with pasting images instead of font… and using {font-family: sans-serif;} is not the best variant for some projects. You may say me about Typeface.js – yes, it works and it’s purely Javascript, but I was looking for more prompt script.

I found Cufón javascript by accident, when I was redacting the website.

Why do I like it? Well..
Cufón is javascript only (like typeface.js), but it’s size is rather smaller and speed is incredible )) Cufon is supported with all the most common browsers and pretty simple to use.
Read the rest of this entry »

Tips for SEO-Friendly Blog Posts

Posted: October 2nd, 2010 | Author: | Filed under: Creative Process | Tags: , | No Comments »

SEO-friendly content is the very content which is interesting and helpful for your human readers and for search engine spiders. Creating such type of content is not an easy task.

You need to be sure that your website gets a high ranking at Google, because it’s the way to find your blog posts for most readers.
SEO-friendly tips for blogs

You could hire a search marketing firm to optimize your blog according to search engines or anyway (firstly) you are able to do some things yourself. That’s like in sport – you get win not because your competitor is weaker, but because you are faster and think a step ahead. So the tips are:
Read the rest of this entry »

Rounded Corners with CSS

Posted: September 17th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

There is the solution for rounded corners using pure CSS (very helpful for website designers, as for my mind). The CSS3 border-radius property allows to create rounded corners without images using multiple div tags. It works in Firefox, Safari/Chrome, Opera and IE9.

According to W3C Specification the ‘border-radius’ properties:
border-radius: [ <length> | <%> ] [ <length> | <%> ]
Initial: 0
Applies to: all elements
Inherited: no
Percentages: refer to corresponding dimension of the border box
Media: visual

For every browser you have to add a prefix:
-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and Chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /

You are able to play with the individual border-radius properties:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
and set up one value (for the ’rounded’ corner) or two (for the ‘ellipsed’ one).

Here is how it looks : live example>>

Note: to make that looking the same for IE7,8 you have to apply javascript.

The Ways to Make Your Website ‘Sweet’ and Optimized

Posted: September 7th, 2010 | Author: | Filed under: Creative Process | Tags: , | No Comments »

Everybody has his own meaning of ‘sweet’. Some people (when they hear that) think about chocolate, some – about their home, some… a lot of variants. For me as for a web designer matter of grave importance is creation a memorable and at the same time easy catching perception of a website, sweet enough to come back.
To attract visitors to website you must give them a good reason to come, not only up-to-date information about your industry. You have to love your visitors and make their surfing easy and pleasant.

Be clear and precise. Be original. Be memorable. Be sweet.

The Ways to Make Your Website ‘Sweet’According to Krug’s first law of usability, don’t make the users think, let them “get it” – what they look for at your site – without expending any effort thinking about it. Visitors scan pages and your target is a website which is intuitively easy to use, indeed. Just
– let a user knows where he is located now;
– keep the navigation menu in the same place on every page;
– organize the content into groups;
– organize the site according to what your users are going to be looking for.

Be concise and keep focus. Keep it simple! That means keep web design and web development as simple as possible. You should avoid unnecessary information to don’t draw visitors’ attention away from what they require for. Usually people stay on websites for only 10-20 seconds after landing on – nobody has enough time to read every word (for example, long text blocks without images and keywords marked in bold or italics will be skipped).
Read the rest of this entry »

Letterpress Effect Using CSS

Posted: July 18th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

Under “Letterpress Effect” I mean the relief printing of text. Safari and Firefox (3.1+) support this text-transform effect. You can do the same using Photoshop :) but with css it’s more elegant.

letterpress effect
The HTML:

  1.   < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.   <title>Letterpress Effect </title>  
  5.   <link href="style.css" type=text/css rel=stylesheet/>
  6.   </head>
  7.   <body>
  8.   <div class="letterpress"><h1>Sweet Web Design</h1></div>
  9.   </body>
  10.   </html>

Read the rest of this entry »

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now