Did you know that your website does not automatically render the same way on every device that looks at it? Smartphones, laptops, desktops, tablets, and even different browser alternatives each render your page differently.
This reality offers both a challenge and an opportunity called responsive design. The challenge of responsive design is to ensure that your information is presented in an easy to navigate and consistent way to present your brand consistently, and effectively, to your audience. The opportunity is to alter your site without completely rebuilding to appear completely identically or differently from your original desktop level design. Even if you want your page to look exactly the same on every device, specific coding must be used to ensure that all of your elements appear in the right locations and in the correct size.
Fortunately, there are lots of responsive themes already created online that are just waiting for you to apply to your content management system that take care of the necessary coding alterations for you. These responsive thees use specific media queries on cascading style sheets (CSS) that tell the website how to render based upon the given screen size of the individual viewer. In other words, they are programmed to render the look and feel of your website based upon the width of the end-viewer’s device. The work has been done for you, so even if you are not an expert coder, you can appear to be. These codes can then be used on landing pages by importing your HTML into your marketing automation software, and streaming the existing CSS from your theme onto the page. Simply load your content and images, and you will be good to go!
To answer the responsive web development resource availability question, there are an almost endless number of websites available online to help with this process. Responsive websites use specific media queries on cascading style sheets that tell the website how to render based upon the given screen size of the individual user. Here are a few resources that I use when I have questions:
- www.w3schools.com: This one is great for general coding questions and demonstrations
- www.teamtreehouse.com and www.codeschoolcom both offer interactive classes for coding that I have heard offer lots of information in a fun way
- css-tricks.com/snippets/css/media-queries-for-standard-devices/ For the css ninjas out there, this link offers a standard list of media queries to be used on cascading style sheets to target specific device sizes.