Knowing that, Sun Framework have a specific section just for customizing the layout in each mobile device screen.

This article will help you make the most of out it. Let’s start.

Customize layout for each mobile device

Note: This feature is only available in PRO templates powered by JSN Sun Framework

Although Sun Framework has an option for Responsive layout but being responsive is not the most optimized way to do. To achieve the best layout for each viewport, you have to customize for each one of those. Here is where you can configure it.

As Sun Framework utilizes Bootstrap 3, therefore the screen width for each viewport are:

• Smartphone < 768 px (Extra small device)
• Tablet >= 786 px (Small device)
• Laptop >= 992 px (Medium device)
• Desktop >= 1200 px (Large device)

Principle in mobile design

To help you avoid the crucial mistake when developing website mobile

1. Content first

Since mobile screen is limited. You can not display everything you want like in desktop version. A sacrifice is needed, and it will be for your content.

Determine what is the most important content at your side by how it is useful to the visitors.

For example, when comes to a travel tourist site, a section about the company or the online ticket booking system is more matter?. Answer this similar question for every element, you will know what should include in your mobile layout and what to leave out.

As a matter, Display In Layout feature is built exactly for this reason. You can turn off the display for every element, module, row, column with a simple action. All the items turn off will be grey out like the image below, and only on the selected device.

2. Visual hierarchy

Put your content in order of importance. Like we suggested above, content first. So build your layout accordingly. An eCommerce website may put new collections, discounts, CTA upfront but the case could be very different for other sites.

3. Make sure everything is easy to click.

Clickable is not enough since your visitor may struggle to put down their finger on important CTA like Buy now or Register. Therefore, we (and you should) make your button, search box or important tiny detail in the desktop version much bigger in a mobile device.

4. Cut any unnecessary effect

Forget hover, forget scroll effect or any sparkling animation, because it will look like a mess on a small device. Moreover, some effects like hover make the visitor unable to click anything on your site. Instead, use CTA or direct messages such as “tap to zoom” or “swipe for back view” can be much more useful and practical.

5. Avoid large files for better speed.

Mobile gets limited bandwidth, which makes it often load slower. Therefore, video or heavy media file is not a good idea to put on the mobile version. Try to optimize image size, make every image count or install an AMP extension for your site (work best with blog site).

Mobile configuration in Sun Framework

Besides the ability to customize layout for a mobile device, and Display in Layout feature that we mention above, there are other settings dedicated to helping you style better for these devices.

1. Select logo for Mobile

For Logo - a layout item, you have an option to choose a different image for your mobile version.

Usually, people will choose a smaller image size or leave it untouched, however, in some cases, a logo with no company name or slogan is selected to avoid chunk of text on mobile, save space for other sections.

2. Customize icon and background for mobile menu

You can select an icon and change the background for mobile menu after enabling Mobile Target in Menu item setting.