Responsive Web Design
What is responsive design? you may ask. The term is aimed to approach web design allowing all types of view, whether that’s a mobile view or a super large desktop, to adapt to a single website.
The content must be like water. It must adapt to every shape and size. The best website doesn’t use fixed media queries for their design, what they do instead is they adopt the design as soon as it breaks. This produces the best effects and least bugs on the website.
While using frameworks like Bootstrap is great, bootstrap, or any frameworks, in that case, is good for specific reasons, specific websites.
Content is like water.
“You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot. “ – Bruce Lee
Those good old comfy days! When you had a 15inch monitor, and you used to make the website specifically for the desktop view. When you had a fixed width and a position absolute everywhere, if it looked good, for sure it worked fantastically!
Responsive design isn’t actually that new.
When the responsive design was new, many web developers used to make one website for mobile, and the other website for the desktop. It was creating designs for of the same website, in different formats. When you were to load the website, you could click a button and choose the device you were. If you were on mobile, you click mobile and there you had some styles specifically written for mobile view. This had effects on the developers, as it required more time, and it still wasn’t perfect(or at least decent as in this days). When you were on mobile view, you had to zoom a lot, then you had to scroll a lot to navigate the whole website. It just wasn’t the nicest experience for the user, and it was a pain for them. It’s still a pain to visit those sites in the modern days!
Responsive design gives us this benefit that you don’t need to do any of that in the modern day, it might not be perfect, but it’s a lot better than it was.
The smartphones. The old mobile phones could only do basic things such as calling, texting and maybe taking some blurred pictures. The time has evolved, the economy changes, the technology has evolved, and we are introduced to smartphones! While smartphones were introduced in 1999year by a Japanese firm, they weren’t widely spread until the late 2000s. In fact, When the iPhone came out, in 2008, and all the other popular mobile phones that we use today, maybe some less popular like BlackBerry, the evolution really began. More and more people have purchased the smartphones, and it has become widely spread over time.
An exciting moment has to happen not so long time ago. In November 2016 mobile phones for the first time in the history, have exceeded the desktop usage browsing the wide world web. We can say with confidence that about 50% of users are from mobile, and the other from the desktop or perhaps a tablet or a TV, maybe a car or a game console.
Mobile first approach is what we, developers do first. Well, technically you would need to know the audience first before you decide how you are going to develop your site, however, most people use their mobiles to browse the internet these days.
Many frameworks such as bootstrap or foundation, are focused on mobile first approach. Meaning that you develop for the mobile screen size first, and progressively enhance the website to a larger screen.
Google is boosting traffic to a website that is mobile responsive too! You will also appear higher in the ranking if you do have a mobile responsive site, compared to someone that doesn’t have one.
Mobile first or Desktop First
There is a reason for what you should do. If the site is for an audience that is probably or most likely using it from a desktop point of view, it’s best to focus all of your energy and budget to make the site best on the desktop. There is a lot to think when creating websites, such as UI(User Interface) and the UX(User Experience). They do play a big part, and they do change the screen size change.
Ideally, most websites should be developers mobile first these days, but you might need to make a surely or have some analytics to see what your users will be using, or perhaps you might know the audience already and adapt to that.
Computers are head to head, or maybe mobile phones are overtaking them, in terms of visiting the web, and they are falling on the second place when it comes to developing websites.
In the old days, you used to develop websites on computers, scaling it down to mobile first. While that approach is a good approach for some specific project, I found out that a computer usually contains more content.
You see, a mobile view is very small, and hence you need to show only the most important data there. So you will remove the second or third data that it’s a bonus for your site, such as a sidebar, and only show the most important content.
When you develop on the desktop, you usually have more CSS styles, and more HTML to be displayed. What happens when you want to develop it from desktop to mobile, is that you will need to override a lot of styles or even change the styles and all the complexity involved in it. When developing on mobile first, you tend to add and increment the styles you need, using the previous styles that are appropriate for the design at first.
Graphics and Images
Responsive design isn’t just on the website looking pretty and functioning well on all screen sizes, but also have the right resolution on the images, as well as the size. There are plenty of screen sizes as we know, and there is a band witch which might be limited to some users, or even it might load a long time. When making images, the best way to make then is in vector graphics. The vector graphic is basically mathematically counted lines with dots to form an image. You can take a 16x16picture, and stretch it on a 100stroe building, and it will still look crispy clear. While if you had a 16×16 pictured made in pixels, if you were to stretch it on a tablet, it would look super blurry. How vector and pixel graphics works is another story.
This is one of many things you can do. Each file has its own size, and this can be very problematic for different devices. We even have a retina display.
More screens, bigger complexity, new technology, new CSS, media, px/em rem and so on.
Mobile design involves a lot more than what you just did just a few years ago. The industry has progressed over time and came up with new practical solutions that the developers are applying to their websites overtime. If you’re reading blog posts and keeping up to date with the latest news, you will know what the developers are working on and what new features will come.
If you have thoughts, comment below!