top of page

Responsive Design: An Early Example 

Long before it was just another buzzphrase, responsive design was an important part of front end development. Consider the creation of one of Apple's first great applications.  Before 1979, accountants had to fill in physical ledgers by hand, knowing that each error made in a column or row would necessitate a tedious reentry of all the data affected by the erroneous entry. Dan Bricklin changed all that with the invention of VisiCalc, a revolutionary program that allowed electronic spreadsheets to adjust the entire spreadsheet each time a data point was changed. ​Though we now think of responsive design as adjusting screen content for the appropriate media device; at its most basic level, responsive design is the idea that the design should effectively respond to the user's behavior, which includes responding to corrected data points on a spreadsheet. ​Below are some images/videos that showcase some of my own responsive web page designs. 

premium_photo-1671461774955-7aab3ab41b90

         
As one reviews the video below, it can be noted that the dropdown menu moves left when the screen width falls below 500 pixels. Though minor to the casual observer, this small responsive adaption makes the dropdown menu easier to view if using a smartphone.

Responsive Dropdown Menu

             

Side by side columns become almost impossible to view as the viewport shrinks.  Here we see a design that everyone now takes for granted - columnar stacking to accommodate multiple viewports. 

Columnar Stacking

            
Yet another design principle now taken for granted, but no less important, is the idea of multiple component resizing. A header sized for a smart phone would ill serve a desktop design and vice versa. The same can be said for the text and the image slider visible in the adjacent video. Note the subtle but effective changes in header, icon, text, and image slider, as the viewport width is modified. 

Multivariate Resizing

bottom of page