Responsive Design is the one of the latest trends in website development/design. More consumers are accessing the web from a variety of devices. These range from traditional devices like computers to tablets to smartphones. In order to maximize your website’s effectiveness, it needs to be able to be properly displayed on all devices. Responsive Design is commonly defined as building a website for a number of devices that adapts to each ones display /functional requirements. Ideally, you want your content to adapt to fit the user’s screen and display regardless of what device they are using.

There are a number of approaches that are critical to successfully implementing Responsive Design:

Mobile First Design – This focuses on starting with the smallest devices like smartphones, and designing your website around this. This can mean anything from removing content that won’t display on phones, to eliminating excess elements from your page that can make it difficult to display.

Media Queries – These can be added to a website’s style sheets/CSS. They are used to alter the way in which content appears in different devices using rules.

Fluid Grids – Unlike fixed grids, which stay the same width for every screen, these are defined using percentages. This allows them to change size, but remain in the same proportion to each other.

Some tools currently available for use are BootStrap which was developed by Twitter, Unsematic which helps with fluid grid design, and ResponsivePX which can be used to evaluate the current responsiveness of your site. Adobe also has released Edge Reflow which offers a variety of design tools. Please click on the ‘tools’ link to find a more extensive list of options out there. Now that you know the basics, time to get started on making your website responsive with the help of some tutorials!