Re: Single Page Applications -- WEB400

Nathan,

Are JavaScript and CSS frameworks necessary to adapt pages to screen dimensions?

Yes, JavaScript and CSS are used to adapt pages to screen dimensions. I don't know if there are other technologies that let you adapt pages to screen dimensions. However, JavaScript and CSS are defacto web standards, so those would certainly be my choice.

Are removing or hiding visual components from the display a good thing? Or should visual elements just wrap?

I think it's a question of managing user expectations and usability. Generally speaking, people are used to mobile apps being simplified so the UI is easier to use on smaller screens. Less information and less functionality is provided in a single mobile app page compared to a single laptop browser page. This is generally acceptable to users because:

1. The simplified pages are easier to use with touch screens on mobile devices (fingers simply don't have the precision of mouse cursors on smaller screens).

2. The user is often in a mobile context. That is, the user may be in an airport, on an airplane, in a restaurant, at a store, and so forth. They are not sitting in a cubicle using the UI for the next several hours to do their jobs. In a mobile context, users want just the functionality they need, and they want to finish their task quickly. Less is more in this context.

3. Nobody likes scrolling down forever to find what you need. It's like trying to use the fast-forward and rewind buttons on an old Walkman to find the song you want to hear. This is no less true on a mobile device.

So, as long as pages that are adapted to smaller screen sizes provide the key functionality desired by users, and provide it in a way that is easy to use and quick to finish the task, then simplifying the pages adapted to smaller screen sizes will be a good thing.

I would like to point out that fluid design is not sufficient for mobile development. I created a web page to illustrate this:

http://www.kellycookson.info/gps/index.html

First open this site on a desktop or laptop browser. You can resize your desktop or laptop browser window as small as you want. The page has a fluid design, so everything wraps. It works fine no matter how small you resize your browser window. Now open this site on a small tablet or phone. You will quickly be unhappy with the pages. The text becomes extremely difficult to read. The links become small and difficult to use with fingers on a touchscreen. Why did this happen? Because resizing the browser screen on a desktop or laptop does not change the screen size settings of the desktop or laptop. Different mobile devices have different screen size settings. Consequently, responsive web site design requires that you adapt things like text size and CSS box sizes to take into account different device screen sizes.

Responsive web sites use fluid design in the following way. A responsive web site might have, say, 3 different page layouts: laptop layout, tablet layout, and phone layout. The developers arbitrarily pick specific screen sizes to define the limits for each layout:
< 250 px wide = phone
250-600 px wide = tablet

600 px wide = laptop

So, when the screen size is greater than 600px, the page will display the laptop layout. The laptop layout will be fluid until a screen size of 599 px wide, when it switches to the tablet layout. The tablet layout will be fluid until a screen size of 249 px, when it changes to the phone layout. The phone layout will be fluid. This is the gist, anyway.

Thanks,
Kelly

-----Original Message-----
From: WEB400 [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Nathan Andelin
Sent: Saturday, May 23, 2015 9:34 AM
To: Web Enabling the IBM i (AS/400 and iSeries)
Subject: Re: [WEB400] Single Page Applications

The term responsive is thus ambiguous and can be confusing if we don't specify the meaning intended.

Thanks for raising the point. It jogged my memory about how "responsive" was described at http://getbootstrap.com/ which is inline with the definition you provided.

The definition I provided previously, pertaining to the performance of the page, was borrowed from an Angular JS tutorial. I think "responsive" is a necessary attribute of web sites and web applications, whether it pertains to performance, or whether it pertains to adapting the page to the size of the screen.

While viewing http://www.nasa.gov/ in my iPad, the layout changes, depending on whether viewed in landscape or portrait mode. More specifically, the menu bar disappears when viewed in portrait mode.
Bootstrap is known for implementing behaviors like that.

Are JavaScript and CSS frameworks necessary to adapt pages to screen dimensions? Are removing or hiding visual components from the display a good thing? Or should visual elements just wrap?
--
This is the Web Enabling the IBM i (AS/400 and iSeries) (WEB400) mailing list To post a message email: WEB400@xxxxxxxxxxxx To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives at http://archive.midrange.com/web400.