1. Check the doctype for HTML5 coding
  2. Use HTML5 <tags> for responsive site
  3. Use html5.js, modernizr.js for avoiding the browser Issues.
  4. Check the completed HTML page in different browsers like IE7, IE8,..FF,Safari, Chorme in MAC/Windows.
  5. Responsive site will support on modern browsers only (IE9 and above for MS and other updated versions)
  6. Validate your HTML pages and CSS in W3C Validator.
  7. Unique page title is important for all pages
  8. Use media queries for different resolutions
  9. Use percentage(%) for responsive layout
  10. Test your responsive HTML pages in actual devices like mobile/Tablets/Desktops
  11. Don’t use online simulator for resolution/device testing(It may differ)
  12. Mostly avoid the “Pixels” (.px) for responsive layout.
  13. Check the <div> and other tags are closed properly.
  14. Don’t use inline styles
  15. Avoid internal CSS for every pages
  16. Avoid “!important” on CSS
  17. Don’t use CSS browser Hacks until necessary.
  18. Avoid “Position:absolute” property with negative values
  19. Avoid “Negative” values usage in css.
  20. Use one <h1> tag per page is important.
  21. Avoid inline java script
  22. Don’t use many JS files
  23. Use updated JavaScript file
  24. Image file sizes should be minimal
  25. Use Sprite images for easy loading(optional)
  26. Use shorthand CSS for reducing number of lines.
  27. CSS file size should be minimal
  28. Use relevant names for ID/Classes
  29. Don’t use duplicate IDs
  30. Write the <!–comments –> in coding for understanding the new developer/user
  31. Image Optimization (Provide quality image)
  32. Check the Royalty images are licenced
  33. Check the fonts are licenced or used web fonts
  34. Use embedded style fonts for web pages
  35. Use proper naming conventions and tree structure for files and folders

Author: Kirubai (http://articles.org/html-coding-standards-and-best-practices/)

Responsive Themes

Posted: April 7, 2016 in Uncategorized

It’s Hard To Miss The Word “Responsive” When Looking At Drupal Themes These Days.

WHAT IS RESPONSIVE DESIGN?

A responsive theme allows a website to be displayed smoothly across a wide variety of monitor sizes, screen resolutions, platforms, and devices. Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a dynamic website that adapts to the width of the user’s screen and works for both large and small screens. This involves creating a flexible-width layout that will adapt as the screen size changes, and writing code specific to screens with a particular size so that you can trim down or hide certain elements at smaller widths and restrict the width of the page on large screens.

MOBILE SOLUTIONS

Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.

Responsive design uses a blend of fluid layouts, CSS3 media queries and flexible images that when combined allow your site to adapt to the device it’s being viewed on.

Your standard desktop site might be three columns, but in your average smartphone you might want to display only one column – this is entirely doable using responsive design – it’s a way of re-flowing the content and layout to suit the width of the device.

THE WAY FORWARD

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.

Author: Kirubai (http://www.drupalgeeks.com/drupal-blog/responsive-themes)