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.
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Quick Tips to Build an Effective Responsive Web Application
1. Quick Tips to Build 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
Web site 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.
2. 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.