Choosepizzi.net-logo

Andrea

info@choosepizzi.com

Markup Checklist

Hi there! When you’re going to pass your work to the client, make sure that it supplies first five things from this list:

  1. Layout conformity.
  2. Your work is crossbrowser, has the right encoding and DOCTYPE.
  3. All possible validations should be passed (including CSSLint and JSHint), accessibility and microformatting.
  4. CSS blocks independence: cascade minimization and Block-Element-Modifier.
  5. Your site should be looking fine across all screens having resolution larger than 1024, don’t have horizontal scroll and blend the mobile device screen.
  6. The layout should respond correctly when you submit any text to it (means that your markup should be reliable).
  7. You should write CSS using the preprocessor (like LESS/Sass/Stylus). Also you should think of using a builder like Grunt or Gulp and some kind of postprocessors (PostCSS/Autoprefixer).
  8. Minify your HTML, CSS, JavaScript, SVG and images, Critical Path, CSS sprites, CDN and many other WPO practices. My collections of essential plugins for Gulp and Grunt can help you. Check your download speed:
  9. Retina ready.
  10. Check that your site includes some Win/Mac/Linux fonts alternatives in case there is an issue with one of them.
  11. Availability during image download.
  12. HTML5 forms, linking, validation (make sure to run some before going to production).
  13. Semantics. Please remove all your fools, make your HTML neat and tidy.
  14. Correct headings structure (h1, h2, etc. and title).
  15. Your site must work with disabled Javascript or while it is being downloaded (if your site can’t work without it, make sure to warn your client to activate this option in their browser).
  16. Non-Flash operability. You’d better don’t use it at all and switch to HTML5. But in case you do, it must work correctly and be supported.
  17. Check that screen resize and font size changes can’t brake your project.

13: Good and Bad

You must be known that semantics should be presented not only into used elements but in their classes too.

Bad:
  • That is the worst but not so often these days: float:left for all the blocks. You can check it this way: Web Developer Outline → Float elements. If you have red blocks then your layout is done not a good way.
  • Margins should be implemented as block’s margin and not as for block’s content.
  • Missed titles.
  • Missed alts.
  • Browser hacks into main.css (with filters and without them). Without filters example: {zoom: 1;}. This one will be applied to all IE and not only to those which have problems. With filters: (* html, *+html, etc.). That’s bad because your code is too big and it is hard to read anything. Different hacks may execute warnings in CSSLint. Conditinal Elements were good to use before but these days thay’re bad because of too big number of files. It is recommended to use defferent classes likehtml.ie7, html.ie8,… (from HTML5 Boilerplate), Modernizer feature detection (likehtml.js.flexbox.canvas.no-touch…) and JS-detection (for example, CSS Browser Selector which generates classes like html.webkit.chrome.chrome25.win.win8…).
  • Bad practice is don’t check tabindex in your forms.
  • Bad is to write styles without thinking of your elements positioning. For example, if your element should be on the top, it must have a big z-index. You don’t hope that it will be looking good later if it seems to be right now. If you expect your element to be located at the same place and not depend on others then you should use position: absolute; instead of float.
  • Presentation classes – (right, red).
  • You should avoid using empty blocks in favour of presentation effects. Try to add pseudo-elements instead.
  • It’s bad not to have styles for default elements like h1, h2 and others. Use Normalize instead of Reset CSS.
  • Try to make your styles simple at the top and make them clearer at the deeper levels. You should organize cascade for your text and implement Block-Element-Modifier for your blocks.
  • Having too accurate styles for global element is the worst thing ever. For example, if you have a {font: italic 10px Tahoma;} then you will have to rewrite styles for each link in different block.
  • Sizes should be declared in the same dimensions. So having height and length in px and margin/padding in em is a mistake.
  • Apply styles for nested tags selectors, without classes. For example h2 a span { ... } can make problems in different places.
  • Setting visual settings in the direct order via JS like $('.element').css(color,"#f00") is bad. That should be done using classes change.
Good:
  • BEM! You should understand that it is a method and not a tool. It is okay to use BEM CSS for regular sites. You must leave cascade and BEM is a great option for that.
  • Structuring your code in the blocks describing the logic of the document. Conversely, adding extadivs only for visual elements, whicth doesn’t need structure is bad.
  • HTML5 Boilerplate is a great layout from “creators”. Connect and collaborate with them!
  • Use pre-made snippets and solutions. They probably will be more effective. You made your own, make sure to maintaint it.
  • Atomicity of CSS (Atomic Design and SMACSS).
  • The same HTML for block with similar content, but different visual representation of data. It should be done by block’s modificators, not by changing parent’s blocks.

18. What Is Important

  • Logo on the inner pages should refer to the main page. Title page’s logo should be equal to h1, inner logo – div.
  • Every page should have a unique title like About Us — %CompanyName%.
  • All pages should be linked and checked for bad linking.
  • All links should react on :hover, :active and :focus. All menu links should interact with:visited.
  • Check up that all your interactive elements are working.
  • “Content at the top”. Your text should be before the sidebars and everything else.
  • All pages should initially be split into templates, so that the programmer easier to integrate them.
  • You must have good copyright.
  • Make sure to add favicon.ico (with different dimensions) and apple-touch icon.
  • Delete all the code that you don’t need (comments and something like that).
  • Text blocks dimensions should be defined in rem or em and not in px.
  • Skype plugin should work correctly and don’t brake your layout.
  • Make sure that text-area resize keeps your page in a great condition.
  • Check that 404 page is given with 404 code.
  • If you have program-made images then you should check that their size is set correctly.
  • Check your spelling.
  • External links should be made with target="_blank". You’d better add a special symbol to them too.
  • Separate all the images with your CSS and JS. Graphics that is not connected to your site design (like user photos) should be places to another directory.
  • All the images should be scalable and depend on the window size (max-width:100%; height:auto;).

 

 

 

by : http://ipestov.com/markup-checklist/