Responsive Web Design(RWD) and it’s Accessibility-Part2

This blog is continuation of Responsive Web Design(RWD) and it’s Accessibility-Part1

and let us understand how do we get those default accessibility benefits when RWD is done properly.

 

Key components of RWD:

There are 4 key components of RWD and they are

1. View port
2. Flexible layout
3. Resizable images
4. Media queries

 

View port

view port is nothing but it obtains your screen resolution and stores it. It is html 5 tag and it needs to be declared in the header of html. The syntax is as follows:

<meta name=view port>

We need to define few attributes here and they are:

• width=devicewidth: This attribute helps to obtain the screen resolution
• min value=1: This attribute helps web content to spread 100% within the container
• max value=2: This attribute enables the zooming feature. user can zoom the content up to 200%
• User zoom: if user zoom is set to no then user cannot zoom the content and therefore, always set user zoom to yes to enable the zoom feature

Accessibility implication

The accessibility implication is that user can zoom the web content in the small resolution as well

 

Flexible layout

Before we get into the flexible layout, let us understand the fixed layouts.

 

Don’t use fixed, inflexible layout

In the olden days, we used to have fixed layout websites because users to use to access the sites only in the desktops. Let us understand this with the simple hypothesis example.

There is a container with 500px. Out of this 500px, 150px in the left column is occupied with the 2 list items and 350px in the right column is occupied with the paragraph. This is fixed layout. When it is viewed in the desktop then it looks very beautiful. However, if this is viewed in the mobile device then it looks odd and the complete site is going to be broken with some horizontal scrolling and all. We can overcome this problem by using flexible layouts.

Do use flexible layout or flexible unit

Flexible layout is nothing but fixed layout becomes percentage layout and the content reflows as per the screen size and the site looks good. Let us take same hypothesis example.

Let us consider 500px container is 100%. The left column becomes 30% and the right column becomes 70%. How do we obtain this percentages. We have formula here. The formula is element unit/parent unit=relative unit. Here, for left column, 150/500=0.3*100=30%

When we see this site in the mobile then it looks beautiful with the content reflow vertically as per your screen size.

Accessibility implication

The accessibility implication is that the content will be reflowed vertically as per your screen size when user tries to zoom the web content

media queries.

Before we understand what is media queries, let us understand why we should not use breakpoints and why we should use media queries instead

Don’t use break points

We should not use breakpoints for each screen resolution. For example, we have got new devices in the market that has the 1024px and 1280px screen size. Do you think we need to have breakpoints for those 2 screen resolutions? Answer is that we should not instead we should use media queries with ranges

 

Do use media queries

Media queries are nothing but it will change your website layout as per the screen size when appropriate styles are defined. . Let us look into the different examples now.

mega menu in the desktop will get converted into hamburger menu in the mobile(which means you are changing the layout of your mobile web as per the screen size). the same mega menu will be spanned over into 2 different lines in the tablet view and it might be different in the portrait and landscape views. how does this is possible?

It is possible by using only media queries. We can define the media queries for particular resolution ranges. We should define the media queries for 3 ranges(small, medium, and large) along with custom styling and design.

• Small-up to 500px with custom styles and design(phones)
• Medium-from 500px to 1000px with custom styles and design(tablets)
• Large-more than 1000px with custom styles and design(desktops)

If user’s device size match with any one of the above query criteria then the layout of the website is going to be changed accordingly.

Let us take the same 500px container as an example and define the styles in the media query that 2 column layout should convert into one single column layout one below other if it is viewed in the mobile site. When it is viewed in the mobile device that has screen size 400px then it will convert 2 single column layout into one single column layout. What does it do in the behind?

• Check the users device size
• Check device size 400px is matching to which query criteria

Here it matches to the 500px query criteria(in the small screen)

and apply those corresponding custom styles and design to web site. it would display 2 column layout  to one column layout. the content is not clutter and clear and hence, cognitive disability users would not get confused.

Accessibility implication

Accessibility implication is that cognitive disabilities would not get confused as The content is not cluttered and the content is clear

Resizable or flexible images

 

Do not use fixed images

Let us imagine we have 600px fixed image and we need to insert this 600px image in to the same above container 500px. When we inserted the big image into the small container then image is going to be broken and it is not viewable anymore. To avoid this problem one needs to use flexible or resizable images

Do use  flexible images

It is simple to use flexible images. We just need to avoid using the fixed height and width and start using the maxwidth=100%. When we use maxwidth=100% then 600px image will shrink or resize into the 500px container and looks beautiful. Similarly, when we are trying to insert small image into big container then our image is going to expand or resize as per the screen size and looks beautiful.

 

Accessibility implication

The accessibility implication is that image is viewable clearly without any loss even it is zoomed