Bày tỏ IT

Đi xe đạp lại Buzzword và Phát triển Web có nghĩa là không có khác nhau. Bảo tồn năng lượng, trong nỗ lực!

Trong những năm của văn bản CSS và tạo ra HTML từ thiết kế, tôi đã theo một vài thực hành tốt nhất, trong việc theo đuổi của tiết kiệm thời gian và năng lượng trong những gì chúng ta thường hạn như "Wheel Re-Phát minh ra các". Thời gian và thời gian một lần nữa, tôi đã nói với bản thân mình, rằng tôi phải tạo ra một mẫu, một số lại có thể sử dụng tiêu chuẩn CSS rằng tôi sẽ sử dụng ra khỏi hộp trong công việc tương lai của tôi. Mặc dù không hoàn toàn nhưng tôi đã quản lý để đạt được một số mục tiêu.

Trong thúc đẩy hơn nữa, sử dụng của CSS, tôi có một cái nhìn tại các khuôn khổ CSS thường có sẵn cho chúng tôi và quyết định đưa vào sử dụng, vì đây là những cố gắng và thử nghiệm và tạo ra bởi các nhà phát triển có kinh nghiệm nhiều hơn bản thân mình. Quan trọng hơn "TRÁNH tái phát minh ra".

Mặc dù phổ biến kiến ​​thức cho cựu chiến binh, tôi đã cố gắng để viết một số khái niệm quan trọng / tốt nhất-thực hành / suy nghĩ đã đi vào việc tạo ra những khuôn khổ này, để làm cho XE ĐẠP RE của CSS có thể. Hy vọng điều này sẽ giúp một số nhà phát triển CSS chỉ là về và gần đây lên bandwagon CSS!

Phím Re-đi xe đạp của CSS:

Sử dụng Công ước đặt tên

Điều này có phải là yếu tố quan trọng nhất trong việc đưa ra các CSS / HTML lại có thể sử dụng. Đưa ra tên phù hợp cho các phần tử trang cho phép sử dụng lại các thành phần trang và phong cách của họ với ít hoặc sửa đổi. Trong phù hợp với lập luận này, Thậm chí HTML5, trong một sự thay đổi thay đổi lớn hơn người tiền nhiệm của nó, là để giới thiệu một số thẻ tức là cấu trúc. <article>, <section>, <header>, <aside>, và <nav> HTML5 sẽ mang lại? ]. Ngay cả với HTML 4 (hoặc thấp hơn), nó là tốt nhất để đặt tên cho phần tiêu chuẩn của trang của bạn consistanly như trong ví dụ đơn giản dưới đây ...

Hãy nhớ rằng, Hầu hết các trang trên dự án của bạn, sẽ có các yếu tố cốt lõi cùng một cấu trúc. Xác định những yếu tố cốt lõi trang phổ biến ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Thiết lập lại kiểu mặc định (CSS Đặt lại): Cho dù bạn sử dụng một khuôn khổ hoặc viết riêng của bạn, bạn phải cung cấp CSS Đặt lại [ CSS Đặt lại là gì? ], vì chúng làm giảm hoặc đôi khi loại bỏ hình ảnh mâu thuẫn xảy ra giữa các trình duyệt khác nhau. Nói một cách đơn giản CSS Thiết lập lại cơ chế thiết lập phong cách của phần tử HTML để các giá trị số không hoặc null, do đó trọng các giá trị mặc định của trình duyệt họ có thể đặt ra. Cung cấp một slate sạch để thiết lập các thuộc tính của các yếu tố khoảng trống của bất kỳ mặc định User-Agent [ CSS2.1 User Agent Bảng Phong cách mặc định . Tất cả các khuôn khổ CSS có cơ chế thiết lập lại. Nếu bạn đang viết riêng của CSS Đặt lại, một lời cảnh cáo rằng nếu bạn quên để thiết lập lại một tài sản quan trọng, có thể dẫn đến các vấn đề qua trình duyệt, đó là rất khó khăn để gỡ lỗi. Hãy nhớ rằng, Giữ một bản sao của phong cách thiết lập lại và thả chúng vào mỗi dự án mới bạn tạo ra.

  cơ thể, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  trước, hình thức, fieldset, đầu vào, lựa chọn, textarea,
  p, blockquote, bàn, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Thiết lập mặc định (Styles cơ bản) để yếu tố:

Sau khi bạn đã thiết lập (không hoặc null) các giá trị mặc định của thuộc tính nhất định của một số yếu tố HTML, là cần thiết để áp dụng một số phong cách trên tất cả các thể hiện của những yếu tố này. Những thiết lập mặc định có thể khác nhau theo thiết kế hoặc theo các thực hành tốt nhất bạn làm theo.

Hầu hết các CSS khuôn khổ, luôn luôn giới thiệu một số mặc định mới, ngoài việc cài đặt lại phong cách trình duyệt mặc định.
Những mặc định là khoảng trống mặc định User-Agent (bị tước đi bởi Thiết lập lại CSS), những điều này sẽ phù hợp trên các trình duyệt.

Hãy nhớ rằng, phong cách cơ bản được sử dụng để thiết lập phong cách mà sẽ được sử dụng thiết kế rộng. ví dụ.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 mạnh mẽ, h1, h2, h3, h4, h5, h6 {font-weight: in đậm;} 

Tóm tắt Styles cho các thành phần HTML thông thường và lớp học chung:

Hầu hết các dự án bao gồm một vài trang sẽ có các phần tử HTML thông thường được sử dụng trên trang web, ví dụ như để sắp xếp Một số hình thức, cảnh báo và lỗi, Popups Tuỳ chỉnh, LightBoxes ... Kể từ khi thành phần này được sử dụng trên một lần nữa qua các dự án, sẽ là hữu ích để cung cấp một thiết lập các lớp học liên kết với các phong cách được xác định trước cho các thành phần và bạn có thể tiết kiệm cho mình rất nhiều thời gian.

Ngoài việc xác định phong cách định nghĩa có thể tái sử dụng cho các thành phần HTML thông thường, chúng ta có thể phong cách trừu tượng các lớp học liên quan đến màu sắc, kiểu chữ, bố trí ngay cả. Bản thân tôi có xu hướng bạn sử dụng ... các lớp học phổ biến như clearfix, Font08, FontGrey, AlignL, DisplayB.

  hình thức đầu vào {border: 0px; background: # ffffff; padding: 10px 0px; _padding: 0px 0px; chiều cao: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 hình thức textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em; line-height: 1.5em; tràn: có thể nhìn thấy;}
 Fbold {font-weight: in đậm màu: # cccccc;}.
 Fgrey {color: # 666666;}
 Flightgrey {color: # bbbbbb;}
 Clearfix {rõ ràng: cả hai;}.
 Chia {biên giới-top: 1px solid # 647B06; biên giới-bottom: 1px solid # 9CC00A; height: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right}. Alignc {text-align: center}
 Floatr {float: right;}. Floatl {float: left;} 

Bản sửa lỗi cho quirks trình duyệt phổ biến

Trình duyệt khác nhau thực hiện mã CSS và cung cấp các mức độ khác nhau hỗ trợ cho các chi tiết kỹ thuật của CSS. Các kết quả này .... "Browser quirks", chúng tôi phát triển được để lại để giải quyết. Đặc biệt, IE6 ám ảnh hầu hết các lập trình CSS với một thời hạn cuối cùng để đáp ứng. Các tin tốt là kinh nghiệm đã mang lại cùng nhau sửa lỗi có thể tái sử dụng những vấn đề này (Thường được gọi là CSS Hacks ).

Hãy nhớ rằng, Giữ các hacks / sửa chữa tiện dụng

  / * Zoom sau đây: 1 quy tắc đặc biệt là cho IE6 + IE7.  * /
    * Html. Clearfix,
    * Đầu tiên con + html clearfix {
           zoom: 1;
      } 

Tinh chỉnh CSS của bạn

• Thói quen đi xe đạp lại không sẽ đến với bạn trong ngày. Nó có để phát triển. Vì vậy, kế hoạch Re-Đi xe đạp của bạn. Chịu đựng điều này trong tâm trí bạn có thể mặc định phong cách trừu tượng, định nghĩa kiểu chữ, bố cục, kiểu phần tử HTML. Hãy thử nghĩ về phía trước.
• Ngoài ra nhìn lại dự án trước đây của bạn, nó sẽ giúp xác định phong cách mà bạn có xu hướng sử dụng thường xuyên trên porjects. Tóm tắt nó.
• Hủy bỏ bất kỳ phong cách không sử dụng. Thực hành này sẽ giữ cho khung CSS của bạn từ một triệu chứng phổ biến được gọi là "Sưng phù"
• Hủy bỏ phong cách lặp đi lặp lại.
• Xây dựng một tập hợp các phong cách linh hoạt đến cổng nó qua các dự án.

A Look At Khung CSS

Cuối cùng. Nếu bạn được truyền cảm hứng và có ý định sử dụng một hoặc nhiều các khuôn khổ CSS, Heres là nhanh chóng danh sách của một số những người nổi tiếng ....

• 960 lưới hệ thống : 960 hệ thống lưới điện là một nỗ lực để sắp xếp công việc phát triển web bằng cách cung cấp kích thước thường được sử dụng, dựa trên một chiều rộng 960 pixel. Có ba phiên bản: 12, 16 và 24 cột, có thể được sử dụng riêng rẽ hoặc song song. Tư tưởng không có gì là bạn không thể tạo cho riêng bạn một cách dễ dàng, khuôn khổ cung cấp cho lưới điện cho các mẫu in ở định dạng PDF, mà ta có thể sử dụng để phác thảo designs.Bet trang của bạn, Nó sẽ tạo một ấn tượng chuyên nghiệp, nếu bạn mang theo một vài tờ khi bạn đi đến một khách hàng để thu thập yêu cầu giao diện người dùng. Nó cũng cung cấp các mẫu lưới cơ bản cho phần mềm thiết kế phổ biến như Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, cung cấp một "khởi đầu cho mười" để bắt đầu công việc thiết kế của bạn.
• Kế hoạch chi tiết : Kế hoạch cung cấp rõ ràng phân loại các tập tin CSS Đặt lại, lưới, hình thức, In, Typography, bổ trợ cho các nút, tab và sprites. Nó cũng cung cấp hỗ trợ cho trình duyệt IE như là một riêng biệt bao gồm.
• SenCSs : Không giống như trên, SenCSs (phát âm Sense), không có định nghĩa CSS cho Layout. Nó không bao gồm phông chữ, paddings, lợi nhuận, bảng biểu, danh sách, tiêu đề, blockquotes, hình thức và nhiều hơn nữa.
• BlueTrip : yêu cầu bồi thường ban đầu của nó nổi tiếng là vậy, nó là một sự kết hợp của các tính năng tốt nhất được cung cấp bởi những người khác các khuôn khổ khác như Blue in, Trip Oli ... từ nơi nó được tên của nó. Tính năng của nó bao gồm 24 cột lưới, phong cách kiểu chữ, phong cách orm, in ấn, các nút.
• YUI Grids : Mang lại cho bạn do Mạng lưới phát triển Yahooo, hỗ trợ chất lỏng-width (100%) bố trí cũng như bố trí cài sẵn chiều rộng cố định tại 750px, 950px và 974px, và khả năng dễ dàng tùy chỉnh để bất kỳ số nào. Như bạn thấy, nó về mặt kỹ thuật chỉ bố trí thành phần. YUI cũng cung cấp HTML / CSS bộ cho các phần tử trang khác
• YAML (Yet Another Giao diện multicolumn)
• Emastic

Hãy nhớ rằng, bằng cách sử dụng CSS khuôn khổ không có nghĩa rằng bạn là lười biếng để tạo ra một trong những của riêng bạn ... Điều đó ngụ ý rằng bạn là thông minh để học hỏi từ những người khác kinh nghiệm những sai lầm, TIẾT KIỆM THỜI GIAN và tăng năng suất!

Với hạn chế tập hợp kỹ năng của tôi với các công cụ như Photoshop và Illustrator, tôi có thể thành thật thú nhận rằng tôi là một nhà phát triển tốt hơn so với tôi là một nhà thiết kế. Nhưng nền tảng cốt lõi với tôi (phía máy chủ) phát triển với Java / PHP / COBOL, đã có một ảnh hưởng rất tích cực về phát triển kỹ năng giao diện người dùng của tôi. Những gì tôi có nghĩa là, trong khi tạo ra thiết kế của tôi, tức là bất cứ khi nào tôi làm thiết kế, tôi nghĩ về cách thiết kế có thể được tốt nhất chuyển đổi sang HTML, CSS và trong khi làm HTML, CSS, tôi cho một ý nghĩ về công nghệ phụ trợ và làm cho hợp lý chắc chắn HTML có thể được dễ dàng thực hiện thành XSL vòng hoặc PHP đoạn.

Qua nhiều năm, tôi đã được ném đầu về thiết kế bởi nhà thiết kế giao diện người dùng donot có thể có một đầu mối những gì HTML hoặc CSS. Tất cả những năm qua tôi đã nghĩ rằng tôi sẽ yêu cầu quá nhiều, Nếu tôi chỉ hy vọng các nhà thiết kế, những người đang cố gắng để shov của mình "không thể mã" thiết kế xuống cổ họng của tôi, để hiểu chỉ cần một chút những gì thiết kế của ông sẽ được chuyển đổi vào. RẰNG sẽ giúp đỡ ngay?

Sau đó, tôi đã xem qua bài viết này ngày hôm nay ... nhà thiết kế web có thể không mã ... Cảm ơn Chúa! Tôi chỉ là một trong nhiều người cảm thấy như vậy ... artitle trên là một chút hơi dài .. nhưng giá trị đọc, mỗi từ của nó.

Cảm ơn Elliot Jay Cổ phiếu ... Tôi cảm thấy nhẹ nhõm!

Dưới đây là một số trích đoạn từ Elliots bài viết .

Wow, một ngày! Nó bắt đầu với một tweet ít và kết thúc với một cuộc thảo luận có vẻ như để quét qua toàn bộ cộng đồng thiết kế web. Nó xuất hiện có một số ý kiến ​​rất mạnh mẽ tổ chức về đề tài liệu thiết kế web nên có khả năng mã.
...
Vì vậy, trước khi chúng tôi nhận được vào điều này, cho phép tôi để nhanh chóng tóm lại những gì tôi đã nói sáng nay trên Twitter:

Trung thực, tôi đang bị sốc rằng trong năm 2010, tôi vẫn gặp những "thiết kế web không thể code thiết kế riêng của họ. Không có lý do gì.

... Tôi đã được một chút cụ thể hơn trong tweet của tôi. Tôi đã nói về thiết kế không có thậm chí cả HTML và CSS kỹ năng cơ bản nhất để biến một thiết kế căn hộ vào một trang web thực tế. Không phải những người cố ý chọn không để mã, những người có thể không. Và tôi cũng đề cập duy nhất để mã front-end ở đây, tất nhiên nó là vô lý để nghĩ rằng thiết kế cũng cần được lập trình kết thúc tuyệt vời trở lại ...

Chúng tôi nhận được 'thiết kế web, gửi trong Illustrator, 300dpi, không thể code, không thống nhất / khả năng sử dụng.
~~ Amy Mahon

Nó nhận được vào cuối, và tôi đã có để bọc này lên bằng cách nào đó. Tôi biết sẽ có nhiều người không đồng ý với tôi, và ý định của tôi là không xúc phạm hoặc làm đảo lộn bất cứ ai có thể không mã, nhưng tôi hy vọng rằng một số những gì tôi đã nói phản ánh một số trong những điểm mà luôn luôn đi lên khi đào sâu vào cuộc tranh luận này.

Vào cuối ngày, tôi không mất ngủ hơn những người có thể mã và những người có thể không. Tôi chỉ thực sự ngạc nhiên khi thấy thiết kế rất nhiều thiếu kỹ năng front-end, như tôi nghĩ đây là một điều của quá khứ.

Cũng đọc các ý kiến, có khoảng 320 ý kiến, như tôi viết ... họ là đáng đọc.
Xin vui lòng đọc Elliots bài đầy đủ ở đây ... Web thiết kế không thể code

Hôm qua, sau khi vấn đề tôi gặp phải với các Đặt lại CSS trong Google Chrome ... Tôi nghĩ đào sâu hơn một chút vào khu vực của Sheets (US) Đại lý tài ...
Tìm thấy bảng này trên các giá trị mặc ​​định của CSS2.1 Sheets User Agent Kiểu ... (đối với những người không biết những gì "Sheets của thành viên (US) Đại lý" là theo User Agent Style Sheets (Đặc điểm kỹ thuật) là gì .

Đối với một danh sách đầy đủ của CSS 2.1 mặc định User Agent Style Sheets bấm vào đây

Hôm qua, giống như mọi "Ngày Hog đất" khác, tôi đã được làm việc trên một số bố trí CSS / tableless. Tất cả sẽ tốt trong IE 7, FF 3 và Chrome, cho đến khi đột nhiên, tôi thấy một số lợi nhuận chưa ignorable nhìn thấy chỉ trong Google Chrome. Mặc dù rất kỳ lạ và worring, Đó là một số lỗi / vấn đề mới mà tôi đã đi qua, cuối cùng cũng đã có một số gia vị trong công việc trần tục của tôi. Sad (nhưng tốt đẹp) đã cố định trong vòng vài phút của tàu thăm dò ...

Về cơ bản, Nó trông giống như Google Chrome bỏ qua CSS Đặt lại (margin: 0px). Nó thực sự được gây ra bởi các stylesheet đại diện người sử dụng (-webkit-padding-bắt đầu: 40px). Vì vậy, các giải pháp đã được thiết lập lại phong cách này bằng cách thiết lập padding: 0 hỏng yếu tố.
Một cách tốt để ngăn chặn vấn đề này xảy ra với bất kỳ yếu tố là sử dụng một phần còn lại CSS toàn cầu như sau

* {Margin: 0; padding: 0;}

User Agent Style Sheets (Đặc điểm kỹ thuật) là gì?
Trích đoạn sau đây được lấy từ http://meiert.com/en/blog/20070922/user-agent-style-sheets/ liên kết tiếp theo, để đọc thêm về Sheets (US) Agent tài

CSS 1 giới thiệu các ý tưởng bằng cách nói rằng mỗi User Agent (UA, thường là một trình duyệt web "hoặc" khách hàng web ') sẽ có một phong cách trang mặc định mà trình bày các tài liệu một cách hợp lý - nhưng cho là nhàm chán - cách. CSS 2 nói rằng các đại lý người sử dụng phù hợp phải áp dụng 1 tấm phong cách mặc định (hoặc cư xử như thể họ có) và rằng mặc định bảng phong cách 1 đại lý người sử dụng của cần trình bày các yếu tố ngôn ngữ tài liệu có đáp ứng kỳ vọng trình bày chung cho các ngôn ngữ tài liệu; CSS 3 là có thể có cùng một tâm trí.

Kể từ khi các chi tiết kỹ thuật CSS để nó để triển khai có sử dụng một phong cách trang "thực sự" để hiển thị mặc định hay không, nó không đáng ngạc nhiên mà bạn không tìm thấy một phong cách trang mặc định trong thư mục cài đặt của mỗi trình duyệt. Không giống như Internet Explorer của Microsoft cũng như Opera, ví dụ (và như xa như tôi biết), Gecko trình duyệt như Firefox và Netscape Navigator (nhìn cho "html.css") mà còn Konqueror làm cho nó khá đơn giản để hiểu được phong cách mặc định của họ.

Cả tôi rất mới để giao diện người dùng (UI) phát triển cũng không phải là một cựu chiến binh và như tôi luôn luôn đặt nó, tôi phù hợp với hồ sơ cá nhân của giao diện người dùng phát triển nhiều hơn một nhà thiết kế, không có hối tiếc. Vâng! Tôi đã viết về gì? ... Trong một thời gian (phải là trong năm không ít hơn bất kỳ), tất cả bây giờ và sau đó khi tôi nhận được vào một chút của thiết kế giao diện người dùng (khi các nhà thiết kế chuyên nghiệp đã đi vào một ngày lễ), tôi luôn luôn không thể ngừng suy nghĩ xem thiết kế của tôi nên đúng complient hay không (cách chân thành, không phải là tôi có thể đạt được mục tiêu chuẩn tuân thủ 100%, Nếu tôi muốn quá). Sau đó, tôi nói với bản thân mình, những gì crap! ... Thiết kế phải được đơn giản, tốt đẹp và chủ yếu là dường như có thể sử dụng, nó không nên làm cho du khách bỏ chạy ... hoặc thư bị trả lại (kỹ thuật). Những gì tốt đẹp tableless CSS bố trí là người truy cập, người không biết gì về tất cả các siêu văn bản thông minh và Cascading Style Sheet dưới da của trang web của bạn ... Zilch!
Nhìn đẹp và dễ sử dụng ... sau đó tất cả các công cụ tiêu chuẩn.

Tôi stumbbled trên blog entry này của Jason Fried của 37 tín hiệu (Đối với những người không nhận thức được 37 tín hiệu onces những người đã tạo ra một số ứng dụng web tuyệt vời như Basecamp, Campfire ...) đã viết một cái gì đó tương tự vào năm 2004 và tôi tin rằng, gần 5 năm và không có nhiều thay đổi kể từ đó ... Tôi rất vui mừng để đọc bài viết của mình, như tôi hoàn toàn đồng ý với những gì anh đã nói và cũng là thực tế, cô ấy là không chắc chắn về những gì đang nói về cảm giác ruột của mình và như vậy là tôi

Jason Fried: "Có quá nhiều cách nói về CSS, XHTML và các tiêu chuẩn và tiếp cận và không đủ nói về con người. CSS và Mã Tương thích tiêu chuẩn chỉ là công cụ bạn cần phải biết những gì để xây dựng với những công cụ này. Tuyệt vời, tôi vui mừng giao diện người dùng của bạn không sử dụng bảng. Vì vậy, những gì? Ai quan tâm nếu nó vẫn không cho phép mọi người đạt được mục tiêu của họ. Các tiêu chuẩn web là rất lớn, nhưng tiêu chuẩn của riêng của người dân bao gồm việc thực hiện công việc (và đó là vẫn còn quá khó khăn để làm trực tuyến).

Giao diện người dùng thiết kế cơ bản giống nhau "quên đi những con người phía bên kia" những sai lầm - ngoại trừ thời gian này, mã của họ sẽ tốt hơn. Con người - không xác nhận mã giao diện sử dụng ".

Thanh toán Jason Fried của bài viết

DISCALIMER: Điều này không có nghĩa rằng chúng ta không nên bận tâm về các tiêu chuẩn ở tất cả. Tiêu chuẩn là tốt để có và dính vào họ càng nhiều càng tốt. Chúng tôi chỉ phải hiểu rằng thiết kế giao diện người dùng tốt không phải luôn luôn có nghĩa là 100% tiêu chuẩn Complience hoặc Phó Versa ....

Từ danh sách của tôi về bài học kinh nghiệm của tôi, tôi làm theo một vài thiết kế giao diện người dùng và Phát triển vàng Rules ... Heres TOP 10 ... không phải là bạn có theo họ quá ...

1. Hãy chăm sóc của người sử dụng của bạn. Người sử dụng có thể thực hiện hoặc phá vỡ trang web của bạn. DONOT làm cho giao diện người dùng giống như một tổng idoit, hoàn toàn không có khả năng sử dụng trang web của bạn. Đó là BAD!

2 - Giữ đơn giản và dễ dàng sử dụng guidlines chính của bạn. Quá nhiều thứ trên màn hình, cao hơn xác suất mà một người sử dụng sẽ bị lẫn lộn hoặc bị phân tâm từ công việc ban đầu của họ.

3. GIỚI HẠN ... DONOT thưởng thức quá nhiều vào khả năng tiếp cận, khả năng sử dụng và tiêu chuẩn. Sử dụng các tiêu chuẩn hiệu quả và làm cho họ hiểu đội bóng. Điều này sẽ đảm bảo tính nhất quán ngay trong sản phẩm

4. Nguyên mẫu yêu cầu. Kể từ khi, những ngày này các giao diện sử dụng là giàu, Prototyping luôn luôn là tốt hơn so với chỉ wireframes đơn giản và sau này không có hiệu lực tương tác phong nha, nó sẽ không cung cấp cho khách hàng một hình ảnh rõ ràng của sản phẩm cuối cùng đang được phát triển. Luôn luôn, dễ dàng hơn để chuyển đổi các nguyên mẫu vào phân phôi cuối cùng. Ngoài ra! tạo mẫu bất kỳ vấn đề tương tác có thể được giải quyết trước đó trong chu kỳ phát triển.

5 - Tính nhất quán trong thiết kế và tương tác của bạn là rất quan trọng. Donot gây nhầm lẫn cho người sử dụng của bạn với các tương tác không thể đoán trước và gizmos.

6. Hiểu "thiết kế" Sứ mệnh của bạn. Aways tập trung vào các hành động chính của beign trang thiết kế. Ngoài ra, một danh sách các hành động seconday của bạn trên trang, và ưu tiên cho họ.

7. Cung cấp thông tin phản hồi thích hợp cho người sử dụng trang web. Với hầu hết các trang web được thiết kế xung quanh AJAX, cung cấp tín hiệu trực quan để người sử dụng về thay đổi trang. Người sử dụng đã để cho một sự thừa nhận hoàn thành bất kỳ nhiệm vụ nào ông thực hiện. Donot làm cho người sử dụng chờ đợi và đoán, cho ví dụ. cung cấp các chỉ số tiến bộ cho uplaods tập tin.

8 - Sử dụng điều khiển thích hợp. Để sử dụng ví dụ: Chọn danh sách thả xuống cho các danh sách nhỏ chỉ, donot cho phép người dùng chọn một trong 200 thành phố bằng cách sử dụng hộp chọn. Hiểu được sự khác biệt giữa một nút và một liên kết. Một liên kết và nút có mục đích khác nhau, donot sử dụng một khác. Cung cấp quyền kiểm soát để làm cho tương tác với một trang dễ dàng hơn. Tránh sử dụng các thực đơn, nhiều hơn hai cấp độ sâu. Đừng phát minh lại bánh xe. Sử dụng điều khiển tiêu chuẩn, tùy chỉnh chỉ khi rất cần thiết. Xác định bất kỳ điều khiển tùy chỉnh cần thiết cho tay đầu tiên trang web của bạn, để họ có thể được tạo ra và thử nghiệm độc lập, sẵn sàng cho sử dụng trên trang web.

9. Donot lặp quá nhiều về thiết kế. Nhớ! Toàn bộ sản phẩm bao gồm thiết kế mà nhiều hơn nữa một mình. Xây dựng các mốc thời gian thích hợp vào lịch trình dự án của bạn lặp đi lặp lại thiết kế và dính vào nó. Lặp đi lặp lại giúp chúng tôi để tìm ra những gì làm việc và những gì không, chọn ra các điểm rắc rối. Là một giao diện tốt cần có thời gian, dành thời gian cho lặp đi lặp lại trong nơi khởi điểm của chu kỳ phát triển, vì vậy mà lặp đi lặp lại thiết kế doesnot trực tiếp tương đương để làm lại. Quá nhiều làm lại có thể jeopradize thời hạn.

10 Hãy ngồi lại và suy nghĩ như một người sử dụng đôi khi.

Bạn đã thấy animoto.com? Vâng! đây không phải là một AD, tôi thực sự thích nó! và nó được Kiss giao diện người dùng ASS thực sự

Tôi đã xem qua trang web này một vài tuần trước đây. Nhìn thấy trang đầu tiên, dint bận tâm nhiều. Đối với tôi, nó chỉ là một trang web khác với một số nội dung flash phong phú, cho phép người dùng tải lên hình ảnh, chọn một số theo dõi và chuyển đổi nó thành một slideshow hình ảnh tốt đẹp. Tải FLV, và đặt nó trên bất kỳ trang web của sự lựa chọn của bạn (YouTube, MetaCafe, Facebook và thích) ... giai đoạn.

Hôm qua khi tôi nhìn thấy các trang dòng chảy nội bộ, người dùng thông qua việc tạo ra các slideshow này .... Tôi đã đi OH WOW! Khi tôi nhận ra rằng không có bit FLASH sử dụng. Nó thực sự là một giao diện người dùng phong phú. Tất cả các nhà phát triển giao diện người dùng phải khao khát tạo ra hoặc ít nhất là một phần của nhóm nghiên cứu đã thực hiện giao diện này .... Hoàn toàn tuyệt vời! Truyền cảm hứng!

HAVE A LOOK ... http://animoto.com/ ... và đăng ký và chơi với nó ... chỉ sau đó bạn có thể đánh giá cao những thiên tài.

Khi tôi đọc bài viết này vào Danh mục A Ngoài " Faux Absolute Định vị
Eric Sol ", tôi đã không có gì ít hơn so với ấn tượng. Tôi cũng đã chán nản majorly, gây ra, một cách trung thực tôi đã tự hỏi, tại sao không thể đến với một cái gì đó tuyệt vời như thế này.

Thông thường, khi chúng tôi tạo ra CSS bố trí, chúng tôi sử dụng "VỊ TRÍ" hoặc "nổi", hoặc một sự kết hợp rất xấu của cả hai. Eric Sol và nhóm của ông xác định một kỹ thuật hoàn hảo của một loại mới của kỹ thuật bố trí CSS, mà họ đã christened là "Định vị tuyệt đối Faux" sau khi các kỹ thuật cột giả mô phỏng sự hiện diện của một cột.

Bạn biết rằng vấn đề tất cả chúng ta CSS các nhà phát triển có với bố trí phân hủy (thay đổi nội dung bất ngờ gây ra cột toàn bộ bọc, khi chúng tôi sử dụng bố trí lưu hành) ... Vâng! Có vẻ như lịch sử!!!
Kỹ thuật bố trí này vẫn còn rất trẻ, và để vào thùng rác bởi tất cả những người rất kinh nghiệm CSS ra khỏi đó, trước khi nó trở thành một tiêu chuẩn bỏ bằng văn bản. Tôi đang hạnh phúc để sử dụng nó NOW! ... Và tôi đã vào giữa chuyển đổi trước đó vấn đề nổi của tôi / chưa nhất thiết phải bố trí vào FAP bố trí đã được ... và tôi vui mừng để nói "chúng ta đã sử dụng định vị tuyệt đối Faux cho trang blog này là tốt" ... GO thử nó, NOW!

Kudos Eric!

Hơn các yếu tố DOM trên trang web, chậm hơn nó ám, chậm hơn là truy cập DOM của JavaScript. Một số lượng lớn các phần tử DOM có thể là do thiết kế bố trí xấu. Ví dụ, các bảng lồng nhau có thể đã được sử dụng cho mục đích bố trí. Sử dụng bất kỳ thẻ HTML mà là có ý nghĩa ngữ nghĩa. Đối với các bảng sử dụng Ví dụ DONOT cho bố trí, nhưng DONOT ngần ngại sử dụng chúng, nơi bạn có để hiển thị dữ liệu dạng bảng, và do đó sẽ sử dụng giảm DOM yếu tố, trong so sánh, một cấu trúc tương tự được tạo ra bằng cách sử dụng DIVs chỉ ..

Để kiểm tra số DOM phần tử trong trang HTML của bạn, chỉ cần gõ như sau trong giao diện điều khiển của Firebug: document.getElementsByTagName('*').length

Không có tiêu chuẩn thiết lập như là bao nhiêu yếu tố DOM là quá nhiều. Kiểm tra các trang khác tương tự có markup.Eg tốt. Trang Yahoo! Trang chủ là một trang khá bận rộn và vẫn còn dưới 700 phần tử (HTML tags).

Sử dụng GET cho các yêu cầu AJAX

Nó đã được tìm thấy khi sử dụng XMLHttpRequest, POST được thực hiện trong các trình duyệt như là một quá trình hai bước: gửi các tiêu đề đầu tiên, sau đó gửi dữ liệu. Vì vậy, nó là tốt nhất để sử dụng GET, mà chỉ mất một gói tin TCP gửi (trừ khi bạn có rất nhiều các tập tin cookie). Chiều dài tối đa URL trong trình duyệt IE là 2K, vì vậy nếu bạn gửi dữ liệu 2K bạn có thể không thể sử dụng GET.
Một ảnh hưởng phụ thú vị là POST mà không thực sự đăng tải bất kỳ dữ liệu hoạt động như GET. GET là có nghĩa là để lấy thông tin, do đó, nó có ý nghĩa (ngữ nghĩa) để sử dụng GET khi bạn chỉ yêu cầu dữ liệu, như trái ngược với việc gửi dữ liệu được lưu trữ phía máy chủ.

Tránh các cuộc gọi AJAX đồng bộ

Khi "Ajax" yêu cầu, bạn có thể chọn một trong hai async hoặc chế độ đồng bộ. Async chế độ chạy theo yêu cầu trong nền trong khi các hoạt động trình duyệt khác có thể tiếp tục xử lý. Chế độ Sync sẽ chờ đợi cho các yêu cầu để trở lại trước khi tiếp tục.
Yêu cầu thực hiện với chế độ đồng bộ cần phải tránh. Các yêu cầu này sẽ làm cho trình duyệt để khóa cho người sử dụng cho đến khi trở về yêu cầu. Trong trường hợp máy chủ là bận rộn và phản ứng mất một thời gian, trình duyệt của người dùng (và có thể hệ điều hành) sẽ không cho phép bất cứ điều gì khác để được thực hiện. Trong trường hợp đáp ứng được đúng không bao giờ nhận được, các trình duyệt có thể tiếp tục chặn cho đến khi yêu cầu được hẹn giờ.
Nếu bạn nghĩ rằng tình hình của bạn đòi hỏi chế độ đồng bộ, rất có thể là thời gian để suy nghĩ lại thiết kế của bạn. Tình huống rất ít (nếu có) thực sự đòi hỏi các yêu cầu Ajax trong chế độ đồng bộ.

Tối ưu hóa hình ảnh

Tối ưu hóa đơn giản có nghĩa là giữ cho kích thước nhỏ hình ảnh giữ chất lượng của hình ảnh đến mức độ cần thiết. Có rất nhiều các thủ tục một lần có thể thực hiện để tối ưu hóa hình ảnh trước khi chúng được nạp vào máy chủ để giao hàng. Các công cụ mà chúng tôi sử dụng để tạo những hình ảnh (Photoshop, chụp pháo hoa, vv) thường có các công cụ cho phép người dùng để tối ưu hóa hình ảnh để sử dụng web.
• Kiểm tra của GIF để xem họ đang sử dụng một kích thước bảng tương ứng với số lượng màu sắc trong hình ảnh. Khi một hình ảnh được sử dụng 4 màu sắc và một bảng màu 256, sau đó hình ảnh có thể được tiếp tục tối ưu hóa

• Chuyển đổi GIF PNG của có thể và xem nếu có tiết kiệm. Thường xuyên hơn không, có. Đừng ngần ngại sử dụng của PNG, khi họ được hỗ trợ đầy đủ bởi hầu hết các trình duyệt thường được sử dụng. Mong đợi của các khả năng hoạt hình PNG có thể làm những gì GIF một, bao gồm minh bạch.

• Đối với những hình ảnh được sử dụng trong CSS sprites, sắp xếp các hình ảnh trong sprite theo chiều ngang như trái ngược theo chiều dọc thường là kết quả trong một kích thước file nhỏ hơn. Ngoài ra, kết hợp hình ảnh với màu sắc tương tự trong ma. Điều này giúp bạn giữ số lượng màu thấp, lý tưởng là dưới 256 màu sắc để phù hợp với 1 PNG8.

• Nếu bạn đang sử dụng một favicon.ico, giữ cho nó nhỏ, tốt nhất là dưới 1K.

Sử dụng đúng cách thu nhỏ / thay đổi kích cỡ hình ảnh.

Luôn luôn cố gắng và sử dụng hình ảnh thay đổi kích cỡ, tức là không sử dụng một hình ảnh lớn hơn bạn chỉ vì bạn có thể thiết lập chiều rộng và chiều cao trong HTML. Nếu bạn cần phải hiển thị một hình ảnh X 100px 100px trên trang, sau đó không sử dụng một quy mô xuống hình ảnh 200x200px.

Sử dụng hình ảnh Progressive

Một trình duyệt web đã làm cho hình ảnh dần dần. Để làm tốt hơn, bạn chỉ cần lưu các hình ảnh GIF hoặc PNG với tùy chọn "interlaced", hoặc hình ảnh JPEG của bạn với các tùy chọn "tiến bộ".

Có đang diễn ra cuộc tranh luận giữa những người sử dụng web như việc sử dụng hình ảnh tiến bộ là một phước lành hay trở ngại. Ngoài ra một hình ảnh tiến bộ trọng lượng khoảng 20% ​​so với đối tác tiến bộ của nó không. Vì vậy, Nếu bạn nghĩ rằng bạn bố trí sử dụng hình ảnh đó sẽ không cản trở kinh nghiệm người dùng bởi nó là tiến bộ, cảm thấy tự do để làm như vậy.