To put in simple words, “responsive web design” or “responsive design” is a set of techniques, both of design and HTML programming, so that a specific site visually adjusts itself to both the screen width and to the size of text and buttons.
It’s not a very recent phenomenon, though. Truth to be told, the idea popped out back in 2008, but thanks to HTML5 and CSS3, the solutions became simpler and standard.
Before the name Responsive Design was coined, there already were responsive designs, where the same grids which are now used were employed to gardually adjust the 10, 12 or 20 columns.
Obviously enough, starting on the last few months, responsive design has made a huge leap on its implementation, mainly motivated by the use of mobile devices and tablets.
One of the main advantages is that, despite having to take into account the varied mobile devices when designing a site, then the development and maintenance are unique, without any need of having to manage different versions of the same web or other satellite apps.
This kind of web apps simplifies the design management and the programming both at the start of a project and in the maintenance and future changes.
Thanks to the Responsive Design, one of the strong aspects if that the “front end” management team can be the same for the desktop app and the mobile app, saving up costs and having the advantage of not needing to manage different programmer profiles.
A unique design means unique URL, which is very benefitial for SEO. At the very least this is the direct result of unifying a site but there are dozes of
Not all which glows is gold
Implementing Responsive Design has some flaws despite much consultors telling it’s the only solution, it really isn’t. What’s gained in some aspects is lost in others, like all solutions, you gotta value what you’re ready to sacrifice to get a unique design.
The first thing a lot of consultors use as bait to sell is uses and improvement of the conversion. Let’s be honest: the mere use of Responsive Design will not improve your site’s conversion. That depends on other factors whihc Responsive Design can help solve but it’s not the solution itself.
Another key aspect which will depend on what you want to adjust and optimize in the site is that a site’s load is the same por the mobile visitor and the PC visitor. Since some images won’t load and others will be ligther , but the cost on the server’s side and the page’s load in HTML code, CSS & JS will be pratically the same.
Build a site with Responsive Web Design
The web developers tend to get cocky from time to time and feel like they can tackle anything and, even thought it may be true, they forget one equation variable: time.
It’s always attractive to build things from scratch, but using frameworks provides a strong inital boost to a project. For example: Twitter Bootstrap is a good example, bringing a series of options which are above the needs of most web-sites.
ID the patterns of your pages and design according to what you wanna display, use at least 3 screen sizes, for mobile, tablet and desktop.
This will help estimate in an easier manner the design and maintenance costs, ranging from a simple landing to a services’ site, and, above all, your apps’ mockups plus the alienation of your team.
Try desining using CSS, and relative font sizes. Remember that there are devices with bigger resolutions, like Apple Retina Display, where they use roughly two times the pixel rate per screen. This makes images pixelate or makes you use different versions of a photo according to the device.
If the image you gotta show is that of a product then you don’t have much choices, but if it’s part of the design try to see if you can replace it by some CSS coding.
If you’re moving from an old design, you can value the fact that it’s not necessary to change the whole framework in a sudden manner and that it’s possible to do it in an scandalous manner first by the base framework and then page to page. This helps you not having to pour all resources in this kind of changes.
When you wish to optimize the site for certain devices you’ll be able to do it detecting the type of “user agent” and presenting changes or other choices when it comes to displaying info.
These tricks help you not waste server costs in something which the user won’t end up seeing, together with a better loeading speed for the user.
If what you’re building is a simple blog, a lot of WordPress themes use Responsive Design, so go ahead and find the most fitting one to your needs.
If you found this post interesting, share, comment, print and color it up 😉