R.I.P mah old blog!

Sau hơn 2 tháng xoay sở vẫn hem recover được database blog cũ …

RIP – My Old blog!

Crème de la crème of CSS: List of CSS Galleries

One can discuss whether numerous CSS-galleries challenge our creativity, however they can serve as a quite nice source for inspiration. The galleries of CSS-based designs showcase exemplary design practices, solutions, ideas and templates. Once you have no idea what you should do next with your web-site, it’s worth taking a look at some beautiful works – crème de la crème of CSS-designs – out there.

12 Breeds of Client and How to Work with Them

There are loads of different types of clients out there and chances are at some point you’ll get to meet all of them. So let’s take a look through some typical clients and see if you recognise a few of your own in there!

Read more!

5 Common Mistakes Made When Hiring a Web Designer

Finding and choosing the right web designer can be a confusing and frustrating process for many people. There are so many options and different factors to consider. When you are in the situation, here are 5 common mistakes that you’ll want to avoid.

1. Deciding on Price Alone.

While the cost of a designer is an important factor that should always be a factor in the decision making process, it shouldn’t dictate who you choose without also considering a number of other factors. If you are building a website for a business, that website will become a value-adding asset of the business. Try not to look at it as just a financial drain, but an asset that has a chance to bring new customers and opportunities.

By choosing the lowest-priced option you may not get a website that meets your needs. On the other hand, high price doesn’t necessarily equal high quality. Some lower-priced designers may give you a better end result and better service than some high-priced design firms.

You should make your decision based on a number of factors including price, the quality of their portfolio, their level of communication with you, the time line you’re working with, etc.

2. Not Considering Specialties.

If you are not very familiar with web design it may be easy to overlook the fact that there are several different areas or types of design that a particular designer may specialize in. Obviously, to get the best results you’ll want to find someone who specializes in, or at least has experience with, your type of project.

For example, if you are interested in a minimalistic design, don’t choose someone because they have a portfolio full of flash-based websites with lots of bells and whistles. Likewise, if you’re looking for bells and whistles, don’t choose someone who specializes in minimalistic design.

This sounds kind of obvious, but many times the specialization is ignored when trying to decide between a few different options. For the best results you should have a good idea of what style of website you want, and base your search on finding someone who meets your needs.

3. Not Considering Future Updates and Maintenance.

Regardless of how well your new website is built, it will require updates and maintenance from time-to-time. Most designers offer these services at an hourly rate or as part of a package, but this is something you shouldn’t assume. Talk to potential designers about the possibility of them performing maintenance and what charges would be involved.

Typically, you’ll get the best results by having the original designer also do the updates and maintenance. No one else will know the website as well as the designer. However, you may have someone in your office or on staff that is capable of making updates, which should also be considered in this case.

The costs of maintenance should always be considered, and just as important, the costs of not being able to perform maintenance should be considered. If you hire a designer and are then unable to get updates completed, your website may quickly become out of date and ineffective.

4. Hiring Someone Who Does Not Build Search Engine-Friendly Websites.

It’s possible to have a great-looking website that is built horribly for search engines. While search engine optimization involves much more than the structure of the site, starting with a solid foundation will give you the best chance to compete.

If you are not very familiar with web design or SEO it may be difficult for you to evaluate the structure of a website. In this case, the best thing to do is ask potential designers how search engines influence the decisions they make during the design process. Ideally, websites should be built for people (the real visitors) but it should not interfere with the search engine spiders/robots that come to crawl the site.

5. Being Overly Influenced by a Wow Factor.

Many designers use elements like Flash intros on their projects as wow factor for potential clients. While they may look great, in most industries they’ll annoy visitors and do more harm than good.

This all goes back to knowing what you want in a website and finding someone who can deliver. Try not to be wowed or swayed by an impressive piece of work that has nothing to do with your type of project.

http://www.vandelaydesign.com/blog/design/5-common-mistakes-made-when-hiring-a-web-designer/

From a Design to Page

Chúng ta sẽ bắt đầu với mẫu design trên . Hãy quan sát 1 lượt layout này, ta thấy nó khá là simple ( I like this)

• Chia các phần chính của layout:

Đầu tiên ta hãy quan sát sơ qua để có đánh giá chung về giao diện. Ta thấy nó được chia thành những phần chính như sau:

• Header
• Main content
  • Left
  • Center
  • Right
• Footer

Ta sẽ tạo các đường guide chính như sau:

Lưu ý là bề rộng của trang ta sẽ xác định vào khoảng 990px (đường guide bên cùng tay phải)

• HTML cho layout chính:

Sau khi đã có được các đường guide ta sẽ bắt tay vào viết sườn HTML cho trang, dựa trên những gì ta đã có ở phía trên.

   1: <div id="wrap">

   2:     <div id="header">

   3:         header

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             left

   8:         </div>

   9:         <div id="main-col">

  10:             main

  11:         </div>

  12:         <div id="right-col">

  13:             right

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         footer

  18:     </div>

  19: </div>

Preview ta sẽ thấy giao diện của chúng ta chạy 1 hàng từ trên xuống dưới trông khá là ngộ . Và tiếp theo … Hãy bắt nó làm theo ý chúng ta. Nhưng trước tiên ta hãy làm 1 bước nhỏ nữa để preview cho chính xác.

Hãy cắt mẫu design của chúng ta theo những đường guide ở trên và insert các part đó vào.

 

   1: <div id="wrap">

   2:     <div id="header">

   3:         <img src="header.jpg" alt="header" />

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             <img src="left.jpg" alt="left" />

   8:         </div>

   9:         <div id="main-col">

  10:             <img src="center.jpg" alt="center" />

  11:         </div>

  12:         <div id="right-col">

  13:             <img src="right.jpg" alt="right" />

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         <img src="footer.jpg" alt="footer" />

  18:     </div>

  19: </div>

Preview and U’ll c wat happen

• CSS cho Layout chính:

Ta đã có khung sườn cho giao diện của chúng ta, vấn đề còn lại bây giờ là dùng CSS để control các box vào đúng vị trí của nó.

 

Để dễ hiểu ta hãy nhìn vào hình trên:

A : Giao diện hiện nay chúng ta có

B : Hãy đẩy các phần tương ứng qua đúng vị trí của nó

C : Almost done!

D : Final result !

Bắt tay vào nào !

Đầu tiên copy hết đoạn CSS sau bỏ vào file CSS của bạn:

   1: /***** Global Settings *****/

   2:  

   3: html, body {

   4: border:0;

   5: margin:0;

   6: padding:0;

   7: }

   8:  

   9: body {

  10: font:100%/1.25 arial, helvetica, sans-serif;

  11: }

  12:  

  13: /***** Common Formatting *****/

  14:  

  15: h1, h2, h3, h4, h5, h6 {

  16: margin:0;

  17: padding:0;

  18: font-weight:normal;

  19: }

  20:  

  21: h1 {

  22: padding:30px 0 25px 0;

  23: letter-spacing:-1px;

  24: font:2em arial, helvetica, sans-serif;

  25: }

  26:  

  27: h2 {

  28: padding:20px 0;

  29: letter-spacing:-1px;

  30: font:1.5em arial, helvetica, sans-serif;

  31: }

  32:  

  33: h3 {

  34: font:1em arial, helvetica, sans-serif;

  35: font-weight:bold;

  36: }

  37:  

  38: p, ul, ol {

  39: margin:0;

  40: padding:0 0 18px 0;

  41: }

  42:  

  43: ul, ol {

  44: list-style:none;

  45: padding:0 0 18px 40px;

  46: }

  47:  

  48: blockquote {

  49: margin:22px 40px;

  50: padding:0;

  51: }

  52:  

  53: small {

  54: font-size:0.85em;

  55: }

  56:  

  57: img {

  58: border:0;

  59: }

  60:  

  61: sup {

  62: position:relative;

  63: bottom:0.3em;

  64: vertical-align:baseline;

  65: }

  66:  

  67: sub {

  68: position:relative;

  69: bottom:-0.2em;

  70: vertical-align:baseline;

  71: }

  72:  

  73: acronym, abbr {

  74: cursor:help;

  75: letter-spacing:1px;

  76: border-bottom:1px dashed;

  77: }

  78:  

  79: /***** Links *****/

  80:  

  81: a, a:visited {

  82: text-decoration:none;

  83: }

  84:  

  85: /***** Forms *****/

  86:  

  87: form {

  88: margin:0;

  89: padding:0;

  90: display:inline;

  91: }

  92:  

  93: input, select, textarea {

  94: font:1em arial, helvetica, sans-serif;

  95: }

  96:  

  97: textarea {

  98: line-height:1.25;

  99: }

 100:  

 101: label {

 102: cursor:pointer;

 103: }

 104:  

 105: /***** Tables *****/

 106:  

 107: table {

 108: border:0;

 109: margin:0 0 18px 0;

 110: padding:0;

 111: }

 112:  

 113:     table tr td {

 114:     padding:2px;

 115:     }

 116:  

 117: /***** Global Classes *****/

 118:  

 119: .clear             { clear:both; }

 120:  

 121: .float-left     { float:left; }

 122: .float-right     { float:right; }

 123:  

 124: .text-left         { text-align:left; }

 125: .text-right     { text-align:right; }

 126: .text-center     { text-align:center; }

 127: .text-justify     { text-align:justify; }

 128:  

 129: .bold             { font-weight:bold; }

 130: .italic         { font-style:italic; }

 131: .underline         { border-bottom:1px solid; }

 132: .highlight         { background:#ffc; }

 133:  

 134: .img-left         { float:left;margin:4px 10px 4px 0; }

 135: .img-right         { float:right;margin:4px 0 4px 10px; }

 136:  

 137: .nopadding         { padding:0; }

 138: .noindent         { margin-left:0;padding-left:0; }

 139: .nobullet         { list-style:none;list-style-image:none; }

Các bạn có thể download ở đây.

Đâu tiên là “wrap”, như ta đã xác định trang chúng ta sẽ cố định ở 990px. Ta sẽ có:

   1: #wrap {

   2:     width:990px;

   3:     margin:0 auto; /*For center alignment*/

   4: }

Tiếp theo là “mainpage”, đây là div lớn chưa cả 3 div “left-col”, “main-col” và “right-col” :

   1: #mainpage {

   2:     width:100%;

   3:     position:relative;

   4: }

Cả 2 phần này đều khá đơn giản và dễ hiểu, nên không cần giải thích gì thêm.

Phần tiếp theo khá khó, đó là 3 div con của “mainpage”

Đầu tiên ta nhận định ta sẽ cần kéo 2 cột left và main sang trái và cột right sang phải.

   1: #left-col{

   2:     float:left;

   3: }

   4: #main-col{

   5:     float:left;

   6: }

   7: #right-col{

   8:     float:right;

   9: }

Preview! Excellent!! Right ??

To be continue ……!!!

• Header:
  • Topnav:
  • Menu nav:
  • Banner – logo:
• Left:
• Main:
• Right:
• Footer: