As desktop computer sales slowdown we are seeing a shift to not only tablets but to smartphones. As more people use a multitude of devices to access the internet we have to find ways of handling these devices in the most efficient manner possible. One can build a website specifically for each type of device or you can build a site that is responsive in nature that will resize to fit the device that it is being viewed on; including landscape and portrait views on the device. This is where responsive web design comes into play.
According to the statistics of eMarketer (January 2014) the percentage of people accessing the web from mobile devices will increase from 73% at the end of 2013 to 79.1% by the end of 2014. The prediction even gets more prevalent in 2017 when the percentage is anticipated to be 90.1% of all visitors on the web using mobile devices.
The concept of RWD is that your website layout will adapt to the changing media that it is being rendered on. The content will adjust and be presentable and legible. This can be as simple as showing the whole site without scrolling which is what some people want. Others want the pages to resize and be different with each view without having to create separate sites. Along with RWD one needs to take into account not only the screen size but the pixel density to handle the retina type displays that have twice as many pixels per inch than standard screen sizes.
At its most basic a page is dived up into columns so that the information will float into a desired location based on the overall screen size. The number of grids that are used for a website can be as simple as a one or two column grid to the standard twelve column grid most new sites utilize. The grid layout chosen will help define the size of the content on each individual screen layout. As the screen size changes the styling works to add and remove specific class assignments within the webpage. Some information may be hidden altogether, font sizes increased, or different coloring to better match the native theme of the device you may be using.
One area often missed is the images on the site. For a desktop environment the size may be set to a specific pixel size and looks great. As the screen size gets smaller or changes from landscape to portrait the image may not be the right size to convey the image you want to see. One solution that we use is a flexible image structure that on modern and mobile browsers will make the image resize based on the width of the grid columns the image is being stored in. This method helps produce the best results across a large array of devices.
As your screen sizes grow and shrink having all of the information shown is not always desired. Seeing a link at the bottom of a mobile that allows you to see the entire (full) website version is a good option. Many times for a mobile site what the user needs to know is who you are, how to contact you, read your latest product and blog information, a map to get to your location, hours of operation and a contact form to get ahold of you. If you’re showing a product page does a mobile user need to see every specification initially upon loading or would a “More Detail” link that expands the specifications beyond what are the most likely specifications be a better use of the screen real estate for a site visitor?
As with all technology decisions you need to decide what is right for your customers. One approach should not be used for every situation. Each version of a browser that visits your site needs to be thought of. Here at JM2 Webdesigners we will work with you in defining what you want in a responsive design and based on who your target market is we will build the correct solution for you. A responsive design is the first step in building your online presence. Once you have the layout chosen don’t forget about the content (content is king), search engine optimization (SEO), and how to build social media into your overall marketing strategy. Doing one without the others can leave you open to disappointment.