Code from today
Below are some screenshots of some of the code we learnt today. The first two shots are examples of mobile ‘Meta Data’. Meta Data is what passes the information to the browser.
The first shot shows the code for having a specific width to a viewpoint (or screen). The second code shows the code that allows the site to change size to fit the viewpoint (screen).
Adding a mobile css page will allow you to add formatting to the site and would be linked the same way as other css pages. Adding media ‘screen’ and ‘handheld’ to the html will allow the browser to detect which code to use for which device.
The css above shows the width the site will ‘snap’ into the mobile web view when it detects this screen size. The 340px is due to padding and the screen size is 400px.
Below is how the site looked before the extra code and the next is how it looked at the end.
The second image is more spaced out and clear and the menus are easier to tap. The huge grey block has also been removed allowing more space for content which is important due to the screen size. With the menus, the font is bigger and the links are now set to active instead of hover (as I noted earlier, hover doesn’t work on a mobile).
We also looked at how to add forms using HTML5 and tried a very basic one for an email address.
We were given names of book titles to read if we wanted to learn about mobile coding in more depth. These books were:
- Responsive Web Design
- Mobile First
I would like to look into this more and will invest on getting the above books. As I am considering this route as a career, these books would definitely be a good idea!
