{"id":47,"date":"2011-06-11T21:50:45","date_gmt":"2011-06-11T21:50:45","guid":{"rendered":"http:\/\/www.websitedesignwebsitedevelopment.com\/?p=47"},"modified":"2014-03-19T09:14:27","modified_gmt":"2014-03-19T09:14:27","slug":"10-points-to-be-covered-when-converting-a-design-to-html","status":"publish","type":"post","link":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/","title":{"rendered":"10 points to be covered when converting a design to html"},"content":{"rendered":"

10 points to be covered when converting a design to html:<\/h2>\n
    \n
  1. Site Architecture should be well communicated among\n
      \"\"<\/p>\n
    • Stakeholders<\/li>\n
    • Designers<\/li>\n
    • Developers<\/li>\n
    • QA Dept.<\/li>\n<\/ul>\n<\/li>\n
    • Define those modules which are repeating all over the website more than 1 time and write styles for those modules with \u201cid\u201d instead of applying classes on them\n

      Reason: This distinction will help you to keep the views different because as we studies about id\u2019s and classes that id\u2019s we should and can use once in a page and classes can be used many times. So every different id will refer to a different style and layout.<\/li>\n

    • Use <ul>\/<ol> and <li> tags for listings, good practices now a days for even header menu, categories menu and footer menu too.<\/li>\n
    • Don\u2019t forget to start your html with \u201cwrapper\u201d div and style \u201cmargin: 0 auto\u201d. The reason is resizing of browsers will not affect the website\u2019s position.<\/li>\n
    • Either you have to use background for input buttons, don\u2019t use hyper links for this purpose. Prefer to use <input type=\u201dbutton\u201d .<\/li>\n
    • Try to maintain hierarchy among important and less important headings, even sub-headings respectively.\n

      e.g.<\/p>\n

      <h1> Most important or the main one<\/p>\n

      <h3> Less important or the second one and so on up to available tags<\/li>\n

    • Never be specific about height and width of the inner div\u2019s but the outer div\u2019s because if ever you will change your outer div so inner div will require clerical job again to set them accordingly. It is suggested that use unique specific height and width once and then use one of the following to continue further:\n
        \n
      • width: inherit<\/li>\n
      • height: inherit<\/li>\n
      • width: 100%<\/li>\n
      • height 100%<\/li>\n<\/ul>\n<\/li>\n

        etc.<\/p>\n

      • Never forget special cases which can change your layout in development process. For that situation you have to either ask your team about the length required for home page, left menu, right menu or bottom content modules. Mostly proposed design does have a specific length and gradient applied rounded corner box which doesn\u2019t justify its existence and can\u2019t be extended according to more text.<\/li>\n
      • Try to avoid putting classes or ids on html tags every time. Like if you are working on contact us page so make a div with id=\u201dcontact_us\u201d and then target each html input field and even labels with reference to the above mentioned id.e.g.\n

        #contact_us input<\/p>\n

        {<\/p>\n

        ..some styles<\/p>\n

        }<\/p>\n

        #contact_us label<\/p>\n

        {<\/p>\n

        .. some styles<\/p>\n

        }<\/p>\n

        #contact_us #submit<\/p>\n

        {<\/p>\n

        ..some styles for submit button etc.<\/p>\n

        }<\/p>\n

        It will give convenience to the developers when they will increase or decrease the no. of input fields. Instead of applying particular classes or ids to every input field. Suppose you have a 20 input fields form then?<\/li>\n

      • Finally for the images, it is suggested that\n
          \n
        • Set border:0px for all over the website as general class.<\/li>\n
        • Use alt tags, better practice while writing html so developer will fill it as well<\/li>\n
        • Gallery images or any other content area images should be with one of the following tags\n
            \n
          • min-height:100px;<\/li>\n
          • min-widht:100px;<\/li>\n
          • max-height:200px;<\/li>\n
          • max-width:200px;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n

            Reason: Because if you will implement square dimensions to all images, it will either give an old fashioned look like we had websites in 1997 or will lead towards client\u2019s dissatisfaction.<\/p>\n

            Suggestion: It is suggested that you create a nice background for images. So images will fitted in it either small, large, vertically large or horizontally wide.<\/ol>\n","protected":false},"excerpt":{"rendered":"

            10 points to be covered when converting a design to html: Site Architecture should be well communicated among Stakeholders Designers Developers QA Dept. Define those modules which are repeating all over the website more than 1 time and write styles for those modules with \u201cid\u201d instead of applying classes on them Reason: This distinction will […]<\/p>\n","protected":false},"author":1,"featured_media":49,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"acf":[],"yoast_head":"\nconverting a design to html<\/title>\n<meta name=\"description\" content=\"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"converting a design to html\" \/>\n<meta property=\"og:description\" content=\"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence\" \/>\n<meta property=\"og:url\" content=\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\" \/>\n<meta property=\"og:site_name\" content=\"AndroidBubble Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/Website-Design-Website-Development\/172363336135453\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-11T21:50:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-19T09:14:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"259\" \/>\n\t<meta property=\"og:image:height\" content=\"194\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fahad\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fahad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\"},\"author\":{\"name\":\"Fahad\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\"},\"headline\":\"10 points to be covered when converting a design to html\",\"datePublished\":\"2011-06-11T21:50:45+00:00\",\"dateModified\":\"2014-03-19T09:14:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\"},\"wordCount\":581,\"image\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\",\"url\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\",\"name\":\"converting a design to html\",\"isPartOf\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg\",\"datePublished\":\"2011-06-11T21:50:45+00:00\",\"dateModified\":\"2014-03-19T09:14:27+00:00\",\"author\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\"},\"description\":\"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence\",\"breadcrumb\":{\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage\",\"url\":\"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg\",\"contentUrl\":\"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg\",\"width\":\"259\",\"height\":\"194\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/androidbubble.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Design\",\"item\":\"https:\/\/androidbubble.com\/blog\/category\/website-design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML\",\"item\":\"https:\/\/androidbubble.com\/blog\/category\/website-design\/html\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"10 points to be covered when converting a design to html\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#website\",\"url\":\"https:\/\/androidbubble.com\/blog\/\",\"name\":\"AndroidBubble Blog\",\"description\":\"Articles & Posts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/androidbubble.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7\",\"name\":\"Fahad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g\",\"caption\":\"Fahad\"},\"sameAs\":[\"http:\/\/www.androidbubbles.com\/\",\"https:\/\/x.com\/phpFlex\"],\"url\":\"https:\/\/androidbubble.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"converting a design to html","description":"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/","og_locale":"en_US","og_type":"article","og_title":"converting a design to html","og_description":"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence","og_url":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/","og_site_name":"AndroidBubble Blog","article_publisher":"https:\/\/www.facebook.com\/pages\/Website-Design-Website-Development\/172363336135453","article_published_time":"2011-06-11T21:50:45+00:00","article_modified_time":"2014-03-19T09:14:27+00:00","og_image":[{"width":259,"height":194,"url":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","type":"image\/jpeg"}],"author":"Fahad","twitter_misc":{"Written by":"Fahad","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#article","isPartOf":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/"},"author":{"name":"Fahad","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7"},"headline":"10 points to be covered when converting a design to html","datePublished":"2011-06-11T21:50:45+00:00","dateModified":"2014-03-19T09:14:27+00:00","mainEntityOfPage":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/"},"wordCount":581,"image":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage"},"thumbnailUrl":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/","url":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/","name":"converting a design to html","isPartOf":{"@id":"https:\/\/androidbubble.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage"},"image":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage"},"thumbnailUrl":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","datePublished":"2011-06-11T21:50:45+00:00","dateModified":"2014-03-19T09:14:27+00:00","author":{"@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7"},"description":"converting a design to html is an article for those designers who just started love to div based html with the help of css want excellence","breadcrumb":{"@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#primaryimage","url":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","contentUrl":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","width":"259","height":"194"},{"@type":"BreadcrumbList","@id":"https:\/\/androidbubble.com\/blog\/website-design\/html\/10-points-to-be-covered-when-converting-a-design-to-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/androidbubble.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website Design","item":"https:\/\/androidbubble.com\/blog\/category\/website-design\/"},{"@type":"ListItem","position":3,"name":"HTML","item":"https:\/\/androidbubble.com\/blog\/category\/website-design\/html\/"},{"@type":"ListItem","position":4,"name":"10 points to be covered when converting a design to html"}]},{"@type":"WebSite","@id":"https:\/\/androidbubble.com\/blog\/#website","url":"https:\/\/androidbubble.com\/blog\/","name":"AndroidBubble Blog","description":"Articles & Posts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/androidbubble.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/0a833b633f744c3a5e0de7c9a94e71f7","name":"Fahad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/androidbubble.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afab5bcad71955d142a69df1758e6710aed4ab9cc2b5da28c54a7c3f39801b73?s=96&d=mm&r=g","caption":"Fahad"},"sameAs":["http:\/\/www.androidbubbles.com\/","https:\/\/x.com\/phpFlex"],"url":"https:\/\/androidbubble.com\/blog\/author\/admin\/"}]}},"views":1195,"jetpack_featured_media_url":"https:\/\/androidbubble.com\/blog\/wp-content\/uploads\/2011\/06\/stakeholder.jpg","_links":{"self":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":10,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions\/163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/androidbubble.com\/blog\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}