Your website is made up of a bunch of different puzzle pieces – software, templates, plugins, content, theme – it all fits together to display your website for your readers using a browser. There are other lessons about software. This lesson is about the visual components that make up your pages and posts – and how to make decisions about the different parts of a website.
Learning all the different parts of a WordPress website, what they are used for, and how you can leverage them can be a daunting task — and trying to understand and use all the technical jargon and terminology to communicate effectively with a designer can be overwhelming to say the least.
That’s why I have this simple Anatomy Of A WordPress Website guide for you!
Websites that are “responsive” or use “responsive design” are flexible and fluid, meaning the page layout adjusts based on the size of the browser window.
When mobile devices first grew in popularity, clients needed web designers to provide solutions for better viewing experiences on those tiny screens. The best solution was creating a separate mobile site.
But then additional devices with varying screen sizes and resolutions began hitting the market.
Designers saw how impractical and costly it would be to create different versions of a website for every device/size — and due to the rapidly changing landscape of technology, they realized it would be practically impossible to keep up.
As the landscape of web browsers and devices grew, changed, expanded, and improved, consumer expectations also changed.
Consumers today expect to be able to browse the internet as easily on a mobile device as they can on a desktop computer — and they expect to be able to do it at portrait or landscape view, on any device, and sometimes they don’t even have their browser window open to full size!
Responsive web design is a whole new way to think about web design, and a different approach to building websites where a site is designed to respond to, resize, or adjust itself based on user behavior and the viewing environment (type of device, screen size, resolution, orientation).
So instead of creating a separate mobile site to work at one size, the entire website is designed and built using flexible, fluid layouts that adjust and resize at specific “breakpoints” or sizes — Think iMac, MacBook, iPad, iPad Mini, and iPhone to just name a few. Responsive web design won’t perfectly solve user experience issues on every device available, but it will improve it on as many as possible.
In the example below, you can see how the logo placement, navigation menu, and page content adjusts and reformats itself based on the size of the viewing device.
A non-responsive website still works on all devices, it just gets shrunk down tiny, so users much “pinch and zoom” to read the content, click a menu link, or scroll left or right when zoomed in to access the sidebars, etc.
https://lh3.googleusercontent.com/DccR1B7VIXA2ZL_MW83IMpqY-AAb0C_GTWtCFOD960aXlfmJbm7SwYNOf1XRkIp3SQRm-Y1BTqa8ainPKbp78AAZnmJNqRfq-RgEvmyaLjnxF3puUHbk3TKLCYBcUb6KO9_iGKr_11COy6xG
A responsive website is not just about layouts, it’s also about interaction. People on phones go to websites for different reasons, which means based on the purpose of the site, the homepage is designed differently for mobile devices than for desktop.
Designs should always prioritize the experience of your website visitor, and creating the best experience that meets their needs and gives them value. Thus, responsive is not just about devices, it’s about people – their stage of awareness, understanding, abilities, devices, location… their context.