Lesson 6: Layouts
Web
A responsive web design is about using HTML and CSS to hide, enlarge, move, resize, shrink the content to make your web page look good on any screen such as desktops, tablets, and phones. To make your page responsive you need to set the viewport in all your pages to give the browser instructions on how to control the page’s dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Another important think is using percentage and vw “viewport width” as a relative unit. Responsive text:
<h1 style="font-size:12vw">New Title</h1>Responsive image:
<img src="img.jpg" style="max-width:100%;height:auto;">If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
Media
Media was introduced on CSS3 as a media rule to include blocks of CSS properties only if a certain condition is true. So, now designers are able to create CSS for specific device. For example when the screen gets smaller than 768px, each column should have a width of 100%.
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}iOS
How to present your app is important to get the user attention but not only that present the app accordingly with the device screen is required. To do that on iOS platform you can do using constraints via Xcode GUI or via code. Using constraints you can guarantee that no matter the size of the screen or the orientation of the device your app will be displayed nice and right.
For the layout example we have to build constraints to keep elements like the image below:
There is different ways to implement these constraints, our Layout Example project has 3 different examples of how to implement these constraints.
One way to do it is:
Add one UIView element.
Set the UIView constraints to Top, Leading and Trailing.
Set the Height of the view to be 50% of the Screen size (check the project commit).
Add another UIView element.
Set the second UIView constraints to Leading, Trailing and Bottom, Top to first UIView (check the project commit).
Now add a button into the first UIView.
Set the button constraints to be on vertical and horizontal center of the first UIView (check the project commit)
Add a UILabel into the second UIView.
Set the UILabel constraints to Top 10px, Leading 10px (check the project commit).
Add an UIImageView into second UIView.
Set the UIImageView constraints to Bottom, Trailing to the second UIView.
Set the UIImageView constraints to be 50% of the height and width of the second UIVieew (check the project commit).
At the end of all these steps you should have an screen like the image below:
Constraints:
Android
How to present your app is important to get the user attention but not only that present the app accordingly with the device screen is required. To do that on Android platform you can do using constraints via Android Studio GUI or via code. Using constraints you can guarantee that no matter the size of the screen or the orientation of the device your app will be displayed nice and right.
For the layout example we have to build constraints to keep elements like the image below:
Last updated