Features and Benefits of Median UI

Pada September 30, 2020 September 30, 2020

In this template we experimented with applying dashboard elements to blogs which eventually gave birth to Median UI, this template is recommended for blogs with news themes or mixed themes but that doesn't mean it doesn't fit into other niches.

We got this inspiration from the appearance of several well-known websites such as Google Adsense and GDrive as well as from some UI elements that we found on Dribbble. Supported by simpler and more customizable icons, making this template feel like the interface of an app provides a more comfortable and less boring article reading experience.

The advantages of Median UI

We applied some of the advantages of the Fletro template to this theme, the difference is that we overhauled the theme so that it produced something new

100% SEO Friendly

This template has passed the SEO audit with satisfactory results as in the screenshot below:

The meta tags in the template are neatly arranged so that they are easy to edit, the addition of several schemas such as Breadcrumbs, Comments and others makes it easier for search engine robots to identify the structure of the content on the blog, this is very good, especially it can make blog content appear faster in search results.

Note:

Most templates only optimize Onpage SEO and all things that can be optimized on blogs such as speeding up blog loading, adding meta tags, adding Breadcrumbs schema and so on. Offpage SEO is outside the template and beyond the control of the template creator, its scope such as robot.txt, search console, backlinks or small things such as adding src = '' to the image in the post, all of which are beyond the responsibility of the template maker.

All template creators never guarantee that your blog will immediately be on the first page of search results after using their template, problems that appear on the search console such as being indexed even though blocked by robot.txt or so are beyond the control of template makers even well-known blog templates also experience this. the same one.

Prioritizing content

The template framework structure is structured by prioritizing content or articles over other parts of the template. How do we do that? The way search engines work when indexing content on a blog is to render it from top to bottom in the HTML template structure, what we do is adjust the order of the elements in the template by moving the content section at the top of the template and moving other elements such as the sidebar and navigation to the bottom so that the section The first thing that is rendered by search engines is blog content.

To prove it, try reloading this page and pay attention in detail, you will find the first part that appears from this page is the main article followed by the sidebar and navigation menu that was loaded last after the content section is complete.

Easier to customize

Designed to make it easier to customize via the Blogger Theme Designer, you can freely change the colors, widths and fonts of this template. You can even change the color of Dark mode / Night mode on this template at any time without having to bother editing the HTML template

Lack of Median UI

There is only one drawback of most responsive or dynamic templates, namely you cannot edit the navigation menu on the Blogger Layout, you have to edit the navigation menu on the Edit HTML template.

Adding or changing the link will be more difficult for those of you who don't understand HTML, this is because the writing of the SVG icon code is mostly longer so it is a little confusing for the HTML layman

But we will provide the easiest possible directions for you to make it easier to edit the navigation menu on this template.

Main feature

Dark mode / Night mode

One of the hallmarks of our template is the night mode feature, which we will continue to stick to in other templates. The main function of this feature is to change the appearance of the background color on the template to be darker so that the content is easier to read by the user at night.

Adaptive template

Instead of making responsive template elements, we prefer to create elements that can adapt to the screen width when the blog is opened. This template will automatically adjust its appearance when the screen size is reduced.

The difference with responsive is that sometimes the layout of the elements in the responsive template looks forced when appearing on mobile, in this template the layout will automatically change on the mobile view such as the navigation menu that moves downwards and other elements that change automatically.

Adjustable thumbnail width

Different from Fletro, the thumbnail images in this template can adjust to the screen size without changing the image size or making the image disproportionate.

We tried experimenting and managed to find a way to make images fit automatically without changing the height or width in the CSS. We use an aspect ratio on the image so that the size will not change when the screen is scaled down, another advantage of this feature is that you don't have to worry about the standard size of the image on the template, regardless of the width and height of your image, it will automatically match the thumbnail image size, especially on the homepage.

SVG Icon

The lightest and most stable icon among other icon types, and it's easier to change colors than third-party icon providers such as awesome fonts and so on.

Although using it is a little more difficult than the party icon when it is. But in terms of blog loading, SVG is much better than awesome fonts. One of the advantages is that the icon style is not monotonous, you can use one icon from an icon pack and then take another icon from another source, especially now that there are lots of SVG icons that are distributed for free.

Modify the default Blogger comments

We modified the default blogger comments by adding a Comment schema, as well as adding a lazy effect to the image. Previously, if you tested the content pagespeed with a lot of comments, you would find that the images in the comments will also be indexed and slow down the loading of the blog.

Because of that, we added a lazy effect so that the comment image is not indexed, not only that the size of the image in the comment has also been changed to be bigger so that it can match the comment style of this template. Now users will not be able to add active links to comments, all external links in comments including blogger profile links will be deleted automatically

To see other features and advantages, you can immediately see it on the demo blog, give input regarding the features of this template or suggest additional features that you want to add to this template via the comments column below.

Median UI