Site Design Analysis #02

This time I will perform observation and analysis of the site from bbc with the link http://www.bbc.com/indonesia

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.

Site Design Analysis #01

Here I will discuss the feature of this sample site called divi theme for wordpress. Let’s focus on header appearance. At first condition, the header will show as follows:

And the menu content as follows:

When user try to scroll down at certain amount of pixels, the header will automatically resizes with some animation effect to:

And the menu also perform resize to:

For the purpose of this analysis, the page is saved to D:\sites\02 folder.

When viewed in the local folder, I notice that the search icon is not properly shown:

Using the inspector, the search icon is governed by:

With the CSS rule as folows:

Finding the origin of ETModules font in CSS, I have:

Let’s create the above required folder and copied the files to d:\sites\02 folder structure, and now I have:

Next, I try to scroll down to see whether it has the same effect from the original page from the website, but turns out it is not working. The header do not resize itself.

Checking to Firefox’s console, I have:

After performing some necessary fixes of malformed string constant, now the header resize effect is active. But now the javascript is in minified mode so the process of reconstructing javascript to its original source is required.

But which javascript source that is related to this animation effect ?

Using the Firefox’s inspector when I try to scroll down the page, there are some changes in the element class at et-animated-content as follows:

And by clicking on the event icon, I have:

The custom.js is in minified form, but when I try to check at line 111 as describe above, I have:

At line 110 there’s information of where’s the javascript code is come from. So, this block is removed and replace with original source from custom.js and leaving all other minified parts intact.

After this process is done, now I have the working development mode of javascript that is not minified and responsible for the above animation effect. But how is the mechanism works ?

Again, using the Firefox inspector, what I found is at the start, the margin top is -1px and class is blank as follows:

When I scroll down, it changes to:

The et-fixed-header class attribute is responsible to change the height to a more compact form and the -27px margin changes is required so that when the height shortens, the page content should be moved up, otherwise it will be like this:

Try to find possible class modification for addition of et-fixed-header in the sources, I have:

With callstack as follows:

You can see that the callstack to the addClass jQuery method is called from a minified source at line 91 which is:

Download the appropriate Waypoints version 4.0.0 and expand the custom.js source with download jquery.waypoints.js file, and now the callstack become:

This javascript module is required to create trigger when the selected object hit the top of view port.

Now let’s explore the menu option when viewed with desktop screen:

When the screen size is narrowed down until certain limit, the above menu become:

And the three-striped button above will contain the menu when clicked:

Let’s see how this is accomplished. Using Firefox’s inspector, when the navigation menu is in expanded state (i.e. in desktop view port) the element below is active:

And the element below is greyed out:

But when it reaches certain minimum width, the navigation element with id top-menu-nav below is greyed out:

Where the et_mobile_nav_menu is active:

By viewing the css rule, the top-menu handling as follows:

Where the et_mobile_nav_menu css rules as follows:

So this is controlled via @media css directive.

Now, let’s find the mechanism of menu in narrowed width, when clicked it will show the menu. The first step is try to identify the javascript event by clicking on “ev” icon in the inspector:

The script is in minified state and originated from frontend-builder-global-functions.js. Let’s copy the development javascript to this file, and again view it using inspector:

Let’s try to perform breakpoint at the above location, to see whether it has some relation with the shown menu:

And indeed it is related with the callstack as follows:

For more detailed analysis starting from the above step, I will leave it to the reader.

Now, let’s explore the Divi approach on search mechanism. The search UI begins by clicking on the search icon:

Then the navigation menus will slowly fading out and the search input will slide down to become:

Again by examining using inspector, I have:

And source code location as follows:

Let’s explore the content below the header. When viewed on desktop view port, it comprises of two columns:

But when the view port is narrowed down it will automatically reduces to one column:

Let’s see how this mechanism works. The right pane is defined using div element with sidebar id and left pane is left-area as the id. The div element with sidebar id is defined with @media css directive as follows:

When it is below 981px, the above rule with float and width is not applied.

In the end, this article provides a preliminary steps to reveals some features and functionality of the sample site. Actually more steps should be completed if someone wants to apply the features specific to this site into their website. In this case, I will leave it to the reader.

Powered by WordPress and Bootstrap4