The Internet and the World Wide Web have changed a lot over the years. Thankfully, the days of painfully slow dialup modem speeds are, for the most part, a thing of the past. Heading along the same depreciating path towards are massive desktop monitors; however, while they are being replaced with lighter, thinner models, screen sizes are becoming larger, and multiple screen set ups are not uncommon. On the flip side, mobile devices are becoming so prevalent, it has been reported in 2014 that over 50% of websites viewed in the US are being viewed from a mobile device.
Mobile screens mean small screens. Be it a tablet, such as iPad, Surface, Kindle Fire or a smart phone, such as iPhone, Android or Windows Phone, small screen sizes can make for big problems for web developers. One solution, and an option offered by ComNad, is to have a main website designed for larger, desktop-sized screens, and a mobile site designed for smaller mobile screens. Another solution is a Responsive Web Design. This is a single website design that flexes and flows to respond to screen sizes. Depending on the design of a website, many mobile devices will adjust their display size so a website fits the screen. In the case of most tablet screens, this is can be acceptable, but it rarely works well for smart phone size screens. A responsive web design will shift and size images, text boxes, add banners and other elements of a web page to not only fit a screen size, but do so in a readable and navigable manner. Some images will shrink as the screen size decreases, while some will be auto-replaced with smaller sized images. Text will realign to a more easily read position and font size.
The goal of a responsive website is to give a website visitor, no matter what device they use to browse the site, the most user friendly, functional and informative experience possible, without the distraction of tiny, unreadable text or images too large to fit their screen.
One major consideration for web designers who take on the challenge of designing and coding a responsive web design is insuring it is compatible with older browsers, namely older versions of Internet Explorer (IE9 and earlier). Many older browsers do not support some of the functions and tags in HTML5 and CSS3, and that includes some of the key functions necessary for many responsive web designs. The inclusion of the JavaScript “html5shiv” is a good way to handle many browser compatibility issues. Integrating “Modernizer” into a site is another for designers to investigate. Always test run websites on older browsers or proxy services running older browsers in order to insure the site looks good for all users.
Another key point to consider when first designing a responsive website is the page layout. Due to the need for page elements, such as images and text boxes, to flow and slide over and under one another, the web page layout may have some limitations not inherent for sites in the past. For instance, the table element is on its way to becoming depreciated in HTML5, and is now limited in use. Utilizing CSS3 and other tools to align information on the page can be a challenge for web developers when trying to meet client needs while creating a functional website that will display correctly regardless of which browser, device or monitor is used for viewing.
At Computer Networks and Design, we take a consultative approach when dealing with our client’s needs, desires and hopes for their website, and the customer experience they want to present to their clients, customers and admirers.6/15/14 Written and Copyrighted by Computer Networks and Design, LLC. ©2014