As we roll into 2016, responsive design comes ever further into the limelight. Individuals, small businesses, and even international corporations are trying to get the most out of this "responsive" thing. Depending on who you ask, and what professional hat they wear, that can mean a VAST number of things.
A big component of responsive work is that your project functions reasonably well on many different screens; from phones and tablets to laptops, desktops, and TVs. There's also a growing segment of much more experimental devices (Hello, smart-watches and touch-surface refrigerators!) that continue to push the fringes of usable interfaces.
Fitting on a smart phone is a very obvious and important step one. That's not the end of the road, though. Many projects are content to add an extra design mock-up or two, and set a couple of predetermined sizes (310 pixels = iPhone, 750 pixels = iPad) in their code. Instead, we need to look at a much more complete picture.
The visual design of the website, the size and complexity of the development code, the relevance and usability of the content, and the overall accessibility are all equally important. While so many parts may sound complex, handling each one with care and planning actually makes everything work together with far less work and stress.
Responsive Design
Let's start with the basics. This is where the responsive movement began, and hopefully not where it ultimately ends. In a perfect world, responsive design visually encompasses all of the other positive parts of responsible, responsive projects. It's all about getting away from the traditional print-based standard of pixel-perfection. Unlike a poster, letterhead, or other physical graphic, you can not define your user's experience in a single way.
Designing websites in the browser, to actually handle the responsive sizing issues in real time, has become a popular option in parallel to traditional mockups done in Photoshop, Illustrator, or other graphics programs. While it's a method I favor in my freelance work, there's also no replacement for a presentation-friendly set of static images in my enterprise team either.
As long as you bake in the knowledge that every part of your design WILL be squished, stretched, and generally chewed on like a pen cap, you're off to a good start.
Responsible Development
This one can be a little harder to handle, ironically. The code and development of your project contributes to the responsive nature in invisible, but massive ways. Faster load times, fuller user features, and generally less... well, broken stuff. Just because you CAN include the JavaScript kitchen sink, doesn't mean you should.
There's a lot of resources available right now that laser-focus their benefits on an amazingly responsive user interface. Styles, images, and whole frameworks that guarantee your user can see the paragraphs and buttons of your site on their phone. While the cause is noble, we also need to make sure we fully understand the cost. I'm not saying to write your own, bespoke code for every part of every single project. I love Foundation and jQuery too much for that.
I am suggesting you be able to write up a pro-and-cons list for every inclusion you make though. Don't understand any possible negatives to an addition? Either leave it off, or send me a link. I would LOVE to discover the first, perfect piece of code written.
Responsive Accessibility
Accessibility can often be the red-headed step child of most web development projects. Unless your particular audience has very specific accessibility needs, most work towards this goal involves remembering to go back and add alt tags to your images before you publish the website. Even as we increase our expectations for web projects to function like native apps and programs, we haven't laid the foundation to make sure our users can actually leverage those increased functions.
Toss in some cutting edge, experimental CSS to make the responsive experience tight and super impressive. Load a JavaScript framework for a couple of its functions, and another library or two for animations. Now, pull up that amazing work in IE9. Or even in a perfectly modern browser, on a dial-up speed connection. On a phone. In the middle of nowhere.
Every website doesn't need to be plain text on a white page. But every time you're implementing something new or interesting, ask yourself "Can I make this even a little more accessible?" If it doesn't wreck your schedule or blow your budget, what do you have to lose from improving the ability of your users to... use? Accessibility benefits every user in ways you might not even have imagined.
Responsible Content
Yes, even the actual content on the page has a role to play here. Often the realm of marketing or content creation specialists, we should also take a keen interest in what we're putting on our own web pages. Of course, SEO is an obvious reason to care, but its not the only one.
Whether you ascribe to content-first design methods or not, content still has a huge impact on our finished products. The placement of images within a text, the length of that text, and the way it interacts with page elements like navigation or sidebars. Is it necessary to change the design to suit the unaltered content? Or can we look at the content itself as something changeable; part of the responsive experience?
Like perfectly placed buttons or contact forms, content is part of the user experience. Responsive, responsible content means content that the user can get a genuine use from. It means that the content is relevant to why they are on that page, and also both thorough and succinct. No one needs to read three pages when a paragraph will suffice, and no one wants to see a summary when they need clear details or instructions.
Consider why your user is on this specific page, looking for this exact content. Factor that into how you design the responsive visuals, develop the responsible code, and create the most accessible experience you are capable of.
THAT is responsible, responsive design.