By: Phillip Sharpless
An important consideration when developing a modern web application is ensuring that the app both functions properly and is visually appealing no matter what device it displays on. Most web app development is still primarily done on desktops and laptops, so it can be easy at times to fall into the trap of assuming that desktops and laptops will be the standard user experience.
Business Intelligence (BI) Web Applications
Since business intelligence (BI) is a core competency of ours, we feel it’s necessary to mention that web applications centered around BI web applications can be visually rich, often times displaying colorful charts, illustrative graphs, detailed data tables, and so on.
Filling up the screen with impressive visualizations can be very easy, even on a large, widescreen desktop monitor. Users of BI tools are likely more familiar with technical concepts than your average person, so they are more likely to interact with the app on a device with a higher resolution. Designing a robust user interface (UI) for power users is clearly a priority. At the same time, maintaining a professional presentation for users on other devices must now be considered an integral part of any modern web application.
Layout / Design Decisions
Layout or design decisions that make sense on a 16:9 wide screen monitor resolution may not make sense on a 4:3 resolution and almost certainly would not present well on a mobile device. Mobile device web activity has gone from nominal to now accounting for over 50% of all web traffic in just over a decade, and is continuing to grow.
[bctt tweet=”Mobile device web activity has gone from nominal to now accounting for over 50% of all web traffic in just over a decade, and is continuing to grow.”]
As a result, the range of resolutions and aspect ratios that a user may be running is wider than it has ever been, and the concept of responsive web design has arisen in response to this challenge. The fundamental tenet of this design approach is ensuring that the website will both display and function properly regardless of the screen size or resolution displaying it. One of the more common approaches to accomplishing this is conceptually designing your pages as a flexible grid of rows and columns of content that dynamically layout and size themselves proportionally based on the viewport dimensions. Many of the most popular front-end frameworks, such as Bootstrap and Foundation, implement this approach.
The Most Common Factor When Determining Layout Logic
The most common factor when determining the layout logic of an application is the width of the screen. How much space allocated to each column as well as the number of columns displayed will dynamically change based on the screen width. The widths at which your layout logic changes are commonly referred to as breakpoints.
CSS Media Queries
What allows the layout logic to be applied are media queries within CSS. Media queries allow for CSS rules to be dynamically applied depending on the technical properties of the device. Many of the popular front-end frameworks have the breakpoints governing their grid systems predefined, meaning they are specifically selected based on common resolutions. However, understanding how to both write and use CSS media queries is necessary. This knowledge is essential because there are plenty of situations where a developer will need to write media queries within their own CSS to further customize aspects of their presentation. For example, an element, which displays normally as an icon with an associated text label at a high resolution, may display simply as an icon at a lower resolution.
Do you need help building responsive web and/or mobile applications?
We can help you design and develop applications that are both web and mobile-responsive. Learn more about our custom application development capabilities. If you have any questions or would like to get your help, call us anytime at 678-835-8539.
Keep your data analytics sharp by subscribing to our mailing list.
Thank you for reading. As always, we encourage you to share any thoughts, questions, or ideas you may have regarding this blog post.
Also, if you haven’t subscribed to our email mailing list yet, be sure to do so for more business intelligence, data warehousing, and custom application development insights, tips, and more.
References used for this blog
W3Schools (media queries) – https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
StatCounter (screen resolution statistics) – http://gs.statcounter.com/screen-resolution-stats
Bootstrap – https://getbootstrap.com/
Foundation – https://foundation.zurb.com/