5 Responsive Design Tips

Ok so we’ve all been harping on about this whole responsive design thingamabooger, and with good reason. As users, we all want to experience web browsing as consistently as possible, right? If you answered yes then we can confirm that you’re alive and are in fact a web user. Thing is, it’s not always been easy or even possible to design sites that ‘respond’ well to mobile devices, but lucky for us all it’s pretty much standard these days…or should be.

Zemanta Related Posts Thumbnail

Designing sites to be responsivecan be quite technical and we’re not always sure what the key points are to focus on; so, being the gracious Bucks we are, we’ve scoured every possible resource to bring you the top 5 principles to keep in mind with regards to responsive design.

Make sure that your images are universally compatible and flexible

The easiest way to accomplish this is by simply using adaptive sizing and resizing to edit their width. You can do this in a variety of ways, but one of the easiest methods through which to achieve it is with this handy little tool: Adaptive Images. Bare in mind that sizing accordingly for mobile users is probably your best bet on a responsive design site if you want decent load speeds, which are absolutely crucial. You could also use variable breakpoints and store multiple image sizes in your data for different screen resolutions, but this might become a problem in terms of bandwidth usage, and you cannot create your site with the safe assumption that all of your viewers will have access to powerful bandwidth.

Kick the content-overload

In order to make your mobile friendly responsive design site really shine in a very easy to achieve way, simply take this into consideration: Some content and content elements were never meant to be used in a mobile context and would never work there. If you have these elements at play in your website or potential site layout, then get rid of them immediately for any mobile setting. You can do this by adding a .not_mobile class to specific elements that you’d like to see removed when your site is viewed in a mobile context or you can simply get rid of these elements permanently from all versions of your site.

Hosting is everything, folks

No matter how many tweaks you make to your website, a lot of the performance comes down to the quality of the servers you are using. There is a wide array of different hosting packages offering a range of benefits and complex pricing structures, from cheap shared hosting costing a meagre few dollars per month, to cloud services and fully managed dedicated servers costing hundreds of dollars per month. It is important to invest time in researching web hosting packages to make sure you get the best value for money and can achieve the performance your users demand. You can start by looking at the performance of your competitors and websites in different niches to see which ones are the quickest. Once you know which sites perform the best, you can enter their details in whoishostingthis.com, which will show you which hosting provider they are using, as well as reviews as to the quality of customer support and problems with down time.

Decide on a performance cap

A performancecap (also known as performance budget) is a pre-determined limit on the speed or overall size of a page. Like a financial budget, it serves as a cap to spending (or, in this case) page bloat. This means that if new pages or elements need to be added or amended, you have to make sure there is enough room within the “budget.” If you find that adding a new element means you will exceed your budget, you need to make a decision to optimize an existing feature so it is less complex or faster, remove an existing feature altogether, or not add the new feature at all.

Compress Compress Compress

You should compress your resources by using GZIP to reduce the number of bytes a page is sending across the network. This will make it much easier for users to access and navigate your website with faster loading pages as well as making the usage of your web server resources more efficient. In addition you should minimize CSS and JavaScript by removing any unnecessary line breaks and white space, as this will help reduce file sizes and increase the speed they are downloaded and parsed. Use a program such as GZIP to compress your page resources for easier transmission across networks. You’ll have lowered the number of bytes sent per page or element and made your content easier to browse and access from devices with varying or low bandwidth. Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks. Doing this will reduce file sizes overall and keep things flowing more smoothly.

Let us know if this post helped, or if there are any other tips and tricks you’d like to read about.