A Guide To Effective Responsive Planning – Business Website Development

Every service website needs a business website design.

So here, we have a perfect guide for the things you no need to make business websites very responsive.

Users already expect a website to look good and easy to manage over the phone. If not, the site will receive “lame, outdated, crap” markings from the target audience.

Many websites nowadays are said to be responsive or “mobile-friendly,” simply because a hamburger menu comes up on mobile or minimal customization occurs. However, a good mobile view is not all that much.

Here are some crucial points to keep in mind when designing responsively.

What is responsive design?

In fact, it is a design technique that aims to provide a well-used and optimal visual experience for any website on any platform.

90% of average users are convinced that “mobile view” is a “different website”.

Responsive Webdesign is based on rearrangement and resizing, even though each element is not physically duplicated. In other words, we see the same website everywhere in content, but in a redesigned look.

Bonus: Check out the Best Web Design guide!

Start with the content

Seriously. “Lorem Ipsum” cannot be responsively designed. It will cause endless torment if you do not foresee how much content to work with. You don’t know how many columns to use, how wide the page is, how to break it, and what to set the breakpoints.

Mobile-first

Everyone has heard of it, but quite a few misunderstand it. The focus is not to look good on a mobile site because many people are mobile, but to have conversions on mobile. It is not because Google ranks low when it is not, but because it is easy for people to buy on mobile.

Quite a few complain that, despite having over 40% mobile traffic, customers only buy from laptops. If you are set up to “look like they don’t shop here anyway” you will lose almost half of your customers.

The mobile-first expect much more than that, it does not stand out anywhere on the button mobile display.

Flexible grid system

Responsiveness is based on flexible grids,  where instead of traditional pixel-based scaling, content units are scaled in percentages. These relative dimensions are adjusted by the browser. However, with laptops or wider monitors, we do not want the content to be stretched to full width, so we limit the width of our content container. (Fixed pixel size or even percentage).

Choosing the right ones also depends on the content and the style of the website (it is not a rule of thumb that every webpage is 1170px wide). For less content, 960px is enough, for any content, or for larger portals, it may take up to 1200px. It is best to divide the width completely by 12 so that our columns are accurate as well.

Breakpoint

We can create breakpoints with media queries that allow us to change the look and / or layout of content units along the breakpoints. This will optimize the appearance of the page on the screen.

It can be different on every page, depending on its theme, style, and content.
For example, if you have enough menu items that the 837px doesn’t fit well anymore, you should put a breakpoint there, regardless of the  “iPad portrait view only starts at 768.”
Because of the wide variety of devices, all device types.

Some popular devices have browser resolutions:

• 320px  – iPhone 4 portrait, iPhone 5 portrait
• 360px  – Nexus 5 portrait, BlackBerry portrait, HTC One portrait
• 375px   – iPhone 6 portrait
• 480px   – iPhone 3 Landscape, Lumia Landscape
• 600px  – Nexus 7 portrait
• 640px  – iPad portrait, Galaxy S3 portrait
• 768px  – iPad portrait
• 800px  – Nexus 10 portrait
• 1024px   – iPad landscape and smaller laptops
• 1920px   – iMac 21.5 ″

Layout, Flow

Phones are mostly used in portrait mode (set), which means the screen is taller than wide. That is, our content will “squeeze”, it will take up more vertical space and the content units will be placed below each other at breakpoints.

Therefore, the flow of content must be such that it remains meaningful in its context. Content elements that belong together should also be mobile, so it should be visually clear to which paragraph, for example, the image belongs.

Responsive frameworks eg Bootstrap

In common language, responsive design is identified as one-on-one with Bootstrap, but this is really an approach, not a framework. Bootstrap = responsive, but not all responsive = bootstrap.

Outside of Bootstrap, there are some pre-written systems eg. Foundation, Skeleton, etc., which can (in principle) make responsive pages very quickly. It is also tested and saves time.

BUT! Without proper setup, there is a lot of unnecessary lines of code and a lot of unnecessary JavaScript files, which slows down the loading speed drastically.
In addition, the lazy ones do not touch the basic theme, so there are a lot of pages that look very similar or almost the same.

In addition, we need to adapt to the system’s pre-written solutions. Our room for maneuver is quite small, as these systems are not designed for individual needs. It’s like buying a jacket with a few numbers. It is true that you do not have a cold, but here and there it is very cold and not aesthetically pleasing.

Navigation

Navigation is not the same as the main menu, all the more so because on mobile, the main menu is usually behind a hamburger. So just relying on this is a great luxury. It is possible to get to different subpages without using the main menu. Examples include the Bumblebee menu, related links, and Call to Actions, all of which assist in-page navigation.

Relatively few 6-8 menu items are worth using. The drop-down menus are starting to crack, and instead, they try to structure the page so that they can easily navigate to sub-pages from the category pages.

It doesn’t matter if you use a simple hamburger menu, a slider panel menu, or a completely unique solution. The point is always easy to use.

Typography

The essence of typography is to make content easy to digest, well-read, and instantly accessible, no matter how wide the display.

A maximum of 60-70 characters per line is recommended. That is, the font size should be set so that it is no more than 70 characters per line relative to the current width. On smaller displays, this is not a problem as the number of characters per line decreases at lower resolutions. On larger displays, however, you may want to make the letters larger or limit the maximum width.

In many places, I see 1170px wide pages written in 12px, with up to 150 characters per line. (By the way, this is the best way to see that the page has never seen a web designer)

At table width, you must write at least 16 to 20 points. And headlines are even bigger, and can be 30-40 points. In almost all cases, headlines have to be reduced to mobile widths, since no one wants 5-8 lines or single word lines. The size of the reduction also depends on the length of the text.

Optimal click areas

The times when we simply put a text “more” link at the end of the line are gone. It is very difficult to click on mobile. It is important that the click areas are not too small or too close together. There should be a minimum of 40×40 click area.

Structured Content Units

By wrapping content on mobile, we’re taking up more space down the line. Therefore, you may want to use solutions to share your content.
Examples include accordions, tabs, sliders, pagers, tables that break down our content, saving us endless scrolls.

Hide And Seek

The general approach is to display all content on a mobile device that we see in desktop view. But no matter how. There are times when the content on mobile is redundant or it is best to replace it with simpler content.

Typically, these are the huge slideshows, which are very spectacular on a laptop but take up space on a mobile, take a lot of resources to download images and have very little text on them. In such cases, simply hide the unwanted content and switch to another or a simpler one.