Fewer things are more likely to make a perfectly reasonable human being hurl their device across the room faster than an aggravating, user-unfriendly experience. With our proclivity to change devices to look at particular sites in different ways, responsive design can make or break the experience for the user. And, while you may expect that every site you come into contact with should work breezily on any device you own, it’s unfortunately not the case. There are still quite a few websites out there in their unresponsive state, which could use an upgrade to their experience for the sake of mobile devices everywhere.
What Exactly Is Responsive Design?
Don’t let your website be that guy. Beauty definitely comes with age, but not when it comes to your website. With so much responsive design info floating around on the internet, there’s no reason for your site to catnap in the static formats of yesteryear. To save you a little time, we’ve condensed all the basics of responsive design into one post for you to digest with ease.
In the most basic terms, responsive design is web design that automatically adjusts its formatting and aspect ratios to ease the experience on any device. By using a fluid grid, responsive sites can resize according to proportion, as opposed to pixels. This means that your website is adjusting its design elements based on percentage, rather than a specific measurement. If you have heard someone talk about Bootstrap, this is the powerhouse that has popularized responsive design.
Let’s say that you have a website with four columns and a photo grid. A responsive site would be coded to display those four columns to two on a tablet, and likely one long scrolling column on a smartphone. Photos would be stacked vertically as opposed to laid out in a grid that may create a scenario where the user has to scroll horizontally to get all the info they need.
Responsive Design Tools for Your Back Pocket
If it sounds painstaking to create a website that seems to have intuitive powers to shapeshift itself, don't sweat it. There are 'oodles of tools out there to make creating a responsive website as easy as walking in the park.
Predesigned Responsive Web Templates
When it comes to designing a responsive site, there are options for you to consider outside starting from scratch, teaching yourself code, and building from the ground up. Even if you could, most business owners just don't have time for that. That's where predesigned responsive web templates come in. Sites like Themeforest for Wordpress are a goldmine for this.
Users can choose from literally thousands of template options that have already been designed and are responsive by nature. Users can download the template for as little as $30, and simply plug and play text and photo elements. The site is already coded to be responsive, requiring little to no coding knowledge from the user. There is a limit to what they can do, as it does take a bit of education to work with the advanced user environments, but they usually have a variety of tutorials to guide you along the way. You can also reach out to... ahem... PRIME, if you don't want the hassle or learning curve.
User Community Support
A cat is scratching around in our bag, and we're about to let it out. Are you ready? Here it is: most coders don't know their code as well as they'd like you to think. And that's ok! The old joke about tech support being better at Googling things than you isn't far off. But the image of a master alone with his genius, hammering away rows of code in the dark of his basement, isn't realistic.
Instead, they turn to the user community for problem solving and support. And that's what smart people do; they ask questions and seek to customize the wheel over remaking it, especially when they know they can't figure out the answer. Sites like GitHub, Stack Overflow, Adobe, w3schools, even Reddit allow coders to chat with each other and help one another problem solve. So if you're feeling semi-confident in your coding abilities but are worried you may not have all the answers, relax. Most coders don't. Give it a go and know that the community is ready to help you solve whatever roadblocks you may run into.
Knowing Your Sizes for a Better Responsive Experience
While predesigned themes will create a responsive experience for you, it is still helpful when you design to fit the medium. A responsive site has a much easier time adjusting images that have been designed according to their suggested sizes, making for the overall user experience better. That's why we've put together the following list of size ratios that all designers need to keep in mind as they set out to create their business collateral. From web hero images to phone backgrounds, to social headers, we've got you covered.
Image Ratios to Include When Crafting Your Responsive Media:
Here are a few sizes for your images to get the most of the responsiveness built into social media platforms:
Facebook Cover Image: 820x312px
This is the rectangular image that sits atop your business Facebook profile. It is different than your profile image.
Facebook and Instagram Profile Image: 110x110px
This is the profile image you select that is showcased at the top of your Facebook or your Instagram profile.
Facebook and Instagram Feed Image: 1080x1080px
This is the image you create that will appear in your Instagram feed and live on your Instagram portfolio.
Facebook and Instagram Story Image: 1080x1920px
This is the image that will appear in your stories. It runs the length of your screen of your mobile phone's screen.
Have questions about responsive designs or image ratios? Ask us in the comments! This is sort of our bread and butter, so we’re here to answer whatever inquiries you’ve got! Work with PRIME and find out how we can help your digital experience put its best foot forward.