Designing to fit your medium-device differences and responsive strategies for your website

Posted by Shane Niederklein on Dec 3, 2019 1:00:00 PM

iStock-1067359358_c-1

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.

iStock-472663320_c

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.

 

iStock-981507474_c

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 GitHubStack OverflowAdobew3schools, 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.

 

iStock-1138001165_c

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.

fb_banner

 

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.

fb_profile_c1

 

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.

insta_feed_c1

 

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.

insta_story_c1

 

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.

 

Download the Guide to Website Marketing Must Haves!

Topics: Branding, Social Media Management, Web Design, The Mobile Economy, Design Forward Thinking

Prepare to Be Amazed!

Just kidding, but not really!

We hope that you find a few nuggets of knowledge to take back to your own marketing. Some of our blogs might be directed at certain industries, but that doesn't mean that you won't find a few helpful tips that will work for you. Don't be scared, dig in! And if you want to stay up to date, be sure to subscribe to our blog. 

Receive:
  • Weekly Marketing Emails

  • Brownie Points From Your Boss

  • High Fives Anytime You Visit Bozeman, Montana

Subscribe to Email Updates

Recent Posts