Responsive Design

What is responsive design? Responsive
designing is the process of building a website that will automatically adjust
and adapt to the screen size of whatever device the user is on. Current websites
must have the ability to optimize the screen size of a device whether that’s a
desktop a laptop a tablet or a mobile phone in the past when when a website
needed a mobile version a whole different site was designed and built
and then a technique called browser sniffing a Java scripting technique well
this was used to serve up either the full website or the mobile one depending
on the browser discovered before smartphones and tablets screen sizes
didn’t vary all that much but nowadays all manner of different devices are
capable of displaying websites you can have TVs games consoles phones tablets
of all sizes and even watches here are some principles behind responsive design
one of the principles is called the flow as screen sizes become smaller content
starts to take up more vertical space and anything below will be pushed down
it’s called the flow and though the principle is relative units the viewport
can be a desktop mobile screen or anything in between pixel density can
also vary so we need units that are flexible and worked everywhere
that’s where relative units like percentages come in handy so making so
making something 50% wide means it will always take up half of the screen our
viewport which is the size that the opened browser window but it’ll always
take up 50% of whatever it’s displayed on now we talked briefly about relative
and absolute units in an earlier video and there are big consideration when
starting to design a site if you’re going to target mobile users and in
today’s myriad of mobile devices you’d be silly not to at least consider them
as a target market although your site is best built using relative units so let’s
take a little deeper on the differences and in particular uses of these two
types of measurements first of all let’s make sure it’s clear which units are
which when we talk about absolute units we are talking about things like pick
or even centimeters etc things that have an established size relative units are
units that rely on the size of their parent element such as the percentage
and EMS our aims as a general rule percentages are usually used to define
structural elements such as headers sidebars divs and footers etc whereas
Em’s are used to create relatively sized text we all we always need some absolute
measurement to refer to in using relative units because if there isn’t
one we won’t know how much a percentage of something that percentage is some
elements are better kept in proportions such as images so you might want to
consider using Java Script to resize the width and the height or give them an
absolute value another principal of responsive designer of what’s called
breakpoints not to be confused with coding breakpoints breakpoints allow the
layout to change predefined points these breakpoints for example you might have
four columns of content available on a desktop or laptop but only one column
displayed on a mobile device breakpoints in responsive web design or browser
width that have what are called a media query declaration to change the layout
once the browser is within the declared range in CSS a number of new rules were
added that can check the size of the current window in pixels as a result we
now have what’s called the media statement we can use this to target
specific sized screens and change the layout font size color or any aspects of
the design once a breakpoint our browser width is reached we can activate a set
of styles that are targeted for that particular window size another thing is
Max and min values sometimes it’s great that the content takes up the whole
width of the screen like on a mobile device but having the same content
stretching to the whole width of your TV screen often makes less sense this is
why min and Max values can help for example having a width of a hundred
percent and a max width of a thousand pixels would mean that the content will
fill the screen but won’t go beyond the thousand pixels another principle is
nested elements back to relative units again having a lot of elements depending
on each other would be difficult to control
therefore rapping elements in a container keeps it way more
understandable and controllable it keeps it clean and tidy this is where static
units like pixel pixels can help they’re useful for content that you don’t want
to scale like logos and perhaps buttons I know the philosophy is what’s called
mobile first now the mobile first approach does exactly what it says in
the tin design for the smaller screen and work your way up to the devices it’s
one of the best strategies when creating a responsive application while following
a mobile first approach also keep in mind that a large number of users will
be visiting your app from from tablets and desktops retain enough engagement
opportunity for all devices also use a font that looks clear not only on a
desktop screen but also appears convenient on a phone
browser increase line spacing for wider lines to help the reader find your
subsequent lines easily you might not need every page element for every device
category a laptop user may like to see sidebar elements beside your
applications blog entries for example but a mobile or small screen tablet user
might default might just like to focus on the latest posts without the sidebar
additionally you may put post thumbnails with the titles this would present the
items in a more aesthetically pleasing way as a rule for mobile only despair
display core actionable content another thing to look at is navigation
navigation is one of the biggest challenges of responsive design a
desktop our laptops large multi-layer menu bar just won’t fit in a mobile
screen unless you scale it down define a certain screen resolution or a break
point down to what the desktop menu will display as intended and then alter it
below that point another thing to consider a web fonts the basic websites
fought website face safe fonts provided by browsers can be quite limiting one
option is to externally link to located fonts known as web fonts import them on
the fly when your page isn’t viewed in the browser google fonts has hundreds of
freely available fonts for viewing and linking to Google also provides
suggestions as to what font best complements our font you’re currently
thinking of using but all they are but although they can look great I’ve used a
lobster font and a lot of projects for a while which is great fun but remember
that each font will be downloaded and the more you have the longer it will
take to load that page and finally consider using frameworks there are a
number of HTML and CSS frameworks out there that provide tools to help you
build responsive sites they usually contains some design templates for
graphic designers to build sites on and then a column system in which you define
structural elements in terms of how many columns they will take up at certain
resolutions and they do this by using predefined CSS classes here are some
well-known responsive frameworks one of the most popular responsive
frameworks today is Twitter bootstrap are just bootstrap it was originally
created by the Twitter dev team and then released to the public as an open source
product the bootstrap framework has a set of predefined breakpoints for its
structural templates we look at frameworks and bootstrap in more detail
in a later module

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *