Hello everybody! Many Many thanks for visiting my
blogspot website. Here you will find the full information related Web Design.
Anyway today’s topic is about Web design or Website design. Detailed
information of Data Entry is stated below :-
Nowadays, a website need not look good only on a desktop screen,
but also on smartphones and tablets. A website is responsive when it is fit to
the screen of the client.
Some steps is stated below to make a Responsive Web Design:-
Website Layout
While creating a responsive website, or making responsive an
existing site, the chief thing to look at is the layout.
When you build responsive websites you can start by creating a
non-responsive layout, fixed at the default size. When you are satisfied with the non-responsive
layout, then you can add media queries and slight changes with CSS to form a
responsive site.
While you are done with your non-responsive layout, the chief
thing to do is to paste the following lines inside the <head> and </head> tags
on your HTML page. This will set the view on all screens at a 1×1 aspect ratio
also remove the default functionality from all mobile devices.
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="HandheldFriendly"
content="true">
Now it’s time to add some media queries. Actually, media queries allow website to look virtuous
on all kinds of displays, both smartphones and big screens. And that’s called responsive
web design. The following code is a good starting point for most websites.
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
After that, see the layout is ready or not. For it you can also
check the result on your own mobile device.
Medias
Now, let’s emphasis on a very important feature of a website:
media (videos or images). The CSS code stated below will confirm that your
images will never be bigger than their parent container. This code snippet can be
inserted into CSS stylesheet.
img { max-width: 100%; height: auto; }
Let’s use CSS3 to substitute the default image by one of the quantified
replacement images if the min-device-width condition is matched:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
Now let’s discuss about another very important media in today’s
websites: videos. Most websites are using videos from the third parties sites
such as YouTube or Vimeo etc. This method help you to make embedded videos
responsive.
The HTML:
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284155?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
Also, the CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If you applied this code to your website, embedded videos will
be responsive.
Posts
2 Comments
ReplyDeleteThis is a useful article. The Way of writing is good. By reading this, I surely can enrich my knowledge. Your idea is really outstanding. Thank’s to share us such an important thing.
welcome
Delete