Differences

This shows you the differences between two versions of the page.

--- blocks:app-note:visito_spot_content [2021-06-15 07:22]
mattias [Methods for web content in general]
+++ — (current)
@@ Line 1: / Line 1: @@
-=======Content creation for visitor spots =======
-Work in Progress....
-Blocks enables you to invite visitors to use their own personal devices to enjoy rich content that enhances their experience.
-It is pretty important to understand the way Blocks handles different screen sizes and aspect ratios and what the content creator and designer probably should consider in order to create Blocks content that looks well on all devices.
-=====Logical pixels=====
-On mobile devices, one pixel is not necessary the same thing as a physical pixel on the display. Often, we got a display panel that is well beyond HD on a small screen area leading to exceedingly high PPI (pixels per inch).
-The way the mobile device industry has addressed this is by working with something that we could consider as virtual pixels or reference pixels, referred to as CSS-pixels or logical pixels.
-CSS pixels are calculated as CSS Pixel = Device Pixels / Device Pixel Ratio*
-Some modern screens have a Device Pixel Ratio as high as 4.
-(*On some devices there is a difference between device pixels and rendered pixels where device pixels will be down sampled to fit the devices physical pixels.)
-Working with logical pixels in content does not mean that we would restrict the resolution on any video, images or text.
-The way the browser handles this is that any element will be resampled to use as many physical pixels as possible in the area the content is supposed to display hence it is important to keep this in mind while preparing videos or images for the web so we provide material of the right size.  Always strive to supply enough pixels in content, but avoid excessive content quality to preserve bandwidth. It is good practice to consider and optimise the material for the best user experience, even if it bandwidth is rarely an issue with on premise Blocks servers.
-=====Methods for mobile web content in general=====
-The modern standard way of handling different aspect ratios and screen orientations on the web is to create alternative layouts that can adopt content layout to work well on any screen known as responsive web design.
-While that is probably the ideal solution in terms of content quality, it takes a some effort from the content creator to consider a good varity of  screen scenarios and create the styling rules that can apply to every possible case.
-This is possible to do also with content created in Blocks simply by applying all the necessary css declarations.
-Blocks does not provide any custom built in tools to do this, instead the content creator will work with conventional web development tools such as the developer tools in a standard browser and a good texteditor such as Atom that can provide some typing assistance in writing the css declarations.
-=====Standard methods for Blocks content=====
-Blocks provide methods for content creators that is less fluent with CSS using special blocktypes such as the Scroller or the Stack block.
-This method is based on the content scaling to the devices width and the user will scroll horizontal to see whatever content that cannot fit on the screen. It is important to supply enough height in the content so we provide content that covers the whole screen on the devices with the tallest aspect ratios.
-The Stack block
-In Blocks one can use content size that reasonably well matches an ideal target device we want optimise for.
-The most common width/height aspect ratio of mobile devices is 16/9 even though 19.5/9 is catching up fast. At the other end of the scale, we find good old 4/3 that is used on iPad and some odd mobile phones.
-From a design perspective you would probably want to optimise for an aspect ratio (probably 16/9) or bite the dust and create multiple css rules to accommodate different optimised layouts for different screens.
-In general, it is not a great issue for users to scroll to get content that cannot fit the screen, after all we all do this all the time when we browse newspapers or social media apps.
-In some cases, it is not really that desirable to scroll, so we want single view content.  In example one probably want the numeric pad of the Blocks locator to fit on any screen without the need to scroll.
-Perhaps you have some type of landing page that welcomes the user and perhaps gives a few short instructions how to use the content and that should fit and look good on any screen. Maybe those pages must be managed with different css rules depending on visitor screen aspect ratio. It may be normally would be located to in Blocks can be done scrollable and scaled to width.
-Lite text och bild som illustrerar hur innehåll visas på olika screen ratio. 4/3, 16/9 och 19.5/9
-Scrollable content.
-This is the way most people are used to see web content. Often there is a top menu and/or a bottom menu that sticks to the edge and the area in between is the area where the actual content is being served as scrollable content.  In Blocks we have the stack block to cater for this design, it is very straight forward and require very little consideration from the content creator.
-A typical example of this made in blocks:
-There are some pros and cons with the stack block.
-Pros:
--	Easy to setup.
--	Users recognise the layout since it is commonly used in web content and mobile applications.
-Cons:
--	One would probably optimise layout for a 16/9 screen ratio and when viewing that content on a 4/3 screen ratio the sticky menus top and bottom will appear to be pretty large due to the scale to default width behaviour in Blocks.
--	Every block combination is not ideal and may result in unexpected results. The use of compositions may limit mechanisms that allow content to scroll if content is too high.
-The ideal Stack structure:
-Since the book will find the reminder the height of the book is automatic and relates to the viewable area on screen minus top and bottom menu. Any child blocks in the book will allow the height property of the block to be left empty which means the height is dynamic and the same as the area between the stick to edge elements in the stack block.
-Image showing IdealStack
-Breaking Stack structure:
-While we use a composition as the fill reminder block and that will work, we cannot stick a book as child in that composition so that approach pretty much restricts that approach to a single page.
-Image showing breaking stack.
--
-Single view content
-This can be used for things like for example controlpanels or a locator to be single view content so the user does not need to scroll to reach all buttons and indicators or the bottom digits of the numpad. To accomplish this one would either place all the controls in the area that is common among all possible devices or
-What options do you have
-So, what can we do to make sure the locator fit on all screens.  By default, the locator will scale to width and center on the css height of the device and will look good on any mobile device used in portrait orientation.  That said, if we want to use an iPad that is 4/3 in aspect ratio we will have to do some tweaks to the locators appearance. All the tools to do this are available in css.
-The one Block that puts us in trouble and is not that easy to control is the locator block that by its nature is commonly used in the context of visitor spots and visitors devices.
-@media screen and (min-device-aspect-ratio: 8/5) { ... }