Best Practices to Make Your Site Responsive (RWD)

In a current era, Responsive Website Design must require to develop your site. If you are making a site which can be easily open at desktops, laptops, I pads, Mobiles and etc. In short, your site is clearly visible with all digital devices.

For achieving that purpose, you have to create your site responsive. Means, it covers all different dimensions of all different devices.

Best Practice to make Responsive Website Design (RWD):

• Give "width, padding-left, padding-right, margin-left, margin-right" in percentages (%).Because whenever you try to reduce or expand the width of screen, these Css properties are automatically updated.
• Don't give "width, padding-left, padding-right, margin-left, margin-right" in pixels because it contains static values. It may not get changed when you try to shrink or expand your page.
• Always check compatibility of your page in Mozilla Firefox, Google Chrome, Safari, Opera ,IE 9 as well as above versions.
•  Don't nest block level elements into inline elements Eg. <span><div></div></span>. It violates the standards of HTML.
• Use proper coding conventions and rules for HTML and Css to develop a page.
• Study Best Practices for HTML and Css before starting to make a page.
• Always make HTML first. After making HTML, write Css for making RWD.
• If you are using any framework like Bootstrap, always look after for coding standards of HTML and Css. Because in most of cases, Bootstrap violates coding standards.
• Whenever you are creating your site, give most of the values of Css properties in percentages (%).So that it will complete your 80% task for making RWD.
• For remaining 20% work, if your page is not fit for a particular dimension, use media query for that dimension only.
• Try to avoid device specific hacks as well as use of media queries.
• Give size of each elements (Without using hacks and media queries) in such a way that your page should visible in each dimensions.
• Use HTML and Css Validator Plug-in to validate your code.
•  Make minified version of Css before deploying your code on production. Use Css Compressor for making Css minified. 
•  Avoid/stop use of "important" in Css.   

It's not still finished. But you can get at least basic idea about how to implement Responsive Website Design (RWD).

Guys, Keep Exploring. If you have any query, please feel free to contact me.

Atom (Open Source - Text Editor) Auto Indentation

Atom is an Open Source Text Editor. It supports couple of languages like Html, C#, Python, PHP, JavaScript and etc.  

I would like to share how to perform Auto Indentation in Atom.

Step 1:

Open File- Init Script - Paste below code

atom.workspace.observeTextEditors (editor) ->

  editor.buffer.onWillSave ->

    return if editor?.getGrammar()?.scopeName is 'source.coffee'

    editor.autoIndentBufferRows 0, editor.getBuffer().getLineCount() - 1

Step 2: 

Open File- Key map - Paste below code

'atom-text-editor':

  'ctrl-alt-l': 'editor:auto-indent'

Once you finish with both the steps, please restart your Atom. 

Now whenever you write some code and press “Ctrl + S" key, your code will be auto indented. 

Happy coding...!! 

Atom (Open Source) - A hackable text editor for 21st Century

Atom is a free and open-source text and source code editor for OS X, Linux, and Windows. It provides support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub.

You can visit official site of Atom on below link:

https://atom.io/

You can easily download Atom from below link. It’s Open Source Text Editor.

http://flight-manual.atom.io/getting-started/sections/installing-atom/ 


Features of Atom:

1. Cross Platform Editing
Atom can work on any OS like Windows, Linux or OS X.

2. Built In Package Manager
You can search and install new packages. Even you can create your own.

3. Auto completion
Atom automatically completes your code once you write starting character or a word.

4. File System Browser
You can easily browse single file, multiple files or even whole project at a time.

5. Grammar Selection
You can set grammar selection according to file type so that proper color identification and intelligence can get from Atom.

Atom is a desktop application built using web technologies like HTML, CSS, Javascript and Node.Js. Atom is based on Electron (formerly known as Atom Shell), a framework.

Atom also enables cross-platform desktop applications using Chromium and io.js, which is also developed by GitHub. It is written in Less and CoffeeScript. 

Atom can also be used as an IDE. Atom was released from beta, as version 1.0, on June 25, 2015.Its developers call it a "hackable text editor for the 21st Century".