Fluid Grid
Fluid Grids provide a flexible structure to your website using relative units like percentages based dimensions rather than pixels. Websites have always been defined in terms of pixels as they were traditionally browsed only on desktops but now with the advent of smartphones and tablets, a website can be easily searched on them. A website appears in a large format on a desktop screen, whereas the size shrinks as we switch on to a smartphone. Due to this it is better to build responsive websites on the basis of the grid system.
The fluid grids flow naturally within the dimensions of the screen displaying the content without any adjustments for different screen sizes. Under this, the maximum size of the layout for the design is specified and then the grid is divided into columns. Then each element is allotted a proportional width and height on the basis of percentage rather than pixel based dimension. So, when the screen size changes, the elements adjust themselves to the screen size.
For example, if a desktop screen has 4 columns next to each other, it will be portrayed in a narrow display when presented on a smartphone screen. But with the help of fluid grid system they will be placed on top of each other forming a single column.
Fluid Images
Images should also be able to adjust themselves within the specifications of a fluid grid. This can be done by adding a single line of CSS code: {max-width: 100%}. This notifies the browser that each image can be as large as the specified value and can never be stretched. If the parent container in which the image is nested up is smaller than the pixel value, then the image should shrink itself accordingly.
Breakpoints
Breakpoints allow the layout of the content to change at predefined points. Generally, it is advisable to add a breakpoint at a stage where a sentence breaks. Major breakpoints should be chosen wisely when the layout changes significantly. For example, if a mobile layout occupies 100% of the browser width when stretched to a desktop size, then there would be left some unfertilized space. Hence, while switching to the desktop screen the content should be rearranged in a presentable manner. Here comes the use of breakpoints.
Mobile or Desktop First
This approach involves designing a website for a smartphone first and then taking it upwards to tablets and desktops. Mobile devices have more features and applications like GPS, touchscreen etc in contrast to desktops. Even the designing part has to be done with utmost vigilance as there are limitations on sidebars and other peripheral content as well.
Joshua Johnson has put it articulately, “With a mobile first view point we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly as needed depending on the platforms that can handle them well.”
So, when we first deliver to the lowest common denominator i.e. the mobile user and then expand our branches further, we are able to satiate the users in a better way.
Web Fonts v/s System Fonts
Although the Web Fonts look stunningly stylish yet each of them needs downloading and if a major chunk is employed, it will take a long time to load the page. On the other hand, system fonts are lightning fast and the hold-ups are not involved in their application.
Bitmaps v/s Vectors
Bitmaps are images constructed by the use of pixels. By zooming in a bitmap image, individual pixels are visible which build up an image. Bitmap graphics can easily be edited by changing the colors of individual pixels using programs like Adobe Photoshop.
On the other hand, vector images are not based on pixels patterns but are constructed by mathematical formula involving lines and curves that can be combined to create an image. These are edited by fabricating such lines and curves using Adobe Illustrator
Bitmaps vs Vectors
Now, the clash between the two can be solved by ascertaining certain factors like if your icon has got some fancy stuff and lot of details then it’s better to use bitmaps. For this use, a jpg, png or a gif as these are well supported on the web.
Vectors are tiny in size as they just store the mathematical formula that make up the image. For vectors, the best choice would be an SVG or an icon font. The drawback with vectors is that these are not well supported online and some old browsers don’t even support it. So, you must make your decision wisely.