Importance Of Responsive Design

Responsive websites we have all heard of them you are on one there are a lot of important things to keep in mind when running a responsive website. Its more than just making sure it is responsive across all screen sizes it is making the website look and feel natural to the user. This is something that many websites are struggling to adapt and it is to have a fully responsive site that looks and feels like it is a mobile site.

There are a lot of things you need to do not only to increase your revenue, but to improve the user experience. A lot of these come from the load time and its challenge on mobile websites. A fast loading responsive website is extremely difficult to do because you are loading the same content that your desktop website uses, but you are doing it on a slow 4g connection. Some websites like CNN don’t do this instead what they do is keep the domain the same and have a separate mobile theme that is loaded if it detects the mobile browser. This is a good idea, because it limits the items being loaded however, this system is not full proof and you can tell because when you go to request the desktop site it looks like a desktop website. This means the website is not responsive designed just has a mobile website theme.

You need to make all elements shrink make them fluid and automatic with the website that is the key, even your advertisements are going to need to do this. Most advertising networks do not offer responsive advertisements and this is a major issue. What do you do if they don’t? Adsense does offer responsive advertisements which is amazing and has proven to work exceptionally well. Networks like media.net don’t offer this so what do you do? You can use JavaScript to automatically request a different size advertisement depending on the screen size this has been shown to be used with Adsense Link Units. You can hide the advertisements with division and CSS tags, you can just hide the entire location of them. Some advertising networks don’t allow this so be wary when going to perform this if you are using Adsense use the responsive units if you on media.net contact your account manager for assistance and he or she will help you.

A responsive website means you need a mobile advertisement right? This is a question i pondered and could still implement a mobile advertisement is a stick bar at the bottom of your screen that follows you as you move around the page. It will never leave your viewers eyes, but there is other ways to use this space. AddThis has a mobile sharing and follow bar that you could place there instead which might perform better for you as it will get your more followers, and more article shares. The sharing features works much better than traditional share buttons which are not responsive and look clunky on mobile websites. This will be a great asset to increasing the shares from your mobile users.

Load time, load time, and more load time. Loading times of mobile websites need to be as low as physically possible. This is such an issue for Blogger based websites but it is necessary to be done your website needs to be faster on mobile than it is on your desktop and this is near impossible. So what can you do? Shrink your image size dramatically images need to be small and low in size they should never be a MB of space if it is you are doing it wrong. Make all your images PNG and then take them through Tiny PNG. This will reduce the size then if needed shrink the images if it is a 500x500 but you can only show a 300x300 shrink it this saves so much more space because shrinking it with HTML does not affect the file size and it will greatly hurt your loading time if you leave it that way. Shrinking the images is the main thing you should worry about when it comes to shrinking your website size. If it is ever more than 2 MB you need to have a really good reason for it. Shrink all of your images and if you are using Blogger you will struggle with this but bare with me there is more you will have to worry about. Also, if you are using a lot of static images whether it be follow buttons, background images, little arrow buttons combine them as a CSS sprite. This simply means instead of it loading each image you download one sprite and then it retrieves the particular image you requested. This is so important to improving your load time especially with a blogger based website, it can greatly improve your load time or you can break it and your website so be wary.

Combine your CSS files and compress them. If you have more than one style sheet you need to combine them and compress them. The process is probably easiest on Blogger go through and find all of your style tags and if you need to test it first. Move them all to one of the skin tags and if the website does not change in looks or anything you are set if it does, you are using if statements and will have to leave them. However, you are still able to externalize and compress them but they will be in different locations and you will have multiple style sheets. If you are using WordPress I highly recommend using W3 Total Cache with CloudFlare to improve your load time. This will automate the process for you and make your website load much faster, also for your images make sure to use the free photon service offered through JetPack.

Combine your JavaScript files. Okay so most websites have a tun of extra JavaScript files running and you being the owner need to identify each and every one of them and combine them and compress them. Items like Jquery don’t like to be combined so do yourself a favor and don’t combine them please if you do you risk breaking your website functionality. After you have combined them minify the script so it will load as fast as possible and take as little space needed. When combining you will run into external scripts such as share buttons, follow buttons, comment systems, and much more and you can’t compress these without them being on your server and you can’t combine the script so you are left with no real choice. Either trash them or see if you can host the file on your server and just add the JavaScript manually. Then compress it because if you don’t that is an extra request, an uncompressed script, and from a potentially slower server.

Now that you are done improving your load time, your design, and you have discussed your advertising options whats next? That covers most of the basics there are some items to remember though. Being on a smaller screen means that the user is going to need a more optimized font, image size, and much more. Be careful to not interrupt the user experience and to keep the website running smoothly. If you want me to look at your website post it in the comments below and make sure to share this with your friends if you found it useful!