You will now use what you have learned about web design and CSS and build two style sheets: one for the desktop and one for mobile, and incorporate these into your website. Specifically, you will:
- Create a style sheet for the whole website. All the pages (
/,/account,/user) should use this style. Note that you will need to modify your app.yaml for the stylesheets to be downloadable. - Your style should have a coherent color scheme, a logo (can be just text in a different font), distinct login bar, and, well, it should have a bit of style.
- Create a new dummy page,
/questionwhich lists a sample question (in the next homework you will be implementing the question-entering form). Remember that this is a multiple-choice question, with radio buttons for answering. This new page should also use the style. - Create an alternate mobile style for the
/questionpage. This style should be optimized for viewing in an iphone or android phone. If you don't have one, you can use safari to preview it, otherwise, just make your browser window really small.
This homework is due on Monday, February 14 @11am. You can upload it at i-am-done.appspot.com/242/HW4.
Required Reading
- CSS Beginner Tutorial
- HTML and CSS for mobile tutorial.
- Return of the mobile stylesheet tells of the problems with getting different mobile devices to recognize a mobile style sheet.
Posts
Great Link to simulate iphone browser
ReplyDeletehttp://www.testiphone.com/
Awesome, thanks!
ReplyDeleteDr. Vidal I know you said that you were not going to post full HW solutions but do you think you could post a way to do the mobile CSS? Not the CSS itself but the code that has to go into the HTML for the mobile CSS to work.
ReplyDeleteIf you mean the <link media... code, here is a good SO question on it:
ReplyDeletehttp://stackoverflow.com/questions/2590016/configuring-displays-for-different-mobile-devices
There are a lot of phones/smartphones, new ones coming out every day, and each one seems to deal with the <link media.. differently.