What is Responsive Web Design?
When we talk about Responsive web design we speak about set of programming tools and techniques to make our website adapt to any screen device we are using: computer, tablet or smartphone.
A horizontal navigation on desktop PC would occupy too much space on a mobile device screen, so a responsive website will probably have a menu button that, when clicked, displays the different navigation options, maintaining a good user experience and saving space in our small screen.
Serving large images to desktop computers and small images for small screens. Images are one of the elements that can slow a website when loading. Loading a large image in a desktop computer is good practice, but it's probably too much for a small screen picture and slows down the page load. Serving small images to the mobile version of our website, maintaining quality, but makes navigation quick and satisfying.
3. Lazy Loading
With this programming technique we can limit the code weight during page load, until it isrequired by the user. For example: A form which is not loaded until the user begins to fill in the fields, or a carousel of images that do not start loading until the user begins to view them. This reduces the initial load of the page and increases load speed.
4. Responsive Layout
On desktop computers, we have plenty of space on the screen to provide information. In Mobile, the structure of a responsive website is rearranged to fill the vertical space, adjusting to the size of the screen making readability and navigation easier.
5. Users objective
The goal of a visitor may be different when visiting our website form a computer or from a mobile device. A visitor may be interested in knowing the philosophy of a company when navigating from home, but when in the street many times they are looking for more specific information, such as a phone number or an address.
This scenario has to be planned, so some info can be summarized or hidden in the mobile version, and other information must be more accessible.
The duration of the visit is usually smaller when on mobile and that is something that should be taken into account when structuring the information in a web page.
Texts must have enough color contrast, because sometimes we try to see a website being on the street in broad daylight so we recommend a higher contrast and font sizes balanced, for easier readabability, but not too big to get outside of the screen limits.
7. Load speed
ADSL connections are usually fast enough to quickly load a website with lots of great pics, but mobile connections as 3G networks are generally quite slow, so it is advisable to optimize the loading speed in the mobile version of our website for a more satisfying browsing experience. A too long wait will likely cause the visitor to shut the website and go find another one, hence we lose a potential customer.
In general, you should disable or make subtle animations in the "mobile" version of your website, for 3 reasons:
- Saving battery.
- Medium or low-end processor capacity , which leads to chunkier animations.
- Viewing too many animations on a mobile device may hinder or obstruct the reading.
Example: A button. In desktop: hover over the button and you see a nice animation that makes no sense on a mobile phone, as there is no mouse, and we would normally press that button without expecting any animation to trigger, so disabling the animation is recommended.
9. Touch support
Taking advantage of touch screens such as those of tablets or smartphones. You can program a website to recognize a certain gesture you make with your fingers on the screen, which adds interactivity in the mobile version of your website, like dragging acarousel images with our fingers, or opening a certain menu with swipe.