Building an effective responsive web application

Responsive web design is something you’ll hear about time and again but what about web applications? They need to be responsive too and when designing and developing apps it is essential that responsiveness is at the heart of every decision. Building a responsive web app isn’t as daunting as it may sound.

Below we’re discussing the key concepts in this type of design and then how you would actually develop a responsive web app.

The Core Principles of Responsive Design

Website developers have been working with responsive design for some time now and applying these principles to app development isn’t a huge step. One of the key principles of responsive design is that you can’t assume too much about the end-user. Not all mobile devices are touch screen for example and not all screen sizes are the same. There is no way of second guessing every possible end-user situation. Focusing on each feature individually rather than presuming will make for a better design that is genuinely responsive to the end users’ needs.

Responsive web design deals in developing designs where the screen’s width isn’t standard. Many tools have been created to handle these problems from relative units to responsive images. The concept is effective but there are still technical issues you need to work on.

Responsive design is very much focused on client-end solutions. Responsive measures will be taken on the client side including:

• Applying styles through media queries
• Loading additional content
• Using <picture> or @srcset to retrieve responsive images

Responsive Behavior

Responsive web design is essentially about layout and design but as web site developers we also need to think about responsive behavior. This is what makes applications different from regular websites. Responsive web design utilities fluid grids and responsive images but when we look at web applications there is a further need for responsiveness in loading modules to respond to screen size and device capability.

Building Responsive Web Apps

To build responsive web apps we need to keep the end-user in mind at all times and this can be done through declarative module specification, setting conditions for loading modules and extending modules/variants based on specific feature detection and media queries.

Responsive behavior allows for a huge amount of flexibility in how each application is designed and built. We need to look at these ‘modules’ and how they can be related to the structure of web applications.

Implementing Application Modules

The combination of declarative application composition, module extension and responsive module loading opens up a huge range of opportunities to implement and utilize application modules in ways to benefit your end users.

Performance and Usability
In some instances there have been cases of responsive web design that actually decrease the performance of a website when not implemented properly, such as through the addition of a few media queries of JavaScript. As web site developers we should be thinking of things from the perspective of mobile first always and load only what is necessary. Responsive web design and app design is scalable and will respond to the device in question.

Scalability
Responsive behavior makes for a very powerful tool in many web scenarios as it can be used in a number of different sequences. The approach is highly scalable and it can be used sparingly on static content websites, used to compose entire context-aware applications in HTML using application modules and it all boils down to the maximization of portability.

Future-Proof
Building applications responsively, using HTML5, guarantees a future-proof product. Your development won’t disappear into the ether within a year or two and the number of platforms which have developed to support HTML5 applications are growing practically on a daily basis.

Conclusion

Very few of the largest websites out there have developed a truly responsive design or indeed a truly responsive web application. However, this doesn’t mean you shouldn’t as responsive web apps is an area where you could profit and there is huge opportunity for development and creativity in this field. Declarative composition for responsive apps is just one possibility and is probably the best place to begin.