Categories
blog

Rem font sizes instead of pixels or ems.

Rem font sizes are the best way to do font sizing for responsive web design.Rem stands for “root em”

There are many units that can be used for font sizing: pixels(which is the traditional and most popular way of doing things), ems and rems. Both ems and rem have come to the forefront as they are great for responsive web design, where as pixels are not. Rem, however differs from em as it is based on the root element. what this means is that the it is relative to the root em of the entire website. Unlike em, which is relative to the parent element.

First we will set our base font size for rem font sizes to 62.5%. This will make 1rem = 10px, allowing for easier calculations. Using a base size of 100% would make 1rem = 16px. Feel free to adjust it whichever way makes more sense to you.

Add this code to your stylesheet.

html { font-size: 62.5%; }

Now, if we want our body font-size to be equal to 24px, we set it to 2.4rem.
To make our h1 equal to 30px, we set it to 3rem.
You can set the font-size of any element the same way.

Add the following code to your css, after you have added the first bit of code.

body { font-size: 2.4rem; }
h1 { font-size: 3rem; }

One of the main advantages of using rem lies in the fact that you only need to change the font-size under the html element in your respective media queries to change all the font-sizes. This allows your font-sizes to scale in different resolutions. You do not need to change the font-size in every single element.

The following code increases all the rem font sizes for resolutions above 600 pixels by a single line of code.

@media (min-width: 60rem){
html{
font-size:0.5rem;
}
}

Categories
blog

Responsive Web Design: Breakpoints.

  1. Mobile, tablet and desktop are the three popular breakpoints.
    Ususally they are at 480,  768,  and 992 px.
  2. Breakpoints should not be fixed but should be custom depending on the type of site.
    For example, whether your site has a 3 column design or a 1 column design.
  3. More breakpoints means a more fluid  and smoother experience.
    But too many may make your site slower.
  4. Experiment and see what works best for you site.
    Try it across different browsers, devices and resolutions.
  5. Do not target specific devices with your breakpoints as this is always changing.
    Rather target what you feel will give the user the best experience.
Categories
blog

Responsive Web Design: Testing.

    1. User testing.
      This will be carried out to find out how the website is used.
      Give the users certain tasks like adding a product to their cart, checking out, navigating and searching the site, etc.
      Try and observe them in their natural environments. This is especially important for responsive web design as people use  tablets and cell phones in a variety of locations and situations. Try out various age groups depending on the type of your website and it’s target demographics.
      Do user testing often and do it through out the entire process of building and deploying the site.
      Ask them for comments on what they like and don’t like.
      Ask them about their views and opinions on the site and how it looks on mobile, tablet and desktop devices.
      Throughout the entire process, let the users be as natural as possible.
      Do not pressure them and let them take direction of how to use the site.

 

  1. Technical testing.
    This will be done to see how the website performs or various resolutions, browsers, devices and bandwidths.
    Try and test out as many different devices, resolutions and browsers as you can.
    Definitely test it out on the major devices.
    Give your users as many devices as you can to test the site.
    Mostly, let people test on their own devices.

Remember that the way we design and use the site may not be how most of the users interact with it.
The only way to see how the site is used is by testing often and testing with various people and devices.

Categories
blog

2013: The year of Responsive Web Design

The mobile device era is at full speed.
The sales of PCs continue to decline while Tablet and Cell phone sales continue to increase.
The mobile web is solely becoming the main web.
You cannot afford to make the mistake of making websites that are not optimized for multiple resolutions.
Neither do you have the resources to waste on mobile versions of your site or native app versions of your website.
Given the amount of devices coming out, how many apps are you gonna build?

Simply put, there is only one way to go.
And that is with Responsive Web Design.
Every major website is starting to embrace Responsive Web Design.
Responsive Web Design is no longer a luxury.
It’s a necessity.

Categories
blog

Advantages and Benefits of Responsive Web Design.

1)  Used and recommended by Google.

A seen on varies blog posts on Google’s official Webmaster Central Blog, Google uses and also recommends using responsive web design. If Google uses and recommends  it, are any further reasons required?

2)  Saves development and maintenance time

Responsive websites adjust to any screen size and resolution. This saves time in the long runs as device specific versions are not required. Very little maintenance is involved, where as having a mobile specific site would require both versions be updated.

3)      Easier Sharing and linking

Having only one url for a page makes it easier to share and link. You are not forced to see a version that is made for mobile on your desktop and vice versa.

4)      Better SEO and Analytics

Only one view for the seo and analytics data. One link per post means spending less time shaping and tracking traffic.  Add that with Google Analytics and you know exactly what devices your readers are using.

Categories
blog

Ethan Marcotte – Responsive Web Design book review.

Ethan Marcotte has been hailed as the pioneer of the responsive web design. He did after all coin the term, so who better than him to teach it? Making extensive use of CSS3, Ethan shows how to use semantic code, screen types, and queries to overwrite rules based on screen size.

Mobile web has more users than ever before and now for the first time ever out numbers non mobile devices. Hence having mobile sites is important without a doubt. However, it is not feasible to make websites for each and every type of mobile device and their resolutions. Responsive Web Design aims to solve that problem.

The main concept of the book is in making flexible template based on percentages and ems, instead of fixed pixels and width tags. Responsive Web Design is not a codebook and is a case study based book.

Responsive Web Design is released by A Book Apart, and just like all their titles is very brief and too the point.

Categories
blog

Disadvantages of Responsive Web Design: Problems & Solutions.

1. Limitations of CSS media queries.

Responsive web design relies heavily on CSS media queries to be compatible on a wide range of devices. However, most mobile devices are not compatible with CSS media queries.

2. Image Resizing.

Responsive web design resizes images to the mobile device’s screen. The full image is downloaded on a mobile device and resized to fit the screen. This consumes unnecessary CPU and RAM.

3. Speed.

Mobile users usually have less speed compared to desktop users. Responsive design does not remove any code that may not be used. The unnecessary JavaScript or HTML code is not removed and is still downloaded. This makes the site slower.

4. Mobile needs and desktop needs may be different.

Responsive Web Design resizes the website to fit the device and does not use key mobile features like the geolocation, gestures, hardware limitations, etc. as those features are not available on desktop devices.

5. Mobile versions are always more optimized.

Mobile versions of a website include smaller images, less HTML, less JavaScript and less CSS. They are made with the full requirements, resolutions and speed of the specific device in mind.