Media queries play a big role in modern website design and theme development. They are a popular method that designers and developers use to deliver custom styling to devices with specific screen sizes.
An example would be a submit button at the end of a form your user completes. On a desktop screen you might want it to be a button with a width of 100px, but if the user was accessing your website on a mobile device, you would want the button to display across the full length of the device screen. Or if you want to manage the column widths across devices you would use the following example:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
/* For mobile phones: */
@media only screen and (max-width: 768px) { [class*=”col-“] {width: 100%;}}
Media queries in themes
When developing a website in almost any popular CMS it is faster and more cost effective to make use of a themed template as the baseline framework. There are numerous online services that provide Pro Themes which are developed and maintained by professional developers and designers and almost all of these make use of media queries to produce a responsive and design that is aligned across different devices from the same style sheet.
I recently had to to test and review work done by another company where WordPress was used as the CMS and a popular theme that I have worked on in the past was utilised to manage the look and feel. There were a few issues that I identified that could be fixed with ease, but it was their response to timelines that pulled the rug out from under me. They needed another two weeks to complete the site and the bulk of the time would be spent on writing the media queries. It is a really fancy term if you use it with customers who do not understand the workings of a theme. It becomes more fancier when you explain to them what it does. You actually sound like a coding wizard.
My issue however is that the theme in conjunction with the CMS and editor plugins already provide this functionality. In fact, it provides it in such a way that it is a skill that can be taught to the customer and they can manage it on their own if they are inclined to take up the task. In this case I got the feeling that they either did not know that the theme and CMS could provide them with this capability – OR – it is deliberate in order to force the customer to always make use of their services for basic changes to basically anything on the page.
If it was the intention from the start of the development then all is fair, but my understanding was that it was not the case. There is also the case that spending almost two weeks to develop and test media queries needs to be weighed up against my opinion that the whole site could be delivered in the timespan of a week. So why put the burden of cost for an additional week on the shoulders of a customer?
From the perspective of a developer that supports CMS and content updates it also does not serve the needs of the business itself. Content changes are normally requested at a moments notice and the process to update the content should be fast in order to provide a quick turnaround time. It should not take an hour of work to update a button at the end of a form.
WordPress and professional themes do provide a value beyond how it looks and delivers functionality. It is there to provide ease of use to the customer and the developer. For basic websites ensure that you stay as close to the core as possible
