Joomla Templates Club 406,261 posts

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#181082

It’s always questions and problems in this forum, how about a proper discussion for change =)

JA Wall was launched in mid may 2012 so it’s about a good 4 months into development for early adopters, and perhaps a month or two for late comers. But what I’m curious to know is, how is everyone handling responsive development so far? I’m sure for many of you, this is the first responsive template you have worked with and you’re still struggling to grasp the concept. Perhaps we can all share our experience to help one another =)

Allow me to start this off then,
For me, this is the first responsive template I’ve worked with and I’m now into the 3rd or 4th month of development which to be honest is a long time and I’m still somewhat stuck at 80% due to pending bug fixes and introduction of new bugs on mobile devices with every new feature I add >_>

Components, Plugin & Modules
Part of the reason is the lack of components, plugin & modules for responsive templates as well as support for it, alot of time is required to source and test which works and what doesn’t, followed by attempts to seek support from the developer which is very hard at times because many developers refuse to modify their files. I guess I was lucky that I managed to find some developers whom have been very helpful and even converted their components & plugins to responsive design to support my website.

But still a lack of readily available components, plugin & modules means limited customization(especially on K2) or breaking your template on certain resolutions. Sometimes you need to hack the plugin’s code to get the effect you want but you need to remember to add that modification back when updating to a newer version.

A need to support small resolutions
But still because of the nature of responsive template, the need to test and support on multiple devices resolution is required. This is very different from a standard template in the past where you just design it to look good on the PC and let the tablet or mobile device do its own adjustments or horizontal scrolling. Many times, I find myself stuck trying to add new features to JA Wall, constantly having to check different resolutions to see how the new addition looks like on portrait view, landscape and if there’s a overflow. I’m constantly forced to decide how much I’m willing to sacrifice in order to get site to look nice on a small screen like the iPhone portrait view even though it looks perfect on the iPad and PC.

Sometimes after days of working, I ended up having the discard the modification because I simply cannot stand how it looks like on the iPhone or the iPad after attempting to strip certain elements to its bare essentials. Every pixel and width needs to be adjusted perfectly, the border and padding all needs to be adjusted pixel by pixel like some perfectionist in order to get the look right and not break out of alignment when shifting between a smaller & bigger resolution. Most of the time, it will not look perfect even if you get it down to the last pixel but you will just have to make do with it and decide what the minimum resolution size you are willing to support is.

Too many CSS files when fine tuning
One thing about JA Wall, I’m not sure if this applies to other responsive template as well but I feel it’s too complex. There is like 10+ css files and there’s no documentation on what actually controls what. I find myself having to look through multiple css files trying to figure out which to add the modification to or where the culprit is. And even after making the changes, I need to retest across different resolution for side effects. Sometimes adding the modification to template.css causes issues on mobile layout and I need to go into another css file to make adjustments. Sometimes, I add the css changes and it doesn’t display so I ended up playing detective for the next hour looking for the responsible file. One good example of this is when trying to adjust the logo, it simply doesn’t move and you get a big question mark.

In rare cases, especially if you use pop up preview, you find that the issue aren’t with the css but rather with the javascript itself.

Limitations / Bugs in Template
I find that it’s somewhat a industry standard now to release incomplete products and let the end users do the bug test themselves and provide the fix according when encountered. JA Wall itself is riddled with bugs since day 1 of my usage, many of which I had the fix provided thru ticket support or forum threads but those bug fixes doesn’t get added to new versions of JA Wall. So if upgrading from say 1.03 to 1.04, I need to compare files and understand the changes and port over the fix myself if needed.

But having to determine whether the problem is a template bug or a issue with previous customization can be quite confusing. Many times you will be referred to the demo to reproduce the problem but the demo doesn’t have your customization, so you ended up having to revert all your changes then reimplementing them 1 by 1 to find the actual cause. This applies to component & plugin by other developers as well and it’s very saddening to be spending time fixing stuff instead of working on content.

Still it’s very unfortunate that Joomlart doesn’t use bug trackers for their template for us to report bugs or request features so everything is consolidated into one single point for easy tracking and integration in a new version or nightly release.

Final thoughts
At the end of the day, I’m not sure if responsive template is too new or complex for it’s own good and whether it’s truly cheaper to implement than developing a mobile layout / app. But a high level of commitment is truly required to develop a responsive site. What should have been an easy implementation in a standard div template can be a mountain of work on a responsive design. And you run the risk of having your site broken when tablets get more advanced in the future, in terms of features and bigger resolutions.

Bootstrap is probably the way to future responsive design instead of playing with multiple css files controlled by javascripts. But since that will still take awhile, we’ll just have to make do with what we can in the meantime. My suggestion to anyone still struggling with responsive design is to keep your site as clean as possible so there is no unneeded overflow or alignment issues. Keep your navigation simple as well to avoid unnecessary scrolling and menus to the minimum.

If you are planning to add any floating toolbar or modules such as “return to top”, make sure to test it on a mobile device like the iPhone or Google Nexus for navigation issues. It can be annoying to have floating buttons take up screen space on an already small screen.

I hope someone will find my comments useful and please share your experience as well. I’m really interested to know how others is handling responsive design so yes, please share and post! I find it strange why alot of people here don’t hold discussions even though it’s a forum.

2 users say Thank You to arucardx for this useful post

1. Arvind Chauhan
2. conandlib

[Author]

Posts