First Things First: What is a Media Query?
Media queries look at the capability of the device, and can be used to check many things, such as the width and height of a browser window. Media queries are a cornerstone technology of responsive web design.
Fixed, Fluid, Adaptive and Mobile Websites
In the past, people viewed websites mainly on desktop computers where websites had a fixed (or permanent) width to fit the size of the screen. With tablet and smartphone advancements, websites evolved into a variety of options:
Fixed Websites
When viewed on a mobile device, the fixed website either gets cut off or presents scroll bars to view the entire site. A fixed website has set widths, and no media queries.
Fluid Websites
Fluid websites scale the entire website down in size to fit the device. A fluid website has relative widths, and no media queries.
Adaptive Websites
Adaptive websites target specific device sizes to adapt to – like smaller monitors, tablet and mobile devices. An adaptive website has set or relative widths, and device and resolution driven media queries.
Mobile Websites
Mobile websites are another version of your website. They can contain as much or as little of your standard website as you wish, but mobile websites are generally more simplified. You can switch back and forth between your standard website and mobile website by clicking on links.
What Exactly is a Responsive Website?
Viewing websites on tablets and cell phones is becoming increasingly popular. Responsive websites offer a fluid grid that allows the website to “respond” to the screen size of the device that you are viewing it on. Simply put, the elements of the website are rearranged, or stacked, to fit on the screen so that they can be viewed at a comfortable size that adjusts automatically depending on the device you are using. It even changes depending on how you are holding the device, adjusting the content vertically or horizontally to fill the space well.
Responsive Websites
A responsive website has relative widths, and content and design driven media queries. Elements are rearranged to fit the screen.
Are There Any Special Design Considerations for a Responsive Joomla Website?
Keeping the design simple and clean is always a good idea to create a user-friendly website on all devices. Typically, the information on a responsive website appears in the order that you see it on the desktop website version. The header appears first along with the content directly underneath it, and the main page information appears next. Content on the left and right sides generally stack below the page content, and the footer appears last. Special attention will need to be paid to additional features such as pop up photo galleries, rotating image slideshows, tabs and content sliders, which will also need to be responsive so that they scale to the size of the device. Joomla has a variety of extensions which meet these needs.
How Can A Responsive Website Help Your Business?
As previously mentioned, viewing websites on tablets and smartphones is becoming increasing popular, therefore it represents a large market of potential customers. Mobile sales are already overtaking desktop sales. Here are a few more reasons why a responsive website can help your business:
- Google prefers responsive website designs as the industry’s best practice. They are easy and efficient for Google to crawl, index and organize content. Google is now ranking the user experience with preference to responsive websites.
- Responsive websites provide an excellent user experience, because it is easy to view a website from a variety of devices and hand-held positions. The responsive website contains all the same content and you don’t have to search, scroll or resize to find it.
- Social media is frequently viewed on mobile devices. So if your business is promoting itself through a variety of social media outlets, much of this consumption is occurring on a mobile device.