So What is Responsive Web Design?

It must have happened to you. You open a web page on your mobile device and it looks all squashed and tiny. You constantly have to increase the size of the font and scroll left to right to read the content. It’s annoying.

That’s a site that isn’t using responsive design. However, if you go to a web page and find that everything is laid out perfectly with no need to scroll or resize, there is a good chance it’s using a responsive design.

When a website is responsive, the layout and/or content adapts to the size of screen on which it’s presented. A responsive website automatically changes to fit the device you’re reading it on.

Responsive design usually reacts to four kinds of screens: the widescreen desktop monitor; the smaller desktop (or laptop); the tablet; and the mobile phone.

Here’s a screenshot of one of the Joomla responsive templates from JoomlArt.com. As you can see on each device, the layout looks a little different. On every device though, the design looks great with no tiny text.

When a website is responsive, the layout and/or content adapts to the size of screen on which it’s presented. A responsive website automatically changes to fit the device you’re reading it on.

How Does Responsive Design Work?

Responsive design works by using @media queries to identify the size of the device screen and present a layout based on that size. It’s something you can test easily. Go to this page and drag the browser window to scale it down. You’ll see the layout change.

When Did the Responsive Design Trend Take Off?

According to Google Trends, people started searching for the term “Responsive Web Design” only in the middle of 2011 — so it’s all pretty new. But as more and more people use their mobile devices to access the Web, it’s been growing fast. Users expect a good experience whether they’re on an iPad, a Galaxy or a desktop. If they don’t get it, they’ll go elsewhere.

According to Google Trends, people started searching for the term “Responsive Web Design” only in the middle of 2011

Joomla Responsive Design

“Joomla Responsive” only turned up in Google Trends in the third quarter of this year so it’s even newer! But it is catching up very quickly, and every Web designer, template provider and extension developer needs to know what it means and how it works.

“Joomla Responsive” only turned up in Google Trends in the middle of this year

Responsive Joomla Templates

I’ve been looking at some of the most popular template clubs to see if they provide responsive templates. Most do. Some, like RocketTheme, have just started and offer only one responsive Joomla template. Others already have three or four responsive Joomla templates.

A surprisingly large number of Joomla extensions are also already responsive, most involving images and media.

Should I make my Joomla site responsive?

You may think at this point that the answer should be yes. But hold your horses! Sure, responsive design is a great idea… if you have a simple site without too many extensions. Those extensions can cause trouble if they’re not as responsive as the template. Just take a look at the example below. This is a responsive template with a video using the AllVideos plugin from Joomlaworks.gr. This plugin doesn’t add the videos in a responsive way… although there is a way to do it.

Even though the template is responsive, the video plugin is not and it doesn’t display properly on a mobile device.

If you want a responsive Joomla site, every front end extension you use has to be responsive. It’s going to take the Joomla development community a bit of time to catch up with that.

At iJoomla we plan to dedicate the rest of this year, and much of next year, to making all of our extensions responsive.  We’ll start with iJoomla DigiStore, our Joomla eCommerce solution. (Imagine a responsive shopping cart — now that’s sweet!) Then we’ll move to Guru, our Joomla LMS, so that students can view their lessons easily on their iPads or iPhones or whatever device they may be using.

Once you have both a responsive Joomla template and responsive front end extensions, you’ll have a real responsive Joomla site.

And in the Meantime?

Until all your extensions are responsive, you can use any of the other Joomla mobile solutions:

• WeeverApps will create a slick app of your website’s content. It’s cool but does have a few issues which the company is working on. WeeverApps also has a very limited support to third party extensions, but it’s great if you have a simple site with mainly text content.

• Mobile Joomla will display your Joomla site differently depending on the device. I tried to use it and had quite a few problems. We’re trying to make it work but it’s hard going. I’ll let you know how we get on.

• Some template clubs have a built-in mobile version. I believe this trend will fall away as soon as the responsive Joomla templates catch on.

So where are you when it comes to Joomla and responsive design? Are you using a responsive Joomla template yet? Let me know, I’d love to hear about it.

Update: We’ve just finished converting most of our products sites to responsive design. Check out the following sites with your mobile device to see how it looks like:

• http://adagency.ijoomla.com/
• http://ecommerce.ijoomla.com/
• http://guru.ijoomla.com/
• http://helpdesk.ijoomla.com/
• http://seo.ijoomla.com/

Andrew J. Holden, Chief Experience Officer (CXO)

Tell us a bit about your background

I certainly never thought I’d be developing mobile apps with Joomla!

I was a community organizer in the U.S. before I moved to Canada and launched a small web design company which exclusively served community for not for profits and renewable energy startups in 2004. I actually learned web design ‘in reverse’ using the early versions of Mambo, which as you know, became Joomla!

Having a free open-source web site platform to work with and the support of Joomla!’s amazing volunteer community was everything in those days. I have an article at Joomla! Magazine that’s basically about how I went from a total newbie to developer in a very short period of time.

How was Weever Apps born and by whom?

Our lead programmer Rob Porter and I were very frustrated with the ‘mobile problem’ in 2010. Native, ‘app store apps’ feel great but were far too expensive, technical and platform-limited for our not for profit and startup clients to afford.

Yet, we understood early on that the future is mobile and the organizations we worked with would need a solution immediately. That proved out – today there’s more mobile connected devices that people on earth and at least half of all local searches are on mobile devices.

So we felt stuck! We explored mobile plugins, responsive CSS techniques, etc – but nothing gave us the mobile-aware, touch-aware and “contextual” mobile experience we wanted to provide. Ultimately we found we were just making smaller versions of desktop web sites, which isn’t ideal for a goal-oriented mobile solution.

And we didn’t like that our clients could be ‘shut out’ of the app store due to political or personal reasons – when a handful of companies dominate the (mobile) web it’s not great for web democracy or open source, in our opinion.

So we took a walk. We spent two days hiking the Bruce Trail in Northern Ontario, Canada and talking about how we could solve this problem for us and for our clients. (Photos here).

We came back with a plan to create an “app builder” for Joomla! that would allow non-technical users to create and maintain apps. It would be free and it would do more than replicate a desktop site, but also allow for a lot of new social media interaction on twitter, photos from flickr, etc – that’s Weever Apps!

It’s been almost two years since then. Our invention caught the eye of some local successful business people and we found investment and built a team. While we’re not exclusive to Joomla! anymore (WordPress too now, custom and Drupal coming), it’s still our home and ‘first release’ platform.

Tell us a bit about your team?

We’re fortunate to have about 10 core team members in programming, marketing and custom development, which supports a large set of ‘resellers’ around the world. We’ve seen thousands of apps built in about 60 countries. Our app-framework is available in about 15 languages so far.

Weever Apps Team

What’s your business model?

We have a free version for Joomla! and WordPress sites which includes basic app features like social media streams, content, launch screens, qr codes, and quite a bit more. Our pro version is $10/month and includes ‘GeoTagger’, our plugin which creates a GPS-enabled mobile map(s) of articles in Joomla!. Pro also includes more advanced signup forms and other marketing integrations.

We also have a Premium / Reseller version at $40/month which web design companies and site owners use to fully rebrand the app as their own solution, removing a ‘powered by’ message when the app launches for mobile visitors to their web site. That’s where we see most of our sales.

I believe you’re the first Joomla company to get funding. How did you make that happen?

There were a few factors. We had the support of the Hamilton, Ontario, “Innovation Factory” which serves as a business incubator and taught us how to pitch for investment and really put together a strategy for the company, not just a strategy for creating fun new technology. We’re in a former steel town here and the city really needs new businesses to thrive. So we had the support of the business and larger civic community from day one in terms of introductions, training and more.

There’s hundreds of ‘how to get your startup funded’ articles out there but I’d say the deciding factor is that the potential funders we spoke to saw that we really, really wanted to change things for mobile and we weren’t going to let up on that. We had solid advisors and also took the approach that we were looking for more business experience to help us create a great team. I think being honest about our shortfalls was another important factor.

Do you think other Joomla companies should seek funding, and if yes, what’s your best advice?

That’s a tough one. There’s a strong case to be made for Bootstrapping and for building a ‘lean startup’ – the 37Signals blog has some great articles on that.

Overall I’d say it’s about how big you want to be. Creating a smaller product for a smaller set of customers in a niche market is a nice approach too and doesn’t require funding.

With Weever, you make an HTML5 “Web App” – that is that *one* app which works for all popular touch phones and tablets. A Weever HTML5 Web App also launches instantly for mobile visitors to a desktop site, according to the preference of the site owner.

So we have a big and kind of crazy goal – deliver a mobile solution that makes the app store model mostly obsolete by creating something that launches instantly, updates instantly, is affordable and works for every customer. So there was no question for us on seeking funding.

You also won a TV competition, tell us about that?

Lions Lair

Have you seen ‘Dragon’s Den‘? It’s a reality TV show/contest in the US where people pitch their business ideas to potential investors. We were on a more local, Canadian show called “Lion’s Lair” which has a similar format.

It was quite an experience. Partly because it’s strange being on camera but also because the format is that you go in front of experienced, insightful and very successful business people and have to prove you belong there too.

We practiced and practiced and it paid off. We won the top prize and $50,000 in startup resources.

How many apps were created with Weever Apps?

It’s in the tens of thousands now. Most apps tend to be simple and built for small businesses that want to generate leads via a click-to-call number, blogs or not for profits. We’ve seen quite a few tourism maps and other kinds of mobile directories made as well.

What % of apps are created with Joomla vs. wordpress or other CMS?

They’re mostly Joomla! since that was our first release and our only plugin for the first six months or so, although WordPress is growing pretty quickly now. We also have an open API where we’re seeing a fair amount of custom development for existing corporate/enterprise databases, new services, new CMS’s and other needs.

We’ve had some great support from the Joomla! development community as of late, both internal from the leadership team but also with developers like StackIdeas using our API to make their plugins (in this case, EasyBlog) compatibile with a mobile app.

Some template clubs have mobile support. What’s the difference between doing it that way and using Weever apps?

There’s a *lot* of differences – so many it’s hard to know where to start.

Most mobile sites are a reflection of a desktop solution – which means that the mobile context usually isn’t recognized and mobile marketing isn’t much of a consideration. That’s a missed opportunity in a changing web where more than half of all local searches are on mobile devices.

The key difference is that the user experience is actually made for mobile and is made to drive mobile *results*.

Moving through the app ‘feels’ like shuffling a deck of cards – not tapping and waiting for pages to load. There’s a big and obvious click-to-call and ‘share this on twitter, google+, facebook’ buttons in every app. Mobile maps and nearest-to-me pages ping the GPS and deliver *relevant* information instantly.

It’s not just a ‘read this’ solution, it’s an opportunity to actually engage and interact with visitors, and that’s what apps are great at, of course. I’m a big fan of good CSS and mobile-first strategies – but apps are made to accomplish goals in a mobile context, and that’s what we build Weever Apps to do well.

Those are the finer user-experience points. In the bigger picture of things we think that recognizing that a ‘site’ is now just one location where an organization ‘lives’ on the web is important. So we don’t just integrate one web site’s content, but also allow for real-time streaming of flickr photos, youtube, vimeo channels, and *lots* of other wide social and web-integration. Our 2.0 release is coming out soon and includes some really cool stuff for tablet interactivity as well. You can see all our features here.

What’s your goal with Weever Apps?

Make the mobile/web more affordable, accessible and fair by “weeving” the best features of traditional apps and web sites together – and – ‘”weeving” an organization’s entire web presence into one focused, engaging mobile presentation. Thus the name, “Weever” – the ‘a’ was taken

What are some of your challenges?

It can be really tough introducing a almost completely new technology – we had a lot of trouble explaining that web-apps launch in the browser but can also install and go full-screen early on. And that one app can actually launch and work for all popular touch phones and tablets.

It took a lot of time for us to learn how to explain what HTML5 Web App technology is and what the marketing benefits are to people who had only ever thought of ‘apps’ as something that exists in the app store. Fortunately there’s been a surge in HTML5 Web-App adoption by big companies so that’s made that process a little easier.

When you combine that with a basic free product, it’s easy to spend too much time explaining what a technology is and too little time making it better. So we learned that we had to restrict ticket-based support to our pro version, even if we didn’t want to initially.

Even though we see more benefit in an app that launches and updates instantly for *every* customer, we found that some businesses and larger organizations just had to be in the app store too. So we’re adding a ‘turn this web-app into a native (traditional, app-store) app’ solution with the forthcoming Weever 2.0 release.

What % of sites are mobile ready currently?

Believe or not, it’s still less than 20% and that’s for *any* mobile solution at all. Going mobile is tough for a lot of web designers and site owners. All the options out there can be overwhelming.

Another suprising stat – most people don’t realize that for all the buzz the iPhone generates, it’s actually less than 25% of the phones in use out there. Android averages anywhere from 50-60% globally so having a solution that works for every popular smartphone-OS is even more important these days.

What are some of your main future plans for Weever Apps?

I’m currently exploring a way to use Weever Apps to interact with a Joomla! site using Microsoft Kinnect, a motion-capture device, which is pretty fun. More immediately, we have a Weever Apps 2.0 release coming which includes a *lot* of new features.

We’ll be supporting deep-linking in the app for the first time, as well as a whole new set of templates and layouts to choose from on a per-feature, per-tab basis when building the app. We’ll also be allowing for native (app store) packaging and supporting a new of Joomla! extension integrations and new features in general for events, ticketing and lots more.

We have an ‘AppBuilder’ platform coming soon too. Some of our best early Joomla! site and app resellers told us they sometimes needed a place where they could build apps that aren’t attached to a desktop site, for use in specific mobile marketing campaigns. So we’re making that too!

Do you have any message for Joomla users who want to take their site mobile?

Try us! The basic version is free, building the app is non-technical and you’d surprised at how far you can go. But more than that, I’d say “focus on goals”. If you’re building an app for a restaurant, put the click-to-call area ‘up front’. If it’s a tourism map, make sure you distribute QR Codes in the relevant areas so folks can launch your app instantly on their phone. Mobile today represents a huge opportunity but only if you think through the context of what your mobile users actually want to see and deliver an engaging solution.

*and volunteer with Joomla! once in a while too

Thank you Andrew and good luck!

Thanks Merav!

Visit WeeverApps.com and get your site mobile today!