IT를 표현

다시 자전거는 버즈 워드이며, 웹 개발에서는 전혀 다른 의미가 없어. 그것은 노력의 측면에서, 에너지 절약!

CSS를 작성하고 설계에서 HTML을 만드는 몇 년 동안, 나는 '다시 발명 휠 "등 우리가 일반적으로 용어 것에 시간과 에너지 절약을 추구에서, 몇 가지 모범 사례를 따라했습니다. 다시 시간과 시간, 나는 내 장래 일을 끄집어 내보는 사용할 수있는 몇 가지 표준 재사용 가능한 CSS, 나는 몇 가지 템플릿을 작성해야하는 자신의 능력을 말한거에요. 완전히는 아니지만하지만 난 목표들을 달성하기 위해 관리 않았다.

발전에 CSS의 재사용, 나는 내 자신보다도 우리에게 일반적으로 사용할 수 있으며 이들은 시도 및 테스트와 많은 경험을 가진 개발자가 만든대로, 그들이 사용 넣어하기로 결정 몇 CSS 프레임 워크에서 모습을했다. 더 중요한 '다시 발명을 피하십시오. "

참전 용사에 대한 일반적인 지식, 나는 펜을하려했지만 몇 가지 주요 개념 / 모범 사례 / CSS의 RE-사이클링을 가능하게하려면 다음과 프레임 워크를 만드는 들어갔 생각.에게 이것은 막에 있으며, 최근의 CSS 악대차 나면, 몇 가지의 CSS 개발자들이 도움이 될 것입니다 희망!

키 CSS의 재 자전거 :

명명 규약을 사용하여

이것은 CSS / HTML 재사용 가능한 제작에 가장 중요한 요소가되고있다. 페이지 요소에 일관된 이름을주는 것은 거의 수정 페이지의 구성 요소와 자신의 스타일의 재사용을 가능하게합니다. 이 인수가있는 라인에서, 비록 HTML5는 그것의 전임자에 대형 변화 변화에 몇몇 구조적인 태그 즉 소개하는 것입니다. <article>, <section>, <header>, <aside> 및 <nav> [ HTML5가 무엇을 가져올 것인가? ]. 심지어 HTML 4 (또는 낮은)과 함께, 그것은 consistanly 아래의 간단한 예제와 같이 페이지의 표준 섹션 이름을 지정하는 것이 가장 좋습니다 ...

단, 프로젝트의 대부분의 페이지는 같은 코어 구조적인 요소를 가지고 있어야 해요. 이러한 공통 핵심적인 페이지 요소를 식별합니다 ....

  <div id="container">
    <div id="header"> ... </ 사업부>
    <div id="nav"> ... </ 사업부>
    <div id="sidebar"> ... </ 사업부>
    <div id="footer"> ... </ 사업부>
   </ 사업부> 

기본 스타일 (CSS 재설정)을 재설정 : 당신이 프레임 워크를 사용하거나 직접 작성하든, 당신은 CSS를 재설정을 제공해야합니다 [ CSS를 재설정은 무엇입니까? ], 그들은 감소하거나 때로는 다양한 브라우저 사이에 발생하는 시각적인 불일치를 제거로. 간단하게 말하면 CSS를 재설정 메커니즘 따라서 그들이 포즈 수있는 브라우저 기본값을 무시할 제로 또는 NULL 값으로 HTML 요소의 스타일을 설정합니다. 이것은 모든 사용자 에이전트 기본값 이러한 요소 공극 [의 속성 설정 깨끗한 슬레이트 제공 CSS2.1 사용자 에이전트 스타일 시트 기본값 ]. 모든 CSS는 프레임 워크가 재설정 메커니즘을 가지고 않습니다. 당신이 자신의 CSS를 재설정을 작성하는 경우에는주의의 단어는 키 속성을 다시 설정하는 것을 잊지에있다면, 그것은 디버깅하기가 매우 어렵습니다 교차 브라우저 문제로 이어질 수있다는 것입니다. , 기억 리셋 스타일의 사본을 보관하고 만들고 각각의 새 프로젝트로 그들을 놓습니다.

  몸, 사업부, DL, 안녕, DT, DD, UL, 리,
  H1, H2, H3, H4, H5, h6,
  사전, 형태, fieldset, 입력, 선택, textarea,
  P, 인용구, 테이블, 일, TD
  {
    테두리 : 0px;
    여백 : 0;
    패딩 : 0;
  } 

설정 기본값 (베이스 라인 스타일) 요소 :

당신이 (제로 또는 null로) 특정 HTML 요소의 특정 속성의 기본값을 설정한 후, 그것은 이러한 요소의 모든 인스턴스에 걸쳐 몇 가지 스타일을 적용할 필요가 있습니다. 이러한 기본 설정은 디자인에 따라 달라질 또는 다음과 모범 사례에 따라 수 있습니다.

대부분의 CSS는 프레임 워크는 항상 기본 브라우저 스타일을 다시 설정 이외에 몇 가지 새로운 기본값을 소개합니다.
이러한 기본값은 사용자 에이전트 기본값 (CSS를 재설정하여 버릴)의 무효되고, 이들은 브라우저에 걸쳐 일관성있게 될 것입니다.

기억하세요,베이스 라인 스타일은가는가 디자인 전체에 사용될 스타일을 설정하는 데 사용됩니다. 예.

  HTML {글꼴 크기 : 77 %; 글꼴 모음 :이 Arial, 산세 리프 - 리프;}
 강하고, H1, H2, H3, H4, H5, h6 {글꼴 두께 : 굵게;} 

일반적인 HTML 요소와 공통 클래스에 대한 추상 스타일 :

이러한 구성 요소가 프로젝트에 걸쳐 다시 사용되므로 여러 페이지로 구성된 대부분의 프로젝트가 만들어지면, 경고 및 오류, 사용자 정의 팝업, LightBoxes 등 예 : 일종의 사이트에서 사용 일반적인 HTML 요소를 가지게 될 것이며, 그것을 제공하기 위해 도움이 될 것입니다 이러한 구성 요소에 대한 사전 정의된 스타일과 관련된 클래스 집합 그리고 당신은 자신에게 많은 시간을 절약할 수 있습니다.

이외에도 일반적인 HTML 요소에 대해 재사용 가능한 스타일 정의를 정의로부터, 우리는 추상적인 스타일 클래스는 활판 인쇄술, 색상, 심지어 레이아웃에 관한 수 있습니다. 나 자신이 사용하는 경향이 ... Clearfix, Font08, FontGrey, AlignL, DisplayB 등 일반적인 수업을

  양식 입력 {테두리 : 0px; 배경 : # FFFFFF; 패딩 : 0px 10px; _padding : 0px 0px; 높이 : 26px; 색상 : # 000000; 라인 - 높이 : 30px; 글꼴 크기 : 1.1em;}
 양식 textarea {국경 : 0px; 배경 : # FFFFFF; 색상 : # 000000; 글꼴 크기 : 0.9 그들; 라인 - 높이 : 1.5em; 오버플 : 보이는;}
 . fbold {글꼴 두께 : 굵게; 색상 : # cccccc;}
 . fgrey {색상 : # 666666;}
 . flightgrey {색상 : # bbbbbb;}
 . {맑은 : 모두;} clearfix
 . 분할기 {국경 - 상단 : 1px 고체 # 647B06, 국경 바닥 : # 9CC00A 1px 고체, 높이 : 0px;}
 . displayb {디스플레이 : 블록;}. displayn {디스플레이 : 없음;}
 . alignr {텍스트 정렬 : 오른쪽}. alignc {텍스트 정렬 : 센터}
 . floatr {플로트 : 오른쪽;}. floatl {플로트 : 왼쪽;} 

일반적인 브라우저 만지면에 대한 수정

다양한 브라우저의 CSS 코드를 구현하고 CSS 사양에 대한 지원의 다양한 레벨을 제공합니다. 이것의 결과 .... 우리 개발자들이 달려들어 남아 있는지 "브라우저 만지면". 특히 IE6 지켜야 할 기사 마감 시간과 함께 대부분의 CSS를 탄생 하였다들을 괴롭 힙니다. 좋은 소식은 경험이 이러한 문제를 (종종 되나을 함께 가능한 재사용 가능한 수정을 가져왔다는 CSS를 해킹 ).

, 기억이 해킹 / 수정이 편리한 유지

  / * 다음과 같은 줌 : 1 규칙 IE6 + IE7을 위해 특별히입니다.  * /
    * HTML. clearfix,
    * :. 첫 아이 + HTML clearfix {
           줌 : 1;
      } 

당신의 CSS를 세부 조정 유지

• 다시 자전거의 습관은 하루에 당신에게 오지 않습니다. 그것은 개발해야한다. 그러니 다시 자전거를 계획. 당신이 등을 미리 생각하고 추상 디폴트 스타일, 활판 인쇄술 정의, 레이아웃, HTML 요소 스타일보십시오 수있다는 생각이 살짝.
• 또한 당신의 과거 프로젝트에서 다시보고, 당신이 porjects를 통해 자주 사용하는 경향이있는 스타일을 식별하는 데 도움이 될 것입니다. 그것 초록.
• 사용하지 않은 스타일을 제거합니다. 이러한 행위는 "Bloating"라는 공통적인 증상에서 CSS 프레임 워크를 유지합니다 -
• 반복적인 스타일을 제거합니다.
• 프로젝트를 통해 그것을 포트에 충분히 유연 스타일 집합을 빌드합니다.

CSS는 프레임 워크를 한 번 봐

마지막으로. 당신이 영감과 CSS 프레임 워크 중 하나 이상을 사용하려는 경우, Heres 몇 가지 인기있는 것들의 빠른 목록입니다 ....

• 960 그리드 시스템 : 960 그리드 시스템 960 픽셀 폭을 기준으로 일반적으로 사용되는 차원을 제공함으로써 웹 개발 워크플로우를 합리화하기위한 노력이다. 개별적으로 또는 협력하여 사용할 수 있습니다 12, 16 및 24 열, 세 가지 변종이있다. 당신은 쉽게 충분한 자신에 대해 하나를 만들 수 없다는 생각에 아무것도, 프레임 워크가 한 페이지 designs.Bet를 스케치하는 데 사용할 수있는 PDF 형식에서 인쇄를위한 그리드 템플릿을 제공하지 않습니다, 그것은 당신이 몇 시트 때 가지고있다면, 전문적인 인상을 만드는 것입니다 당신은 UI 요구 사항 수집을위한 클라이언트로 이동합니다. 그것은 또한 당신의 디자인 작업을 시작하기 위해 "10를위한 스타터 '를 제공 불꽃놀이, 플래시, InDesign, 일러스트 레이터, 포토샵, Visio가 등과 같은 인기있는 디자인 소프트웨어를위한 기본적인 그리드 템플릿을 제공합니다.
• 청사진 : 청사진이 분명히 구분 CSS의 재설정을위한 파일, 격자, 양식, 인쇄, 활판 인쇄술을위한 플러그인 버튼, 탭 및 스프 라이트 등 또한 포함 별도로 IE 용 지원을 제공을 제공합니다.
• SenCSs : 위에 두 달리 SenCSs (발음 센스)가 레이아웃을위한 CSS 정의가 없습니다. 그것은 글꼴, paddings, 여백, 테이블,리스트, 머리글, blockquotes, 양식 등을 포함 않습니다.
• BlueTrip : 명성 원래 주장은 그것이 블루 프린트, 여행 oli 같은 다른 프레임 워크 ... 그것이 그것의 이름를 얻을 수있는 곳에서 의해 제공 최상의 기능을 결합이라고했습니다. 그것의 특징 세트는 24 컬럼 그리드, 활판 인쇄술의 스타일, orm 스타일, 인쇄, 버튼 등이 포함되어 있습니다
• YUI 격자 : Yahooo 개발자 네트워크에 의해 귀하에게 데려온는 750px, 950px와 974px에서 유체 - 폭 (100 %) 레이아웃뿐만 아니라 미리 설정 고정폭 레이아웃을 지원하며, 쉽게 어떤 번호로 사용자 정의할 수있는 기능. 보시다시피, 그것의 기술적 단지 레이아웃 구성 요소. YUI는 다른 페이지 요소에 대한 HTML / CSS 세트를 제공
• YAML (또 다른 Multicolumn 레이아웃)
• Emastic

CSS는 프레임 워크를 사용하면 자신 중 하나를 만들 수 게으른 것을 의미하지는 않습니다 ... 그것은 당신이 다른 사람의 경험과 실수에서 배운다 시간과 생산성을 저장하려면 스마트는 것을 의미, 기억!!

포토샵과 일러스트 레이터 같은 도구로 내 제한된 기술 집합으로, 나는 정말로 내가 디자이너 나보다 그 저는 좋은 개발자를 고백하실 수 있습니다. 그러나 코어와 나의 배경 (서버 사이드) 자바 / PHP / 코볼로 개발, 내 UI 개발 기술에 대한 매우 긍정적인 영향되었습니다. 내 디자인을 만드는 동안, 말뜻은, 내가 디자인을 할 예 때마다, 나는 HTML-CSS를하는 동안 디자인 최고의 HTML-CSS로 변환하는 방법을 생각해, 나는 백엔드 기술에 대한 생각을 포기하고 합리적인 확인 HTML은 쉽게 XSL 루프 또는 PHP를 미리보기 등으로 구현할 수있는

년 동안, 나는 아마 donot는 HTML이나 CSS가 무엇인지 단서를 가지고 UI 디자이너에 의해 디자인에 머리를 던져왔다. 요즘 난 그냥 내 목구멍 설계 그의 "코드 불가능"를 shov하려고하는 디자이너가, 그의 디자인 변환될 것인 조금 이해할 거라면, 너무 많이 요구하는 것이라고 생각했습니다 로. 바로 도움이되는 건가?

그럼, 오늘이 게시물을 가로질러 온 ... 웹 디자이너를 누가 코드를 못 ... 감사의 주님! 난 단지 같은 느낌 많은 사람 중 하나입니다 ... 위의 artitle은 약간 긴 숨이 찬입니다 .. 하지만 읽기, 그것의 모든 단어의 가치.

엘리엇 제이 주식 고마워 ... 난 안심 느낌!

여기에서 일부 발췌입니다 Elliots의 기사 .

와, 하루에! 그것은 작은 짹짹로 시작하고 전체 웹 디자인 커뮤니티를 통해 청소 듯 토론으로 끝났다. 그것은 웹 디자이너들이 코드에 수 있어야 여부이라는 주제로 열리는 매우 강한 의견가 나타납니다.
...
우리가이 개입하기 전에,, 제가 신속하게 제가 트위터에 오늘 아침에 말한 일을 정리해보 수 있습니다 :

솔직히, 나는 2010 년 난 아직 자신의 디자인을 코딩 수 없습니다 '웹 디자이너'가로질러 간다 것이 놀랍군요. 변명.

난 내 짹짹에 대해서 좀 더 구체적으로 어야죠. 나는 실제 사이트에 평면 설계를 돌리고 심지어 가장 기본적인 HTML 및 CSS 기술이없는 디자이너에 대해 얘기했다. 아니 의도적으로 코드를 결정할 명, 누가 못해 그. 그리고 또 여기에만 프런트 엔드 코드를 참조하고, 물론 그것 설계자는 또한 놀라운 백엔드 프로그래머가해야한다고 생각하는 웃긴 데요 ...

우리는 코드에 불가능 일러스트 레이터, 300dpi로 보냄 '웹'디자인,, 아니 일관성 / 가용성을 얻을.
~ 에이미 Mahon

왜 이렇게 늦어, 나는 어떻게든 결론을 짓지 야해. 나도 자네 의견은 많은 사람이있을 것이고, 나의 의도는 코드가 없습니다 다른 사람을 불쾌하게하거나 화나게하는 것은 아니지만 내가 말한 것의 일부로 delving 때 항상 나오 포인트 중 일부를 반영되기를 바랍니다 이 토론.

하루의 끝에서, 나는 코드와 사람 수 없어 수있는 동안 잠못하지 않습니다. 난 그냥 순수하게 제가이 과거의 일이라고 생각으로서 프런트 엔드 기술이 부족 많은 디자이너를 찾아 놀랐어요.

내가 쓰기로도 의견을 읽고, 주위 320 코멘트가 있었으며 읽을 가치가 그들입니다.
Elliots 전체 게시물 여기를 읽어 보시기 바랍니다 .. 코딩 수없는 웹 디자이너

어제, 구글 크롬에서 CSS를 재설정과 함께 발생한 문제에 후 ... 난 사용자 에이전트 스타일 시트의 영역으로 깊이 비트를 파고 생각 ...
CSS2.1 사용자 에이전트 스타일 시트 ... (무엇을 "사용자 에이전트 스타일 시트"를 인식하지 못하는 분들은 다음과 곳입니다의 기본값에서이 테이블을 발견 사용자 에이전트 스타일 시트 (사양) 무엇입니까 .

CSS 2.1 사용자 에이전트 스타일 시트 기본값의 전체 목록을 보려면 여기를 클릭하십시오

어제, 다른 모든 '그라운드 호그 데이'처럼 약간의 CSS / tableless 레이아웃에서 작업되었습니다. 모두 IE 7, FF 3, 크롬에서 잘 진행되고 있었고, 전까지 갑자기 뭔가가 취소 ignorable 마진에만 Google 크롬에서 본 것을 보았다. 아주 이상하고 worring지만, 그것이 제가 accross 올 것을 몇 가지 새로운 버그 / 문제가 있었는데, 내 일상 업무의 일부 향신료 드디어있었습니다. 슬픈는 (그러나 좋은) 그것은 프로브의 몇 분 이내에 해결 했어요 ...

Google 크롬 내 CSS를 재설정합니다 (: 0px 여백) 무시처럼 기본적으로, 그것은 보였다. 그것은 실제로 사용자 에이전트 스타일 시트 (-웹킷 - 패딩 - 시작 : 40px)에 의해 발생되었다. 0 오작동 요소 : 그럼 해결책은 패딩을 설정하여 해당 스타일을 다시 설정하는 것이었습니다.
어떤 요소에 일어나고부터이 문제를 방지하기위한 좋은 방법은 다음과 같이 세계의 CSS 레스트를 사용하는 것입니다

* {여백 : 0; 패딩 : 0;}

사용자 에이전트 스타일 시트 (사양)이란 무엇입니까?
다음 발췌문은에서 가져옵니다 http://meiert.com/en/blog/20070922/user-agent-style-sheets/ 사용자 에이전트 스타일 시트에 자세한 내용을보실려면 후속 링크

하지만 틀림없이 일상 - - 방식으로 CSS 1은 각각의 사용자 에이전트 (UA, 종종 '웹 브라우저'또는 '웹 클라이언트') 합리적으로 문서를 제시 기본 스타일 시트를 가질 것이라고 진술하여 아이디어를 소개합니다. CSS 2는 부합하는 사용자 에이전트가 기본 스타일 시트를 적용해야합니다 (또는 그들이했던 것처럼 행동)과 사용자 에이전트의 기본 스타일 시트가 문서 언어에 대한 일반적인 프레 젠 테이션의 기대를 충족 방식으로 문서 언어의 요소를 제시해야한다고 말한다; CSS 3 같은 마음이 될 가능성이 높습니다.

CSS의 사양은 '진짜'스타일의 기본 표시를위한 시트 또는하지를 사용하는 여부 구현에 맡기 때문에, 그것은 당신이 모든 브라우저의 설치 폴더에 기본 스타일 시트를 찾을 수없는 놀라운 없어. 마이크로 소프트의 인터넷 익스플로러뿐만 아니라 오페라와는 달리, 예를 들면 (그리고 내가 아는 한), 파이어 폭스와 넷스케이프 네비게이터 ( "html.css"를 찾습니다)뿐만 아니라, Konqueror에서 같은 도마뱀 붙이 브라우저는 기본 스타일을 이해하는 것이 비교적 간단합니다.

나도 없다 사용자 인터페이스 (UI) 개발에 매우​​ 새로운 아냐없고 나는 베테랑이고 난 항상 그것을 넣어로서, 전 사실 후회와 함께, 더 많은 디자이너의 그것보다 UI 개발자의 프로필에 맞습니다. 아, 오! 제가 대해서 어떻게 쓰는 거지? 제가 UI 디자인 (전문 디자이너가 휴가 간 경우)의 비트로 언제 되는거죠 ... 잠시 동안 때때로 지금 (덜하지 년만에 있어야합니다), 전 항상 캔트 스톱 내 디자인해야 하는가에 대한 생각 제대로 complient 아닌거야 (진심으로, 나 역시 원하는 경우, 100 % 표준 준수를 achive 수는 없겠지만). 그렇다면 나 자신에게, 무슨 헛소리! ... 디자인은 (기술 예정) 방문자가 도망하게 ... 아니면 바운스 안된다, 간단한 멋지고 주로 사용할 것이어야합니다. 멋진 tableless의 CSS 레이아웃은 모든 스마트 하이퍼 텍스트와 웹페이지의 피부 아래에 CSS 스타일 시트 모른다는 것입니다 방문자, ... 무명의 사람들에게 좋은 무엇이 될 것입니다!
그것은 멋진 모양과 쉽게 사용할 수 있어야합니다 ... 그럼 표준 것들 모두가 온다.

나는 accross에게의 제이슨 프라이드를 기준으로 해당 블로그 항목 stumbbled 37 신호를 2004 년에 비슷한 써서 거의 5 년을 날 믿어 (알고 37 신호가 Basecamp, 캠프 파이어 등처럼 굉장한 웹 애플 리케이션을 만들어 onces가없는 사람들을 위해) 그리고 훨씬 그 이후 변경되지 ... 완전히 그가하는 말이 가지고 있으며, 또한, 그녀는 단지 자신의 직감에 대해 말해주는 것이라는 걸 확신 사실 아닙니까 동의로 나는 그의 게시물을 읽을 기분이 좋았고, 그래서 내가

제이슨 프라이드 : "이 방법은 CSS와 XHTML과 표준 및 접근성 얘기를 너무 많이이고, 충분한 사람에 대해 얘기하지. CSS와 표준 준수 코드는 도구입니다 - 당신이 도구를 사용하여 빌드해야할지해야합니다. 그래, 난 당신의 UI가 테이블을 사용하지 않습니다 기뻐요. 그래서 어쩌라고? 아직도 사람들이 목표를 달성하지 못한다면 무슨 상관이야. 웹 표준을 잘하지만, 사람들의 자기 기준 일이 (그것이 온라인 일을 아직도 너무 어려워요) 뭐하고 포함됩니다.

UI 디자이너는하고있는 예전의 근본적인 실수 "반대편에있는 인간을 잊고"- 그들의 코드가 잘 보이는 이번에는 제외.에게 인간 -없는 코드 validators - 사용 인터페이스 ".

체크 아웃 제이슨 프라이드의 전체 기사

DISCALIMER : 이것은 우리가 전혀 표준에 대해 걱정하지 말아야한다는 의미는 아닙니다. 기준가 있고 가능한 한 그들에 충실한 게 좋다. 우리는 오직 좋은 UI 디자인을 이해해야하는 것은 항상 100 % 기준 Complience 또는 그 반대를 의미하지는 않습니다 ....

내 수업의 유능한 내 목록에서 몇 UI 설계 및 개발 골든 규칙 ... Heres 톱 10을 따르십시오 ... 당신도 그들을 따라가 보지는 않았지만 ...

1. 사용자를 부탁해. 사용자가 만들거나 귀하의 사이트를 깰 수있다. 귀하의 웹사이트를 사용하는 전혀 불가능 총 바보야 등 사용자의 모습을 만들어 DONOT. 그건 최악이야!

2. 단순 유지하고 기본 guidlines를 사용의 용이성. 화면에 너무 많은 일, 더 높은 사용자가 혼동하거나 원래 작업에서 산만받을​​ 것이라는 확률.

3. 한계에 만나 ... DONOT은 사용성, 접근성 및 표준에 너무 빠지다. 효과적 표준을 사용하고 그들이 팀에 이해합니다. 이것은 제품의 오른​​쪽 일관성을 보장합니다

4. 요구 사항을 프로토 타입. 이후, 사용 인터페이스가 풍부 요즘 프로토 타이핑은 항상 단순 wireframes를 만들기보다이며 후자는 점잖은 상호 작용 무효이며, 그것은 고객에게 개발하고 최종 제품의 명확한 그림을 제공하기 위해 실패합니다. 항상, 그것은 최종 산출물로 프로토 타입을 변환하는 것이 더 쉽습니다. 또! 프로토 타입과 함께 모든 상호 작용 문제는 이전 개발주기에서 밖으로 다림질 수 있습니다.

5. 귀하의 설계 및 상호 작용의 일관성은 매우 중요하다. 예측할 수없는 상호 작용과 gizmos하여 사용자에게 혼란을 Donot.

6. 당신의 "디자인 경영 이념"을 이해합니다. 예측은 설계 페이지 beign의 기본 동작에 중점을 둡니다. 또한 페이지에 seconday 작업 목록을 만들, 그들의 우선 순위.

7. 사이트 사용자에게 적절한 피드백을 제공한다. AJAX 주위에 디자인된 웹사이트의 대부분으로, 페이지의 변경 사항에 대해 사용자에게 시각적인 단서를 제공합니다. 사용자는 그가 수행하는 모든 작업의​​ 완료 확인서를 제공해야한다. 사용자가 기다렸다 예 대해 생각하게 Donot. 파일 uplaods 동안 진행 표시기를 제공합니다.

8. 적절하게 컨트롤을 사용합니다. 예를 들어 용도로만, donot 사용자가 선택 상자를 사용하여 200 개 도시 중 하나를 선택할 작은 목록에 대한 목록을 드롭 다운 선택합니다. 버튼과 링크의 차이를 이해합니다. 링크 버튼은 다른 목적을 갖고 donot 다른을 위해 하나를 사용하십시오. 페이지가 쉽게와 상호 작용하기 위해 오른쪽 컨트롤을 제공합니다. 메뉴의 사용을 피하십시오, 그 이상 그 두 가지 수준의 깊이입니다. 바퀴를 재발견하지 마십시오. 그것들은 아주 필요한 경우 사용자 정의, 표준 컨트롤을 사용합니다. 그들이 만들어지고 사용 accross 사이트 준비, 독립적으로 테스트할 수 있도록 귀하의 사이트에 처음으로 핸드에 필요한 사용자 정의 컨트롤을 정의합니다.

9. Donot이 디자인에 너무 많이 반복. 기억해라! 모든 제품은 혼자보다 그 디자인으로 구성되어 있습니다. 설계 반복에 대한 프로젝트 일정에 적절한 타임 라인을 구축하고 끝까지 밀어 붙여라. 반복은 우리가 작동하고 무슨 문제 지점을 선택하지 않는 것을 확인할 수 있습니다. 좋은 인터페이스는 시간이 걸리는 것처럼, 디자인 반복에 직접 재작업있는 거고 doesnot 있도록 개발주기의 태초의 반복에 대한 시간을 제공합니다. 너무 많은 재작업 마감이 jeopradize 수 있습니다.

10. 편하게 앉아 때로는 사용자처럼 생각합니다.

당신은 animoto.com 봤니? 글쎄! 이것은 AD 아니라, 내가 정말 좋아! 그리고 그것은 참으로 엉덩이 UI를 키스

몇 주 전에이 사이트를 발견 했어. 첫 페이지를 보았는데, 많은 걱정을 움푹 들어간 곳. 저한 테는 사용자가 이미지를 업로드 일부 트랙을 선택하고 멋진 사진 슬라이드쇼로 변환하므로 일부 풍부한 플래시 콘텐츠가 포함된 또 다른 사이트를했습니다. FLV를 다운로드하여 원하는 모든 사이트 (유튜브, MetaCafe, 페이스 북과 좋아하는) ... 기간에 올려 놓는거야.

어제 내가이 슬라이드쇼 생성을 통해 사용자를 찍은 내부 흐름 페이지를봤을 때 .... 나는 오 와우 갔어요! 저는 플래시 사용의 비트가없는 것을 알았을 때. 그것은 참으로 풍부한 사용자 인터페이스했습니다. 모든 UI 개발자 만들 바램이거나 적어도이 인터페이스를 하셨읍니다 팀의 일부가되어야합니다 .... 정말 훌륭 했어! 그리고 격려!

저기 .. 가질 http://animoto.com/을 ... 그리고 등록하고 이걸 가지고 놀았 ... 오직 그때 당신은 천재 감사합니다.

나 외에 목록에이 문서를 읽어 " 가짜 절대 위치
에릭 솔에 의해 , "나는 감동보다 적은 아무것도 아니 었어. 또 나는 원인, majorly 우울했습니다, 정말로 내가 궁금해서, 왜 내가이 같은 멋진 해낼 수 없잖.

보통, 우리의 CSS 레이아웃을 만들 때, 우리는 "위치"또는 "수레", 또는 두 가지 모두 매우 나쁜 조합을 사용합니다. 에릭 솔와 그의 팀은 그들이 칼럼의 존재를 시뮬레이션 가짜 열 기법 후 "가짜 절대 위치"로 세례 않은 CSS 레이아웃 기법, 새로운 유형의 완벽한 테크닉 옆에를 정의합니다.

당신은 우리의 CSS 개발자 모두가 약해 레이아웃 (우리가 떠오르 레이아웃을 사용하여 포장 전체에 열이 발생할 예기치 내용 변경,)를 가지고 그 문제를 알고 ... 글쎄! 역사를 보이는데!!
그것이 유엔의 작성 표준되기 전에이 레이아웃 기술은 아직 어리이며, 세상의 모든 분들의 CSS gurus 의해 휴지통한다. 지금은 그것을 사용 드리겠습니다! 그리고 이미 FAP 레이아웃에 나의 이전 문제 / 부동 해제 반드시 레이아웃을 변환하는 중간에 이미이다 ... 그리고 말할 수있어 기뻐요 "우리는 이미뿐만 아니라 해당 블로그 사이트에 가짜 절대 위치를 사용하고있다"... 지금 그것을 시도 GO!

명예, 에릭!

페이지에 대한 자세한 DOM 요소가 느린가 렌더링, 느린 JavaScript의 DOM에 액세스할 수 있습니다. DOM 요소의 높은 숫자로 인해 나쁜 레이아웃 설계가 될 수 있습니다. 예를 들어, 중첩된 테이블은 레이아웃 용도로 사용되었을 수 있습니다. 의미적으로 말이되는 HTML 태그를 사용합니다. 레이아웃을위한 예 DONOT 사용 테이블의 경우지만, DONOT는 표 형식 데이터를 표시 할 곳에 그들을 사용하기 위해 주저하고, 따라서 DIVs만을 사용하여 만든 유사한 구조로, 비교에 DOM 요소를 줄이고 사용합니다 ..

귀하의 HTML 페이지의 DOM 요소의 개수를 테스트하려면 대해 Firebug의 콘솔에서 다음을 입력합니다 document.getElementsByTagName('*').length

너무 많은가 얼마나 많은 DOM 요소에 대해 아무런 설정된 표준은 없습니다. 좋은 markup.Eg이 다른 유사 페이지를 확인하십시오. 야후 홈페이지가 아주 바쁜 페이지입니다 아직도 이하 700 요소 (HTML 태그).

AJAX 요청을 해드 사용

데이터를 전송 후, 먼저 헤더를 보내는 : 이것은 XMLHttpRequest의 사용시, POST는 두 단계 프로세스로 브라우저에서 구현되는 것이 발견되었습니다. 그래서 GET, 전용 (당신이 쿠키를 많이 없다면)를 보내는 하나의 TCP 패킷을 소요하는 사용하는 것이예요. IE에서 최대 URL 길이는 2K 데이터보다 더 보내면 때문에 얻을 사용하지 못할 수도 2K입니다.
흥미로운 측면 영향은 실제로 데이터가있을 것 같은 행동을 게시하지 않고 해당 게시물입니다. 해드가 정보를 검색에 불과한 것이다, 그래서 당신이 오직 같은 서버측에 저장되는 데이터를 전송 반대 데이터를 요청할 때 해드를 사용하는 의미가 (의미적으로) 만듭니다.

동기식 AJAX 호출을 피하십시오

에서 'Ajax'요청을 만들 때 비동기 또는 동기 모드 중 하나를 선택할 수 있습니다. 다른 브라우저 활동을 처리하는 데 계속하면서 비동기 모드는 백그라운드에서 요청을 실행합니다. 동기화 모드는 계속하기 전에 반환하는 요청을 기다립니다.
동기화 모드로 만든 요청은 피해야한다. 이러한 요청은 요청 반환 때까지 사용자를 위해 잠글 브라우저를 초래하게됩니다. 경우에 따라 서버가 바쁜이고 응답은 사용자의 브라우저 (그리고 아마도 OS를) 시간이 지나야 어디해야할 다른 일이 허용하지 않습니다. 응답이 제대로 수신하지 않을 경우, 브라우저는 요청이 시간 초과되기 전까지 차단하도록 계속 사용할 수 있습니다.
귀하의 상황이 동기화 모드가 필요하다는 생각이 그렇다면, 당신의 디자인을 다시 생각할 가능성이 가장 높은 시간입니다. (있을 경우) 거의 상황은 실제로 동기화 모드에서 아약스 요청이 필요합니다.

이미지를 최적화

최적화는 단순히 필요한 수준의 이미지 품질을 유지 작은 이미지의 크기를 유지하는 것을 의미합니다. 일단 그들이 배달 서버에로드되기 전에 이미지를 최적화하기 위해 수행 수있는 프로 시저의 부하가 있습니다. 우리는 (포토샵, 불꽃놀이 등) 이러한 이미지의 생성에 사용하는 도구는 일반적으로 사용자가 웹 사용에 대한 이미지를 최적화할 수있는 도구가 있습니다.
• 그들은 이미지 색상의 개수에 해당하는 팔레트 크기를 사용하고 있는지 GIF의를 확인합니다. 이미지는 4 색상과 256 색 팔레트를 사용하면 다음 이미지가 더 최적화 될 수

• 변환 GIF는 PNG의 가능한 위해 그리고 절약이있다면 참조하십시오. 종종있다. 그들은 완전히 일반적으로 사용되는 브라우저의 대부분이 지원하는 한, PNG의 사용을 주저하지 마십시오. PNG는 투명도를 포함, GIF이 무엇을 할 수있는 애니메이션 기능을 기대합니다.

• CSS의 스프 라이트에 사용되는 이미지의 경우 가로 요정과 같은 작은 파일 크기의 수직 대개 결과로 반대의 이미지를 배열합니다. 또한, 요정에서 유사한 색상으로 이미지를 결합하여. 이것은 이상적으로 너무 PNG8에 맞는 256 색 아래의 색 수를 낮게 유지하는 데 유용합니다.

• 당신은 favicon.ico를 사용하는 경우 선호 1K 아래 별게.

적절히 조정 / 이미지 크기가 조정을 사용합니다.

항상 노력하고 크기를 조정할 이미지를 사용, 즉 여러분이 HTML의 너비와 높이를 설정할 수 있습니다 이유만으로 필요한 것보다 더 큰 이미지를 사용하지 마십시오. 당신이 페이지에 100px X 100px 이미지를 표시해야하는 경우 다음 200x200px 이미지 다운 스케일을 사용하지 마십시오.

프로 그레시브 이미지를 사용

웹 브라우저는 이미 점차적으로 이미지를 렌더링. 더욱 수행하려면 "프로 그레시브"옵션과 "인터 레이스"옵션 또는 JPEG 이미지로 GIF 또는 PNG 이미지를 저장합니다.

진취적인 이미지의 사용은 축복이나 지장 것인 지에 대한 웹 사용자 간의 지속적인 논의가있다. 또한 프로 그레시브 이미지는 아닌 프로 그레시브 대응보다 약 20 % 더 무겁죠. 당신이 레이아웃은 프로 그레시브 됨으로써 사용자 경험을 방해하지 않을 이미지를 사용하여 생각한다면 그래서, 이렇게 셔도됩니다.