We often come across the word “Responsive” when looking for a theme like Responsive WordPress theme. But have you ever wondered what exactly is Responsive Web Design?
Responsive web design is a technique for building websites that work on mobile devices, tablets, and desktop screens. Not long ago, websites were typically designed specifically for laptop and desktop screen resolutions. This worked fine until the advent of web capable smart phones and tablets.
Responsive web design involves designing websites that offer the best user experience across all screen sizes.It is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against.
Therefore, let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts.
1. Know the difference: Responsive Vs. Adaptive web design
Adaptive web design is different from responsive design in that there isn’t one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.
Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout.
Adaptive websites adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.
In another way the difference is, Responsive design is smooth because the layout fluidly adjusts regardless of what device it is viewed on. Adaptive design snaps into place because the page is serving something different because of the browser it is viewed on.
2. Content should go with the flow
As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.
The device can be a desktop, mobile or anything else. So we need units that are flexible and works everywhere because pixel density is also vary. At that time relative units like percentage come in handy. For e.g. making something 50% wide means it will always take place half of the screen / viewport.
4. Breakpoints ( media queries ) are so important!
Breakpoints are the point at which your sites content will respond to provide the user with the best possible layout to consume the information. When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone ( 320px and 480px ), the tablet ( 768px and 1024px ) and anything above 1024px.
Breakpoints allow the layout to change at predefined points. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint.
5. Nested Objects
Sometimes handling a lot of elements that depends upon each other would be difficult. Therefore we wrap elements in a container as this way is more understandable, clean and tidy. They are useful for content that you don’t want to scale, like logos and buttons. If our content is wrapped in one container, it becomes very easy to change it’s properties at particular breakpoint. The same thing becomes difficult for unwrapped elements.
6. The Minimum and Maximum game
Sometimes our content cover up the whole width of our screen specially on small devices. But the same content stretching to the whole width of large screen like desktop screen doesn’t make sense. That’s why minimum / maximum values given to the content. For e.g. width of 100% and max width of 1000px means that content will cover the screen but not goes on above 1000px.
7. System fonts Vs. Web fonts
System fonts are the one which are saved in system itself, and web fonts comes from CDN or from other source at runtime. Web fonts will look stunning, but remember that each font will be downloaded from CDN. The more fonts you will have, the more time it will take to load the page. On the other hand system fonts are lightning fast to load, except when the user doesn’t have it locally.
8. Vectors Vs. Raster ( bitmap ) images: Take your Pick!
Both have some benefits and some drawbacks. For bitmaps use a jpg, png or gif, for vectors use SVG or an icon font. Bitmap (or raster) images are stored as a series of tiny dots called pixels. Each pixel is actually a very small square that is assigned a color, and then arranged in a pattern to form the image. When you zoom in on a bitmap image you can see the individual pixels that make up that image. Unlike bitmaps, vector images are not based on pixel patterns, but instead use mathematical formulas to draw lines and curves that can be combined to create an image from geometric objects such as circles and polygons. Vector images tend to be smaller than bitmap images. Vector images are also more scalable than bitmap images. Also, vector images has lots of curves, it might be heavier than a bitmap, so choose wisely.
9. Desktop or Mobile First
Mobile first is the idea of designing the smartphone experience first and then working upwards to tablets, desktops, and possibly beyond. Designing a responsive site with a mobile first approach is a natural evolution of both ideas. In fact, creating a mobile experience first may benefit the desktop layouts as well, because the user experience will naturally be more focused. Technically there isn’t much difference between mobile first or desktop first. It adds extra limitations and helps you make decisions if you start with mobile first.
10. Responsive Front-End Frameworks
Front-end frameworks like Foundation and Bootstrap have been around for some time, but more recently they’ve become responsive frameworks. This is a huge step forward, because most of the time you don’t need to do any fluid grid calculations at all. The responsive grids in these frameworks are very robust and thoughtful, so there’s no need to “reinvent the wheel” and start over.
The main goal of responsive web design is to take your web content and present it in a way that makes the most effective use of the available context, or the available screen estate. Let your design be formless. As it is rightly said,
“Empty your mind, be formless, shapeless — like water. Now you put water in 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. Now water can flow or it can crash. Be water, my friend.”
– Bruce Lee