Create a 2 Column fixed Responsive Layout '. You might just think - oh! what's special in this?
The interesting part in this Tutorial is that, the 2 Column layout which we're going to build will be Responsive!!
In this tutorial, we'll create a single webpage with 2 sections/columns. One towards the left & the other adjacent to it.
Here we go,
Step1:
After that, put some dummy content into the Div's. If you do not have dummy content stock. Do not worry, Just follow this link Lorem ipsum. Apply the same content to both left & right sections.
Step2: We'll need to apply styles for the sections that we just built.
For that, as you know - we'll have to create a Style Sheet & attach it to the HTML file.
After attaching it to the HTML file, go to the CSS file and apply the following Styles for the Desktop version as seen in the below Code block.
That was the End of Regular version of the HTML page. Now, we will go on to write the Responsive Styles. So that, when the Web Page is Rendered on various Devices like Desktop, iPhone, iPad etc. It should show some changes that are required by the Devices or the Developer himself.
Step3: Now, we'll retain the Same Markup and apply Different Styles and apply CSS3 media queries that satisfies the Conditions kept front by the various Devices.
So, open the CSS file and right after the comment that says - /* Desktop version CSS Ends here */, start writing the following Styles.
First off - The Media Query:
What we did?
We just wrote Media Queries for 2 Mobile Devices includes iPhone & iPad. Inside each Media Query, you will need to write the respective styles inorder to render the Web Page as required by the Device or as you specify it to be.
Step4: Now we'll go on and write Styles for each of the 2 Media Queries.
Go to the iPhone Styles section and keep you cursor within the {} brackets and start writing the following code.
Go to the iPad Styles section and keep you cursor within the {} brackets and start writing the following code.
Great that you've done with the Styles per Devices. Now that its time to go and have a look at the output of your brand new 2 Column Responsive Web Page that used Media Queries to satisfy Conditions per Screen Resolution and Devices.
Now, you are thinking that how to test Responsive Layout?
The interesting part in this Tutorial is that, the 2 Column layout which we're going to build will be Responsive!!
Yes, Guys - We'll go on & create a 2 Column Responsive Layout.
Since you are here, I believe you have all the basic knowledge needed to create a Static 2 column Layout. I'll start off directly with Markup needed.In this tutorial, we'll create a single webpage with 2 sections/columns. One towards the left & the other adjacent to it.
What we going to learn?
How the Layout Responds to Screen Resolutions of various Mobile devices.Here, I'll teach you Step by Step How to Create Responsive Layouts for iPhone, ipad.
Here we go,
Step1:
- Keep your cursor inside the <body> </body> tag's.
- Create 2 <div> tags within, each with unique ID's (Identifiers), so that we can call them while assigning Styles.
- These <div>'s should have a Wrapper <div>.
Example: Below is how the code should be.
<body>
<div id="Wrapper">
<div id="Left"> </div>
<div id="Right"> </div>
</div>
</body>
<div id="Wrapper">
<div id="Left"> </div>
<div id="Right"> </div>
</div>
</body>
After that, put some dummy content into the Div's. If you do not have dummy content stock. Do not worry, Just follow this link Lorem ipsum. Apply the same content to both left & right sections.
Step2: We'll need to apply styles for the sections that we just built.
For that, as you know - we'll have to create a Style Sheet & attach it to the HTML file.
After attaching it to the HTML file, go to the CSS file and apply the following Styles for the Desktop version as seen in the below Code block.
/* Desktop version Style Starts */
#Wrapper {
width: 960px !important;
margin: 0 auto;
}
#Left {
width: 470px !important;
margin-right: 20px;
float: left;
background: #111111;
}
#Right {
width: 470px !important;
float: left;
background: #555555;
}
/* Desktop version Style Ends */
#Wrapper {
width: 960px !important;
margin: 0 auto;
}
#Left {
width: 470px !important;
margin-right: 20px;
float: left;
background: #111111;
}
#Right {
width: 470px !important;
float: left;
background: #555555;
}
/* Desktop version Style Ends */
What we did?
- We applied a width of 960px to the Wrapper Div.
- We applied a width of 470px to the Left Div.
- We applied a width of 470px to the Right Div as well.
- And finally, we also applied a Right Margin of 20px to the Left Div.
That was the End of Regular version of the HTML page. Now, we will go on to write the Responsive Styles. So that, when the Web Page is Rendered on various Devices like Desktop, iPhone, iPad etc. It should show some changes that are required by the Devices or the Developer himself.
Responsive changes may be like the following one's:
- When the HTML Page is rendered in Desktop: The Layout should be wide enough to accommodate both the Left & the Right sections together.
- When it comes to the Mobile Devices - The Layout should Shrink to the Devices width according to the Orientations.
Step3: Now, we'll retain the Same Markup and apply Different Styles and apply CSS3 media queries that satisfies the Conditions kept front by the various Devices.
The main thing what we do here is Media Query & CSS Overriding.
So, open the CSS file and right after the comment that says - /* Desktop version CSS Ends here */, start writing the following Styles.
First off - The Media Query:
For iPhone:
/* Mobile(iPhone) version CSS */
iPhone specific Styles here...........
/* Mobile(iPhone) version CSS Ends */
Device specifications:
iPhone's Orientations and Pixel width accordingly:-
Portrait - 320px X Varying height
Landscape - 480px X Varying height
/* Mobile(iPhone) version CSS */
iPhone specific Styles here...........
/* Mobile(iPhone) version CSS Ends */
Device specifications:
iPhone's Orientations and Pixel width accordingly:-
Portrait - 320px X Varying height
Landscape - 480px X Varying height
For iPad:
/* iPad version CSS */
iPad specific Styles here...........
/* iPad version CSS Ends */
Device specifications:
iPad's Orientations and Pixel width accordingly:-
Portrait -768px X Varying height
Landscape - 1024px X Varying height
/* iPad version CSS */
iPad specific Styles here...........
/* iPad version CSS Ends */
Device specifications:
iPad's Orientations and Pixel width accordingly:-
Portrait -768px X Varying height
Landscape - 1024px X Varying height
What we did?
We just wrote Media Queries for 2 Mobile Devices includes iPhone & iPad. Inside each Media Query, you will need to write the respective styles inorder to render the Web Page as required by the Device or as you specify it to be.
Ex:
@ media screen and (max-width: 480px)
{
You need to apply your particular Styles here. So that when your Web Page is encountered in iPhone this condition satisfies & all the Styles within this {} brackets will be executed.
Where as the other Media Queries wont be satisfied when your Web Page is loaded/rendered in a iPhone and hence, those styles too doesn't apply to iPhone.
}
@ media screen and (max-width: 480px)
{
You need to apply your particular Styles here. So that when your Web Page is encountered in iPhone this condition satisfies & all the Styles within this {} brackets will be executed.
Where as the other Media Queries wont be satisfied when your Web Page is loaded/rendered in a iPhone and hence, those styles too doesn't apply to iPhone.
}
Step4: Now we'll go on and write Styles for each of the 2 Media Queries.
Go to the iPhone Styles section and keep you cursor within the {} brackets and start writing the following code.
/* Mobile(iPhone) version Style starts */
@media screen and (max-width: 480px)
{
#Wrapper {
width: 320px !important;
margin: 0 auto;
}
#Left {
width: 320px !important;
margin-right: 0px;
float: none;
background: red;
}
#Right {
width: 320px !important;
float: none;
background: green;
}
}
/* Mobile(iPhone) version Style Ends*/
@media screen and (max-width: 480px)
{
#Wrapper {
width: 320px !important;
margin: 0 auto;
}
#Left {
width: 320px !important;
margin-right: 0px;
float: none;
background: red;
}
#Right {
width: 320px !important;
float: none;
background: green;
}
}
/* Mobile(iPhone) version Style Ends*/
Go to the iPad Styles section and keep you cursor within the {} brackets and start writing the following code.
/* iPad version Style starts */
@media screen and (min-width : 768px) and (max-width : 1024px)
{
#Wrapper {
width: 1024px !important;
margin: 0 auto;
}
#Left {
width: 500px !important;
margin-right: 24px;
float: left !important;
background: brown;
}
#Right {
width: 500px !important;
float: left !important;
background: silver;
}
}
/* iPad version Style Ends*/
@media screen and (min-width : 768px) and (max-width : 1024px)
{
#Wrapper {
width: 1024px !important;
margin: 0 auto;
}
#Left {
width: 500px !important;
margin-right: 24px;
float: left !important;
background: brown;
}
#Right {
width: 500px !important;
float: left !important;
background: silver;
}
}
/* iPad version Style Ends*/
Great that you've done with the Styles per Devices. Now that its time to go and have a look at the output of your brand new 2 Column Responsive Web Page that used Media Queries to satisfy Conditions per Screen Resolution and Devices.
Now, you are thinking that how to test Responsive Layout?
0 comments:
Post a Comment