We all have to do this at some point, create an all encompassing, GUI program that works between the different generations of IPad and even up to 1920 x insane. Increasingly, as of 2018, it doesn’t seem to matter whether you are working in the back or front end, at some point you are creating some sort of front end. Making matters more complicated, a slew of useful and enticing features are starting to become available.
This article is geared towards examining the increasing scale of screen widths in tablets and the differences in available features over time.
Browser features have increasingly grown more powerful. Just a few newer features are:
The links above lead to the MDN pages including browser support. In general, Microsoft Edge or Explorer nearly never supports modern features. However, Microsoft’s browser usage is dropping steadily with Edge taking less than 3 percent of the market and Explorer taking less than 10 percent.
Solid, responsive web applications can be built for Opera, Safari, Chrome, and Firefox without entirely alienating all users but with a slightly outmoded design using CSS hacks or even web frameworks through header parsing.
Firefox, Chrome, and Safari continue to lead the pack in terms of support for newer features.
In terms of devices, the variety of tablet brands is growing. This is leading to a growth in the use of Android devices. This will mean that browsers such as Chrome and Firefox will grow increasingly popular.
Apple continues to lose market share while Microsoft is gaining ground. This could be due to the poor practices of Apple in relation to copyrights and development.
[iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=asevans48-20&marketplace=amazon®ion=US&placement=1118907442&asins=1118907442&linkId=7a3fd97372054be352128db179e5cb6d&show_border=false&link_opens_in_new_window=false&price_color=333333&title_color=0066c0&bg_color=ffffff”]
The overall trend is towards responsive web development. Each page scales to nearly any resolution required with the exception of mobile which requires a separate site.
This trend carries towards features as well. The days of using stateful web design, jumping from page to page, are nearly dead. Each page is practically a
Future development and certainly my own are also abandoning the typical grid system. Divisions can now become polygons. It is possible to draw complex shapes with d3js.
Web Applications in Unexpected Places
Anything and everything is becoming possible. Web applications are achieving the same power as desktop and mobile applications. However, security will still be a concern.
This power includes on the monitoring side of the IOT sphere. With the ability to launch a browser through tools such as QT and PyQT, web applications will start showing up in unexpected places.
Consequently, web sockets, RTC, MQPP, and XMPP will likely grow in popularity.
[iframe style=”width:120px;height:240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=asevans48-20&marketplace=amazon®ion=US&placement=B07BTC641D&asins=B07BTC641D&linkId=51e65abfc845b782716c4cd4882c615b&show_border=false&link_opens_in_new_window=false&price_color=333333&title_color=0066c0&bg_color=ffffff”]
Screens have grown in resolution at the low and high end as expected. Since 2012, screen resolutions have grown from 960 x 720 for an IPAD to 1024 x 768 as well as up to 1366 x 768 on desktop, up from 1280 x 800.
A basic website should be safe coding, in 2018 using:
- 960 x 720: Older Generation IPads
- 1024 x 768: Newer Generation of IPads and older desktop screens
- 1280 x 800: For older screens
- 1366 x 768: The most common resolution of 2018
- 1920 x 1080: The future most popular resolution
To stay relevant, plan on coding for both Ipad resolutions as low as 960 x 702 and desktop resolutions as high as 1920 x 1080. My own sites split this resolution into 7 different tiers.
Of course, create a mobile site as well at about 420 width.
The tiers I use are:
- 900 – 999 width
- 1000 – 1199 width
- 12000 – 12299 width (some computers have bizarre resolutions in this range)
- 1300-1399 width
- 1400-1599 width
- 1600 – 1799 width
- 1800+ width
More interestingly, React has gained ground due to the power it maintains in building responsive applications. This is really nothing new.
Personally, I utilize Django these days with Flask for micro-services. This allows me to maintain as single stack for both my front and back-end which utilizes Celery, Thespian, PyTorch, and Python’s other powerful data tools.
[email-subscribers namefield=”YES” desc=”” group=”Public”]