Let’s start with the 1st tips.
Image source: Joomla! Magazine
Whoa, not so fast! You may think of converting your Joomla site to a responsive site, but how do you know that you should?
Should I convert my Joomla site to a responsive website?
The answer is Yes, if your site does not contain too many content or extensions.
And No, if your site does have too many functions to operate and too much important content to present.
Why?
Responsive design is design for User Experience. The friendlier it is, the deeper its meaning can be. If you intend to put too much stuff on your site to display on a tiny mobile screen, it will break all the meanings of responsive design. Furthermore, what will you get if your site takes years to load on mobile devices (which mosty use 3G or 4G)? A frustrating visitor. From my experience, I’ll immediately click X or Back button if the site loads too slowly on my mobile.
If you want to make your site responsive, remember the Joomla template and all extensions you use have to be responsive.
Please relate to this article on Using Twitter Boostrap to know more about creating responsive template.
Okay, if for now you still think you should convert your site to responsive site, then what to do first? Let’s start.
Designing websites for mobile
1. Choose a way to design
Basically, “responsive” means that your Joomla site can re-scale itself to fit any screens when users browse it on laptop, iPhone, or a tablet. Responsive design uses CSS media queries and multiple multi-layer style sheets to render the layout of the website differently according to screen size.
So, let’s start with using media queries to serve different style sheets as set resolutions. Now, the question is, there are many handheld devices with different resolutions so what you should choose? Pick a resolution as standard resolution you are going to optimize your site for each type of device (table, mobile, etc). Normally, people would choose based on the iOS devices—768px (tablet design) or 320px (mobile design).
There’s another way for you to choose: it is using width percentage which means you set up percentage-based grid so everything will rescale with device’s resolution.
Both ways require you some skills and good knowledge to achieve. That’s not a surprise since responsive design is a new and advanced technique in web design in general.
2. Make a draft
From the first point, you know what road you will take to have your responsive site. Now, it’s time to draft everything come to your mind. What important content you’ll keep to display on mobile site, what you think that is necessary to make visitor recognize your brand and your impression, what features or designs will help you to achieve those goals….write them all down and write as many ideas as you can. Finish? The next thing to do is picking what you think the most worthy to put on your site. Don’t be greedy and try to optimize the best things that are most effective for your business.
“Dream big and implement small” – that’s how you do.
3. Pay attention to alignment and spacing
In designing a mobile website, everything must be kept consistent from the beginning throughout the whole process. Spacing and alignment are one of the most important things. I have 3 words for you: More white space. Elements on an adaptive website must be spaced consistently and they should have plenty of padding between each element. Be able to do this, you can give your website visitors’ eyes a break and they can browse your site with comfort.
Let's see how Facebook do it:
4. Keep high usability and user experience
One thing you should keep in mind when designing your responsive website is to keep the highest optimal usability so the user experience could be guaranteed. Usability is the key factor and its presence is hidden beneath all your design elements. For example, since the screen of handheld devices is much smaller than desktop screen, you may tend to reduce the size of everything like button size for fitting with the small screen. However, not everyone has a hand with finger small enough to not touch the wrong element/button. You’ll have to predict this situation and design a button that anyone can tap on without any difficulty.
The key here is: Think of how your users will use your site and design for their benefit.
Last but not least, the most important thing to do after you finish your designing work is not launching it immediately for public use. The right step is letting your friends or colleagues test your site (don’t say that you designed the site if you expect a more objective opinion). When your friend or colleague is visiting your site, stay focus on how they use the site. Pay attention to the points they get stuck with, ask them what elements draw their interest, for example. This is a usability testing that help you complete your great UX design.
Let your friend/colleague do usability testing volunteer for you!
The prospect of Joomla responsive design
In future, we will witness the maturity of responsive designs for Joomla as an inevitable part of Joomla development in particular, of web design in general. Walk firmly on the responsive design road, both Joomla users and developers benefit from its great accessibility and usability.
There will be more and more responsive templates and extensions developed for Joomla responsive websites. You can see on JoomlaUX one of the first responsive extensions for Joomla: JUX Portfolio – a helpful tool for you to set up your responsive portfolio/image gallery/artwork website.
Please check:
Tips for a spicy portfolio site
Tips to make responsive images
* Please leave us your comment on this article or add below your own opinion on responsive design. And don't forget to Share if you find this article helpful.
