With the popularity of tablets taking the center stage ever since the launch of the first iPad, web pages were being swayed towards simplicity and user-friendliness. The smartphone revolution then followed suit and mobile web browsing had then become a norm until today. As the screens of tablets and smartphones are a lot smaller than deskstops, web pages are being made simpler with the texts bigger to suit the smaller screens.
The obvious change to the web page is the login page. The login input text and space are now bigger. Here is an example of the HTML and CSS codes I use to follow this trend:
|
<html> <table height=100% width=100% align=center valign=middle><tr><td> <table width=520 height=160 align=center valign=middle style="border: solid #cccccc 1px; background-color: #ddeeff"> <tr><td width=20> </td><td align=right><font face=arial size=3 color=#888888>Login ID</td><td width=20><br></td><td><input type=text name=lg style="height: 40px; padding: 10px 0px 10px 8px;font-size:16px" maxlength=40 size=40></td></tr> <tr><td width=20> </td><td align=right><font face=arial size=3 color=#888888>Password</td><td width=20><br></td><td><input type=password name=pw style="height: 40px; padding: 10px 0px 10px 8px;font-size:16px" maxlength=40 size=40></td></tr> <tr><td> </td><td> </td><td> </td><td><input type="submit" value="Log On Now!"></td></tr> </table> </td></tr> </table> </html> |
The key to this effect is hightlighted in green. The style in CSS is important to make this work. The "height: 40px;" CSS is important to get this to work on IE browsers.
Here is the screenshot after running the HTML in Chrome:
Enjoy!
No comments:
Post a Comment