Okay, as the title indicates, this is an instructional article about responsive development, not design. We assume at this point, you have a PSD Photoshop design already made and your goal is to DEVELOP that design responsively and responsibly. No pun. So the keywords here are DEVELOP and RESPONSIVE. I like to say that adding the responsive factor into a webpage is the developer's job and not always the designer's job so much. In some cases, where the developer is also the designer, it is definitely both. First let's talk about how the designer can assist in developing a responsive webpage.
How the Designer can Help with RESPONSIVE Designs:
At the very least, the person doing the Photoshop design of the webpage should be aware of the need for a responsive page. That way he or she can assist the developer by not including elements that are difficult to make responsive such as many layers stacked on top of each other or text in inconvenient places. Let te designer know that the PSD image should look as good as possible at every possible zoom level from 10% to 150% and that will give them some figures used in Photoshop to play with.
How Web Developers Go About Making a Responsive Webpage:
Certainly most of the extra work lies on the shoulders of the developer when it comes to responsive web pages. He or she is the one who has to make the page function at every possible screen-size and every possible device type including desktop PCs, laptops, net-books and mobile phones at least. Testing and Debugging is key here, but first you should learn to think in percentages instead of Pixels, which is what most of us developers used in the old days before responsive development was so important. I often get away with checking on a PC, laptop and phone myself, but the more different types of devices you check your responsive design in, the better it will be in the end. I like to start by making the page using percentages instead of pixels for divs and images mostly and always for width of images for sure. Images should usually be inside a containing div with the image width set to 100% so that the image scales down nicely when the screen size changes. Let's say for example you want an image to be 500px wide at 100% zoom and when the screen is wider than 500px. You would crop the image to 500px place that image in the div you want then set it's width to 100%. Then to move the image around in order to get it exactly where it should be in the page layout, instead of playing with pixels, use percentages for margin-top, margin-left, etc. An important part to remember is that you'll often need to set elements position CSS attribute to "relative" in order for margins to work as you want them to. In some more rare cases, you'll use the absolute position, but only for more advanced layouts. To sum it up and give you a better visual representation of what I am saying here, these are the steps to creating a responsive web page:
Steps to Responsive Development:
- Have a designer create a PSD who is informed of the need for a responsive design.
- Slice the PSD and create your first-draft of the web page using images and divs with percentages instead of pixels and be sure to user relative positioning when declaring margins in CSS.
- Once you have a first draft with some or all elements of the design in place, start manipulating the browser window to decrease and increase the window size from around 2000 pixels wide down to as small as 300 pixels wide making sure it looks proper at each size in between.
- Zoom in and out using your browsers zoom hot keys which are cntrl/- and cntrl/+ on Windows machines. make sure all your elements and images look good at all possible zoom levels.
- Once you have the site looking good and responsive on your development machine, it's time to look at it and tweak it some more using other devices such as net-books, iPad, iPhone, Android phones, Laptops and Desktop computers. A truly responsive design looks great on any device at any screen-size and zoom level.
- After each round of changes on one device, go back and make sure you didn't break your layout on the other important devices. I know it's a tedious process, but that's why you have to charge more money for mobile and responsive design techniques. I generally charge twice as much for a fully responsive design as opposed to one that is only partially responsive such as a default WordPress install might be.
There you have it, my views on responsive web development as I have learned from nearly 20 years working as a full time freelance web developer. Good luck with your next responsive design and I hope this article helps you!