In Responsive web design the new method of web design is connected to the idea of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. Also it suitably fixes on the mobile phone and tablet or ipad screen. It may be you called reactive web site which is adjust according to you display screen resolution. More specifically, the theory allows for an advanced layout 1200 pixels wide, on a 1024 pixel width screen, that auto-simplifies into any screen size resolution , for example, mobile phone screen, ipad or Tab screen . This particular designing technique we call “responsive web design”.
We better understand this with help of this image below.
Responsive web designing is a wholly different designing version than the traditional web designing, and developers must know about the responsive web designing. Today’s World is now change into MOBILE, everything come into the small device. With the help of internet everything is possible in mobile device which is he/she working on a computer with help of internet. Now personal computer screen size (which we may use screen resolution) is 10 to 20 times bigger than mobile or Tablet device. This blog is a powerful example of the fact that few facts about the uses of responsive web designing.
Here are 3 responsive site for your reference:
http://www.solutiononline.co.in
http://www.greathotelphotography.com/
http://sarbamangalamandir.org/
The basic instinct might be to choose media queries to develop a responsive site.However, the hassle you face with media queries is that new queries can pop up from moment to moment; each time the user knowledge unexpected and extreme changes to the look and organization of the site. Experts suggest using some CSS transitions to ease the jump.
Pages that include data tables pose a special challenge to the responsive web designer. Data tables are very wide by default and when you zoom out to see the whole table it becomes too small to read. When you try to zoom in to make it readable, you are supposed to scroll both horizontally and vertically to look through it. Well, there are several ways avoid this problem. Reformatting the data table as a pie or mini-graph is an approved solution. The mini-graph fixes even in narrow screens.
Images in responsive web designs are called context-aware. Responsive web design images are primarily fluid images that can be replaced by context aware images, an updated version for better designing. This particular technique serves the purpose of responsive designing in true sense as the images serve at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues and a careful use of this can do wonder while designing.
Core Concepts
Three key technical features are the heart of responsive Web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented.
The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.
While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
Media Queries
Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:
- <link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
- <link rel=”stylesheet” type=”text/css” href=”printfriendly.css” media=”print” />
That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.
Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.
There are three ways to implement media queries:
Use the @import rule to import style rules from other style sheets:
@import url(style600min.css) screen and (min-width: 600px);
Put media queries directly in the style sheet, This is the most common approach.
Implementing Media Queries Directly in a Style Sheet
#nav
{
float: right;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width: 200px;
}
#nav li
{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
Include a query in a linked style sheet’s media attribute:
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 800px)” href=”style800.css” />
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.
If you are a website owner and try to develop/redevelop your website into a responsive website please contact us.
You may contact us on: https://www.solutiononline.co.in/contact-us