Running Heading: Responsive Web Design
ICT Advanced Project 1
CP5046
Research Report
Responsive Web Design
Submitted to
Submitted by
Laura Antochi Gulab
Singh (12960761)
Page 1 | 9
Responsive Web Design
Letter of Transmittal
Gulab Singh
Student(jcub)
349 Queen Street
Brisbane QLD 4000
Ms. Laura Antochi
Lecturer(jcub)
349 Queen Street
Brisbane QLD 4000
Dear Ms. Laura
According to requirement of ICT advanced Project one, we need to research on
related topics with this subject and write a research report on it. So I chose the responsive web
design topic for research report .
Your Sincerely
Gulab Singh (JCUB)
Student ID 12960761
Introduction:
Responsive web design: means deign of a web site or web application that would be
response to the all environments or all the platforms in other word flexible for all devices
Page 2 | 9
Responsive Web Design
and according to the screen sizes. In technical language a web that should respond
according to user behavior, environment which depends on the screen size orientation
and platform. Responsive web design is possible with the new technology of using CSS
language, flexible grids, pictures and
layouts. Nowadays, Responsive web
design is backbone of every
website, doesnt matter it
related to business or it is
social web, because in the
present age there are
thousands of devices with
different configurations,
different size and with different
platforms or in normal language we can say every hand has different device
Apart from this Responsive web design means not only the adjustment of screen size it
must be work properly with all environment.
Why Responsive web design?
So if you want to design a successful website for business or other purpose it must be
responsive to all for example- Today there are number of different gadgets available in
the market such as apples products (iPhone 5, iphone6 iPhone 6 plus, iPad, laptops,
desktops). it changed the designing approach from the past because that time designers
were only design web according to desktop computer capability, but nowadays the
challenge is web on smart devices and tablets and responsive web design is best
weapon to tackle with this big bunch of devices. Apart from this there are many other
benefits of Responsive web design
Time and money
Responsive web design is much costly to compare with normal or conventional website.
But its very cheap rather than creating duplicate websites for the different devices such
as for the laptop, iPhone and tablets as well as its cost effective for owners because they
don't need to maintain different websites for different platforms so investment on
responsive web is good decision for long term (why-responsive-web-design-matters-for-
your-website 2016)
Adopted by new devices or Device Agnostic
New devices are increasing day by day and people are using web on their smart devices and all
devices are different from each other so it's very important for developer to design a web site
with responsive web design and all developer are working with one size fits all devices
approach. So responsive web design wide the area of choices of users about device selection.
they can buy any device which they like because they dont have fair about support to web
because Responsive web design work perfectly everywhere doesnt matter you have IOS,
Android or windows. (why-responsive-web-design-matters-for-your-website 2016).
Page 3 | 9
Responsive Web Design
User Experience
Responsive web design provides optimal user experience, it doesnt matter they use laptop,
phone smartphone or a tablet because responsive web design provides them an environment
where they have freedom of use any device at any time. For example, when a person working in
office he can use his desktop or laptop but when he travels he can also use the same web site on
his phone or tablet and all these benefits because of Responsive web design. (why-responsive-
web-design-matters-for-your-website 2016)
The features of responsive web design
There are many more ideas about responsive web design, its not about the Channing resolution
according to screen size and about automatically change the size of media such as photos and
videos. Its very important for a designer to know about all the features of responsive web
design and also about how these features work. There all following features with different ideas.
Layout options
Nowadays flexible layout is the best option but we should talk about other availabilities and
weaknesses of those approaches, which are improved by responsive web design. apart from
every approach comes with challenges, strength and weakness or lack and when we find any
error or weakness we try to fix it or improve it and noting is impossible because necessity is the
mother of invention.
Fixed-width layout
In last decade Fixed width layouts were used in the web design and the big problem of this layout
you need to work under limitations and its very hard to face large number of user with different
demands. For example, your site with 960 px and someone try to use it on his smaller device
then it wouldnt fit with his device and he cant use it properly. All these problems demolish by
Fluid layouts (Kadlec 2002).
Fluid layouts
In Fluid layouts size is determine with percentage rather than pixel in fixed-width and its much
more suitable or we can say flexible. for example a primary Colum with 60% size of the width
container and right side 30% and gutter of 10% . when we use fluid layouts explain with
percentages it doesnt matter the user is using desktop computer or mobile device, the size of
objects will change according to screen size.
Fluid layouts comes with solutions of many issues which we face in Fixed-width such as we can
avoid Horizontal scrollbar and design can adjust the spare white space or remove it. as well as
fluid layout makes much easier to use media queries and style for different devices resolutions.
But fluid layouts are not perfect from smaller to biggest device (Kadlec 2002)
Elastic layouts
Elastic layout is work according to use setting and its change the text of font size. for example, a
viewer set his setting with large font size then Elastic layout change the entire website with large
text its not only change
the text size it changes
full layout that suits the
user setting dont matter
its wider or narrow.
Elastic layouts provide
more freedom to control
the for the text for
example if user increase
Page 4 | 9
Responsive Web Design
the size of text which is in less lines but in bigger size text need more lines then elastic layout
design add new line and extend the other layout to fit properly (Gillenwater 2008).
Unfortunately, this layout can bring back ugly horizontal scrollbar. For example you set the text
size 116px and defined the container with 55em , so when someone try to open it on smaller
then 88opx then problem would be worst. This problem will be more complicated when someone
try to change the font size (Kadlec 2002).
Hybrid layouts
Hybrid layouts used to get benefits from any type of layout with mix others s good point and its
final option is to taken. There are many ways to develop the hybrid layouts but the main are
modified fluid layout and modified the fixed width. To modified the fixed-width provide us inner
div width and central div to extend from corner in the browser.
The second level or type of hybrid can create by modification of fluid layout by using the
minimum width as we need for suitable reading (Bradley 2016).
Which is the best for website?
This is very confusing question because no one knows about the perfect approach for the
responsive web design. According to research its totally depends on the website in other words
we can say it would be depending on your particular project. because each project has its porn
and cons.
Mostly, the suite able answer of this question is the most suitable approaches are flexible
layouts- fluid, elastic or hybrid because all these approaches will be using in the future
technology (Kadlec 2002).
Media Queries
Media queries is a w3c candidate recommendation. Media queries provide freedom to control
the structure and style of website according to device property for example width resolution
orientation (About mediaqueri 2016).
Media queries helps to developer in style selection according to different conditions and allow
you to use different values of different option.
Media query structure
Media query is the combination of different media type and use the different expression to
change the style sheet scope. Media query helps the device browser to show style of a particular
block if they are true.
Syntax
Media queries involves the media type, different expressions of css3 witch make a decision or
result as true or false.
<! -- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<! -- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
Page 5 | 9
Responsive Web Design
}
</style>
If the written query is match with the configuration of device, then the result will be true and
webpage shows all the expressions.
Logical operators
Logical operators are used in the long media queries, such as not, and , & only. The AND
operator is used for write many queries in single. The NOT operator use for the jump from
particular part of the query when the condition is not true and the last one is only operator is
used when the whole query code match and useful.
We can also use the comma-separation for the long or multiple queries and its work with any
true query if the whole list is true then this query forward to OR operator
(Using_media_queries, 2016).
Media types
There are many good feature of web but most wonderful is web ability to assist variety of media.
Nowadays web is able to cover any kind of screen size in other word web demolish the
boundaries of sizes. Data can be use in any form from web for example we can print it with
Braille Tactile.
Every type of media helps the browser to understand that given media is suitable or not. for
example, if we are using screen media type such as TV but if you use any other type of media
like print then the stylesheet only work with printing.
Recognized media types
There are Ten different media types defined by CSS. All these work according to target devices
property and provide relevant result that suites the device and give the appropriate result. there
is the list of different media type: -
Media type Target devices
All It will be support all devices
Braille Only for tactile feedback devices
Embossed Planned for paged braille printers.
handheld Designed for devices with limited band with or for small screens
Print This is specially designed for the print material
Projection Specially designed for projects and presentations
Screen Indented for the color screens such as computers
Speech Designed for speech synthesizers
Tty Designed for the fixed-pitch character grid
Tv Indented for the Tv
Media expressions
The main power of media quires tests various types of features of different platform using
different expressions. A normal example can show weather of the viewport is bigger than 720px:
@media screen and (min-width:720) {
}
This block working with two tasks. First one it tells us about the media type is screen and the
other one check the width of the view port. It ensures the width at least 720px
Page 6 | 9
Responsive Web Design
Media features table
In the table above , there is the list of different media features that can be test
Rules
We can use many CSS rules. the main interesting thing about CSS rules that these rules included
within the media query:
For example:
@media only screen and (min-width:720px{
A{
Color:blue
}
}
Page 7 | 9
Responsive Web Design
External VS Embedded
In CSS3 media queries could be inline on the main CSS stylesheet or could be an external file
which contains the code which has been linked in the stylesheet page.
Media queries can be embedded in a stylesheet, for example:
example{ text-decoration:none; }
@media screen and (min-width: 1500px)
{
Example( text-decoration: strikethrough;}
}
In this example, links would be strikethrough only when the screen would be 1500px or more
than that. Media queries that are external are linked to load the external stylesheet. So in the
head of HTML the code to link the stylesheet would be,
<link href=example.css media=Screen only and (min-width: 1500px) />
Media queries which are inline within the stylesheet, all of the styles are used whether needed or
not, and only one http request has to be made which is a benefit. This is significant considering
the performance, in specific if its being used on a portable mobile network. Mobile networks
always have a high latency problem, which means the server takes a lot of time to get and
process a browser request. A traditional wired internet connection would be four to five times
faster as compared to a mobile network to request http from a server. The only downfall of this
would be a large CSS file. While saving a few http requests, the heavy CSS file created would be
difficult to maintain.
The main benefit of media queries presented in external, is that the records will be smaller, and
its very good for maintain. We can also use low-weight, simple stylesheet for those devices
which are un-support these kind of media queries. and there are big benefits of media queries we
dont need to apply any unnecessary style witch are not needed.
Media Queries Order
The next objective to study how to design the responsive web site form desktop site or for the
mobile from desktop.
Desktop down
Technology is changing day by day and people start using web on mobile phones. All the famous
website is converted into responsive manner. But this task is not easy because developer need
many series of media queries to change the default layout of web for mobile devices.
Unfortunately , converting web from desktop to mobile resulting some complicated problems .
there are many devices are not supporting media queries properly such as windows phone .
blackberry 6.0 etc. all are facing in supporting media queries.
Mobile Up
If you design your project for the smaller devices and after this you want to build it up for the
desktop computer fghfg
Page 8 | 9
Responsive Web Design
Page 9 | 9