Let's take an example site like udacity.com and
imagine that I am a user who has difficulty reading small print.
Now naturally, one thing I may do to help with this is to zoom the page.
So let's go ahead and we'll just zoom this page up to about 400%.
Now an interesting thing is going to happen,
we're now viewing the mobile version of the site on our desktop.
Because the page was designed responsively,
the UI has rearranged itself for the smaller viewport.
Which is great for desktop users who require screen magnification,
and it's great for
mobile screen reader users since there are fewer elements to touch and explore.
This is just a total win, in fact, just by designing responsively we're meeting
rule 1.4.4 of the WebAIM checklist.
Which states that a page should be readable and
functional when the text size is doubled.
Now going over all of responsive design is way outside the scope of this course.
Fortunately, there is a separate Udacity course just on this
topic which you should totally check out if you get a chance.
I'll leave a link to this down in the instructor notes.
But there are a few important points which I did want to cover
which will be both important to improve your responsive experience but
also to give your users better access to your content.
The first of those is to make sure that you're always using a meta viewport tag,
and that you're setting its width equal to device width and
its initial scale to 1.
The meta viewport tag gives the browser instructions on how
to control the page's dimensions and its scaling.
By setting width equal to device-width we're telling the viewport to match
the screen's width in device independent pixels.
And by setting initial-scale equal to 1 we're establishing a one to
one relationship between CSS pixels and device independent pixels.
Doing this will instruct the browser to fit our content to the screen so
that the user doesn't just see a bunch of scrunched up text.
Now one thing to note, when using the viewport tag, make sure you don't force
max scale to one or set user-scalable to no.
This is a bit of an anti-pattern because it prevents users from easily
pinching to zoom the content of the page.
Which is useful if you have a hard time reading smaller text, so
be mindful of this one.
The next technique is to make sure that you're designing with a responsive grid.
As I demonstrated with the Udacity site, designing with a grid
means your content will reflow when the page changes its size.
So this is great for working on mobile devices but it's also great for
those of us who need to zoom in the page in order to read smaller text content.
Oftentimes these layouts are produced using relative units, like percents,
ems, and rems, instead of hard coded pixel values.
The advantage of using relative units is that text and content can enlarge and
force other items down the page.
So the down order and the reading order remains the same even if the layout
is changing because of magnification.
Now you might also consider using relative units like or rem,
specifically for text size instead of pixel values, as some browsers support
resizing just the text in a page via a user preference setting.
If you're using a pixel value for
text, it may not zoom when that setting is turned on.
If, however, you've used relative units throughout,
then the text should update to reflect that user setting.
Lastly, when your design is displaying on a mobile device,
you need to ensure that your interactive elements like buttons or
links have touch targets that are large enough.
And have enough space around them to make them easy to
press without accidentally overlapping onto other elements.
This benefits all of your users, but it's especially helpful for
anyone with a motor impairment.
A minimum recommended touch target size is around 48 device
independent pixels on a site with a properly set mobile viewport.
The 48 by 48 pixel area corresponds to around 9 millimeters,
which is the same size as someone's finger pad.
So in this case I've got two buttons here and this top one is
actually about 40 pixels, the one below it is about 24 pixels.
So to get up to this 48 device independent pixel range what I can do is
I can add some additional padding to each of these to make
sure that their final touch target size meets this requirement.
[BLANK_AUDIO]
Now touch targets should also be spaced about 32 pixels apart,
both horizontally and vertically.
So that a user's finger pressing on one touch target will not
inadvertently overlap onto another one.
So while this icon here has a touch target area of 48 by 48,
I'm also going to ensure that it has 32 pixels of margining around it to make
sure that it's not overlapping with this other interactive element over here.
Following this set of guidelines will go a long way to ensure your experience
is both easy to interact with and
accessible regardless of the device size.