The Web Content team has been working hard to transition your webpages to responsive layouts. To date, we have over 60 unique departments completed and more pages going responsive everyday. Simply put, “responsive” webpages are those that automatically adjust to the screen they are being viewed on. Elements like buttons and text rearrange from a full desktop experience to a small phone or tablet screen. Because of the automatic response taking place on your webpages, it is important to keep a few things in mind when you work with your content.
The days of using tables to organize your content are over. There are now 4 templates available that make it much easier to organize your content. By choosing one of these options, you can add your text and images to your page in a variety of ways and rest assured that it will properly rearrange itself on smaller screens.
Tables do not respond well when adjusting to smaller screens. The columns of content in a table often push together so tightly to fit the table on the screen that the content in it becomes illegible.
Tip: When using multiple columns, the right column will display under the left column on a mobile device. Keep this in mind when adding your content.
In order to get the most out of your images, you will need to follow a few tips. First, make sure your image is properly sized for your page before you upload it to file manager. This will not only help in page load times, but it will also ensure your images are ready to go responsive. You never want to edit your image’s dimensions in image properties. Moving forward with responsive layouts, you will also want to make sure there are no dimensions displayed in the image properties of your image. This ensures your image will automatically respond/scale for the screen it is being viewed on.
Have you ever tried to find something on the web in a pinch and ended up having to scroll through way too many pages? This experience is usually attributed to poor copy on a website. Instead of having the most pertinent information at the top of the page in an easy to read format, pages like this often unintentionally hide the important information users are looking for in a huge block of text. In my personal opinion, this is one of the most important (and overlooked) aspects of designing for the web. Readability, knowing your audience, and the length of text are just a few of the many concepts to keep in mind when writing for the web. Poor text on a page is only magnified when viewed on a mobile device via a responsive layout.
All of the tips I have mentioned in this blog post center around one central idea: remember mobile users. As you add images and text to your pages, always remember to try the “mobile” and “tablet” views when using the preview tool. Is your content displaying correctly? Are users having to unnecessarily scroll on their phone forever to get to the content they are searching for? Can they quickly get the information they were looking for when they come to your page?
These are all great questions and ones that need to be kept in mind when creating/editing content for your newly responsive webpages.