Site Design Analysis #02

This time I will perform observation and analysis of the site from bbc with the link

The overview using desktop screen as follows:

This is a responsive site, because when viewed using Responsive Design Mode in Firefox, it will look like as follows:

For the observation purposes, the site is saved to local folder in d:\sites\02. As usual, the icon is missing:

So let’s find out which icon that the site is using. Using inspector, the CSS for the missing Sign In icon is revealed to be:

The icon-sprite.svg is retrieved using save method in Network option in Firefox, then copied to relevant folder, and now the icon is in proper place.

The icon-sprite.svg itself, when viewed using the browser as follows:

So, it is using the background-size and background-position to show the each icon image as required.

The icon-sprite.svg is in vector format, so it is very convenient for designing web responsive site for a proper icon resizing for each screen size definition.

But the search icon inside the search input object is still missing:

Again using inspector reveals as follows:

The above process for copying missing icon is repeated and now I have:

Now let’s examing the sign in UI component, on wide screen it will show as follows:

But on Responsive mode:

It has a smaller logo and the “Sign in” text is gone, leaving only the user icon. The wide screen mode is governed by CSS media directive condition as follows:

Where the element itself is using these attributes:

The static position attribute will cause the “Sign in” to show and the absolute position will cause “Sign in” to shrink to 1×1 pixel.

Now let’s identify how the menu with resizes itself when the screen width is changed. With inspector, the width seems to update itself whenever the screen size is changed:

But this behavior failed to be duplicated in local environment in d:\sites\02 folder. So, let’s investigate this first.

Checking into the console, there are several errors as follows:

The error is originated from lib.js and from the header information, it is a RequireJS version 2.1.14 and in minified state as usual. So, let’s retrieve the original development source for this file and place it in D:\Sites\02\MySite_files\lib.js

But now I have:

The error “Mismatched anonymous define” is usually caused by redundant definition. In this case it is inside D:\Sites\02\MySite_files\statusbar.js. Just perform remark of this script statement.

But now I have a more obscure error as follows:

So, let’s investigate it further. After some more debugging sessions and observations, actually the cause of the above error is fairly simple.

The nature of this error is just as the previous one, but requireJS handling of the error is rather misleading. By performing breakpoint just before the returned errof below at line 1229:

The first case, the detailed error can be shown because it is in the form of array object, and requireJS will call args[2].toString() to get the string value, but the second case, when I try to use this method the result as follows:

Then I check the value of args[2], because args[0] and args[1] do not provide any useful clue, I have as follows:

The value of args[2] is the actual block that causes complaint from requireJS module.

By performing the search string for the above data, it is found that it is defined in D:\Sites\02\MySite_files\id.js. By performing remark of the script pointing to this file, the error is now gone.

The menu in local script now can perform automatic resize. But first, let’s examine the effect when the menu is narrowed down, the menu text become a button as follows:

This is governed by CSS media conditional block as follows:

The navigator width resize is executed at this callstack in orb.js. The function name is obfuscated, seems this script is proprietary of BBC:

With callstack information as follows:

The object name “h” above is the li element with id orb-nav-more. So function “t” at line 363 above will try to change the width.

The function “c” below seems to get executed each time when the width is resized during Responsive Design Mode in Firefox:

Each time when it is called, it will perform some comparison with window.innerWidth and perform necessary resize routine inside the setTimeout function.

As to what causes the function “c” above gets called, I will leave this investigation to the reader 🙂

Next, let’s examine the content below header. It is separated in two column called column–primary and column–secondary:

The CSS itself is separated into three parts based on screen width:

In wide.css, the column–secondary will be placed on the right side of column–primary with this rule:

In the tablet and compact mode, this rule will be omitted so it will be placed below column–primary.

Next I notice that at certain column, the news title’s font size will resize itself when it reach certain window width limit. This is in wide screen:

And the computed CSS font size as follows:

At tablet or compact screen:

And the computed CSS font size as follows:

But I notice an anomaly on the font size transformation, i.e. that the css always point to line 1 where the same rule that should be in effect never gets executed.

For example when I try to change the text color using title-link__title-text class to red, the rule never gets executed instead it is always the same rule but on line #1:

From the above picture, you can see that the rule for red color is never gets executed. This behaviour is certainly based on script execution, but which script is it ?

Close examination reveals that the script that’s causing the browser to ignore the modified rule resides in script called “news-loader”. It is using bootstrapUI variable and function called stylesheetLoaderInit. This function will perform re-write of CSS file using:

Performing the remark on this function will enable the edit of CSS rule taking effect without getting override again.

Next, let’s examine the design below main article in content area inside column–primary div class which has this appearance:

As you can see, it has three column, and using inspector, it consists of divs of same class names as follows:

But by examining the first item, the CSS rule as follows:

You can see that it is using table-cell display method and for its first element, it is using first-child pseudo element to set border attributes. Each item has 33.33333 % width for each column.

For the middle one:

And for the last one:

In the narrowed down screen, this item is transformed to one column as follows:

This is governed by CSS rule as follows:

Below this design element come the element that has 3 rows and 2 columns in wide screen:

Design elements as follows:

It consists of six div with class name macaw-item faux-block-link, the display method is using inline-block and using box-sizing attribute. Each element has width of 50% so it will form 2 column and 3 rows for 6 div element:

In compact screen mode, the above CSS rule is filtered leaving only these attributes below:

This will cause the div element will show on one column only.

Next let’s examine another interesting display element that consists of 3 columns:

Design element as follows you can see it has 3 div elements inside parent div element called sparrow:

This time, the CSS rule is using flex, this is done by viewing the parent div element container which has class name called sparrow:

Of which child elements has attributes as follows:

I think that’s enough for now.

You can leave a response, or trackback from your own site.

Leave a Reply

Powered by WordPress and Bootstrap4