Almost everyone these days wants a mobile version of their website. If we think of a website we don’t have to explicitly say a “responsive website“. It is expected from the developer to make a website responsive.
Today with mobile phones, tablets, and Televisions, the standard can span from 320 pixels width up to around the 2000 pixels mark. Sometimes the height of a screen can be more than the width, depending on how a device is being held.
Try designing at least 3 layouts
A responsive website design should have at least 3 layouts for different browser widths. The specific numbers we cite are what we currently use at 99designs but are not hard-and-fast rules.
Small: under 600px. This is how content will look on most phones.
Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small netbook-type computers.
Large: over 900px. This is how content will look on most personal computers.
Each of these layouts should include the same text and graphical elements, but each should be designed to best display that content based on the user’s device.
How to think while making a website responsive
While making a responsive website development we need to keep below points in mind:-
1)Use Relative Units
While making a website in most cases we need to use Relative units. for font size, we need to use rem and for width, margin, padding use percentage for most of the cases. If we use a percentage in element, it’s property length will vary according to the screen.
2)Mobile-first
A misguided assumption for responsive design is to think of it as a technical add-on to an existing desktop site. That is a big contributor as to why responsive sites become “headache”.
The best way to make a site responsive is to design for mobile-first.
It’s not hard to make a mobile responsive website because mobile layouts tend to be much simpler, so by starting mobile-first, we can create our layouts without too much work.
Think of a responsive layout as:
A UI that is near impossible to break.
How the navigation bar will look.
It can take any amount of content and characters.
And it will work at any browser width or height.
Modules rather than columns
Before writing CSS, categories content as a separate module not as a long vertical column
for example
This is a prototype of how our page will look like on big screen
This is a prototype of mobile design of a page
When we start making the page responsive we break different sections in the module according to design. A colored section is a whole module that we create. We make item1.item2.item3(pink section) as a module because in every design they are together and only there location is changing on different design so we group them together.Same for the yellow section we grouped all in one module due to the same above reason.
You can see a difference in design on a navigator bar in both designs.
On the big screen, the Navigation bar is Horizontally and each menu item is visible. If we try to make the same design on a small screen(for a mobile screen), it will not fit on a small screen, so instead of the Navigation bar, we show a hamburger icon. When we click on the hamburger icon our Navigation bar will show but this time its UI will be different. Below is the design of how our Navigator bar will look like when we click outside of navigation bar it will hide and hamburger will show.
When making a website responsive always remember “Design for all scenarios, not just the best-case scenario“
Tools for testing Website Responsiveness
1)GOOGLE DEV TOOLS
Google dev Tool is the most famous tool for checking the website responsiveness. Right-click on a website in which you want to check responsiveness and select inspect. In the google dev tool, you can check how your website looks on different devices.
2)Google Resizer
Google is now offering Material Design guidance around breakpoints, responsive grids, surface behaviors, and user interface patterns. Google Resizer is super clean and super easy to use. The screens in the responsive multi-device view are interactive, and if you engage in the desktop or mobile view you can quickly and easily adjust the dimensions with a simple click.
responsinator
The beauty of Responsinator lies in its simplicity. Just type in your web page’s URL and this free, browser-based tool shows you how your web page renders in the most popular screen shapes and sizes.
Brilliantly, you can then interact with your page, clicking on links, typing into search fields and so on. Note that these are generic devices, though, not specific ones.
