The Division of Student Affairs Department of Information Technology has just launched a new site. The site is based upon WordPress and uses a very popular theme called Avada by Themefusion, which is billed as the #1 selling WordPress theme in the world. We selected Avada primarily because it is very responsive. But also because the built-in theme feature set is so robust, that you can do almost any type of design without a large amount of custom CSS work. This makes it a good theme for our departmental customers who want to have a sharp looking site without having to wait for IT to mock it up. The site is also integrated into our departmental Twitter feed so stories go out via social media.
The designer develops the tone and visual direction for the content on a responsive website. Their role is essential in capturing the audience’s attention while allowing the content to drive the purpose of the site. They collaborate with the developer in wireframing and prototyping, and with the communicator in designing content flow. Using the “mobile first” methodology, designers create a web experience that is both functional and visually appealing at all screen sizes.
Smashing Magazine recently added a post to their site from Paul Boag which is a must read! It reiterates many of the reasons why our department began incorporating the developers into our initial conversations when developing websites.
In addition, the article reinforces the idea that we should stop seeing developers as the enemy or “those people” but rather as allies to the cause of creating creative and effective websites.
If my word is not enough, maybe reading this article at Smashing Magazine will help melt your hardened heart.
Every developer and designer has those days that no matter what you try or imagine, it just doesn’t work for your responsive site. Your idea may be a great solution for mobile devices but, it is not as user-friendly on desktop and vice versa. You use all of your progressive enhancement knowledge and yes, it is functional but does it really meet the need of the user? Does it really fit with the flow of the site? At times, the answer is no.
Here are a few techniques and plugins that I have found that have helped cure my…well, responsive headache.
You’re sitting at your computer with your web development ‘arme de choix’, staring at a blank page, wondering where to start…
If you’re like most of us (and statistically, you are) when you start busting out the div tags, your instinct is to design for a desktop and use clever automagical media queries to gradually remove content and functionality as the viewport shrinks.
We’ve all heard it before: good design is hard. Good web design not only has to look amazing, but it also has to be functional, often without the knowledge of what platform or resolution your design is even going to be used on. Responsive web design – a simple concept at its core – gave web designers and developers the opportunity to account for the unknown. We perfected the use of media queries, installed respond.js to account for the IE holdouts and core concepts were adopted.
The basic structure of responsive design is usually a 3-2-1 pattern. Main content and sidebars are eventually reduced to one long vertical column of information on our phones. And while this is responsive web design, it’s disheartening to think that’s all we can do to make our sites work well on all devices. So I want to challenge us all to design beyond the vertical; to think about the other aspects that go into making a well-designed responsive site.