Dec 04 2012
Responsive web design is about creating web content that changes to suit the device on which it is being viewed. Instead of having to create multiple websites that are tailored to different devices such as tablets, smartphones and desktop PCs, responsive websites will adapt to the size constraints of the device automatically.
This is a great way to optimise the viewing experiences of visitors using many different devices to surf the web. Because of the increasing popularity of hand-held and mobile devices in recent years, responsive web design is becoming more and more prominent. Being able to create websites that will look great on desktop and mobile devices alike is an excellent way to give users a great online experience. Here is a guide to responsive websites, and how to incorporate video content within them.
Creating websites that can be easily viewed on devices both big and small can greatly improve user experience. With responsive websites, users can view their favorite online content without getting frustrated about layout and text size. If users can enjoy their experience when using mobile devices as well as desktop computers, they will be more likely to return.
Many devices, one website
Before responsive web design emerged, the only way to provide users with quality websites when using their tablets and mobile devices was to design new sites specifically for each device. This approach is both laborious and inefficient, meaning web designers have to spend ages changing layouts and formatting in order to suit a smaller screen. Responsive web design streamlines the entire process, removing the need for multiple sites, as the site will automatically adapt to the screen it is being viewed on. For example, on the smaller screen of a smartphone, the site’s layout can adapt to a more linear format to provide easier navigation for touch.
Without the need for multiple websites, companies can save money by only needing one URL. Apart from the added convenience of only needing one address, companies can save time and money with regards to maintenance. Although the initial design and coding may take a little longer for responsive websites, the financial and time-saving effects in the long run are worth the extra effort.
Websites that can seamlessly scale font size and change format to suit multiple devices are excellent for modern web browsing. It is fairly simple to program websites to adjust the likes of font and images to suit smaller screens, but what about incorporating video content? With a little know-how, it is actually quite straightforward to embed video content that can be dynamically scaled for viewers on the move. There are several solutions for “fluid width” videos, including jQuery plugins and HTML5 code. With videos that will automatically change width depending on the device screen, websites can maintain their excellent responsive design method without compromising video content.
One thing designers should take into account when scaling embedded media in their responsive websites is video ratio. When the website is scaled for different screen sizes, the aspect ratio of any video content should be preserved to maintain a good viewer experience.
Responsive web design is becoming increasingly important in a world where people surf the internet on the go. With websites that work brilliantly no matter what size screen they are viewed on, visitors will keep coming back for more. From layout to video scaling, getting responsive design right is a must.
Bradley Houston of SAS London, a digital marketing design agency based in London, who helps other companies with graduate recruitment, corporate communication and brand management projects.
Image credits: adactio