Read Chapter 4 in Responsive Design / Experiment implementing your own grid on the example html we worked with in class. Try using one of the grid-generators we examined in class. Be prepared to review in class on Thursday.
Assignment
Read Chapter 2 – Responsive Web Design: The Flexible Grid
In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email.
Note: If you are uncomfortable with sharing any personal information with me (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.
For more information on the subject check out the following resources
The goal of this exercise is familiarize you with the proposed Microdata Spec and to get your brain wrapped around its use. Be prepared to discuss in class on Thursday. Submit the url of the completed resume prior to class on Thursday. We will continue to build of of this assignment in the coming weeks. Failure to complete could impact your ability to complete those assignments.
Work through the following article – The Webkit Inspector
Be prepared to discuss and perhaps demo something you learned. Don’t feel intimidated if you you do not understand every little bit of the article. Becoming familiar with this tools will greatly increase your productivity and ability to identify and troubleshoot problems.
Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and a list of linked resources with the relationships. Only include the relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and provide me with an explanation of its purpose.
Please email this assignment to me prior to class on Thursday.
Please complete the assessment and submit before class on Thursday (1.24.13). Please email the URL of the page you create to (tswallace@ualr.edu)
Read: Responsive Web Design, What’s Ahead in 2014 for RWD & Why 2013 is the Year of Responsive Web Design
Set up Web Hosting prior to class on class on Thursday.
Your final project is due today at 10:00am. I have enjoyed having you this semester. Enjoy your Summer.
https://www.surveymonkey.com/
It would take 15 minutes of your time and your responses are very much appreciated.
Best regards,
Marilou Haines
Guest Speaker: Aaron Baker – University Web Services
Continue working on your final project. At this point you should be getting close to wrapping things up. Remember you will presenting these to the class next Thursday so begin to think of how you will structure those presentations.
Please spend today’s session working on your final project. Please be prepared to give the class an update on your project on Thursday. Be sure to submit to me your working video and audio lab exercises.
Provide a working example of both an Audio and Video implementation using HTML5. This should be cross browser and work in IE 8 as well as modern browsers. Be prepared to discuss the implementation in class on Tuesday. Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.
Evaluate and implement one of the many html5 video fallback options. Please share the url of this working implementation with me before class on Tuesday. Included on the page should be the url of technique you used and a list of browsers and devices you were able to support.
Using the wireframes created over the weekend. Setup a Twitter Bootstrap project in a folder called bootstrap inside of your web space. Build out the mobile view of your site first followed by a desktop view. At this point don’t worry with custom css. I am looking for you to demonstrate a basic understanding of how to use Bootstrap and putting the modular pieces together to accomplish something that resembles your wireframes. This project should be completed by the end of the day Thursday.
Spend some time reviewing the Twitter Bootstrap Documentation and be prepared to implement a sample bootstrap page using your wireframe concept due on Tuesday.
Create a wireframe (mobile and desktop view) for your site concept using a tool discussed in class. Submit this to me via email before class on Tuesday.
Refine your site concept and create a preliminary sitemap for the site/app using a service discover in class. Experiment with one of the prototyping tools we discussed in class and build a prototype of the mobile view of your new site. This only needs to an outline.
Use Kuler or a similar tool to generate a color scheme for your web site. You should make note of the hexadecimal color values of your scheme. If you need more information check out the following post on deciding on good colors.
Submit the sitemap and color swatches to me via email by Thursday. You should have a wireframe of the homepage in both desktop and mobile views by next Tuesday.
I’d like you to come up with and idea for a final project responsive web site. I’d like this project to incorporate the the use of responsive design practices and utilize some of the new html5 api’s. I’ll give you a clear list of technical requirements after spring break. This can be for a fictitious client or a real world client or project. Be creative. Pick something you are interested in learning more about. I’d like you to write a paragraph or two explaining the project and what you hope to accomplish/learn by completing the project. Please email this to me before class on the Tuesday following Spring Break. Be prepared to discuss your idea in class.
Continue working on the responsive images assignment.
Complete the responsive images case study and submit by Thursday
I’d like you spend today’s lab building out a desktop view to the mobile resume we created in class. If you need help in creating the proper media queries make sure to reference this article. This assignment is graded and should be submitted to me by Monday so I can look it over prior to class on Tuesday. Please send the url to the project and remember to make this your own. It doesn’t need to look exactly like the initial resume we built. Personalize it. This might be someones first impression of you. Good luck and have a nice weekend.
Complete the mobile first styling of you resume. I’d like you design to reflect your own taste and not replicate what we did in class. Please read the following Article and be prepared apply the concepts included within to your work in lab on Thursday. On Thursday you will have a lab in which you add a desktop view to you site using media queries.
Read Chapter 3
Read Chapter 4 in Responsive Design
Read Chapter 2 – Responsive Web Design: The Flexible Grid
In-class Lab – Please Complete the following Tutorial and submit your online Resume to me via Email
Note: If you are uncomfortable with sharing any personal information with me (or Google!) feel free use fictitious information. You may skips steps 8-10 if you’d like.
For more information on the subject check out the following resources
The goal of this exercise is familiarize you with the proposed Microdata Spec and to get your brain wrapped around its use. Be prepared to discuss in class on Tuesday.
Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and a list of linked resources with the relationships. Only include the relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and provide me with an explanation of its purpose.
Please email this assignment to me prior to class on Thursday.
Please complete the assessment and submit before class on Thursday (1.24.13). Please email the URL of the page you create to (tswallace@ualr.edu)
Have a great Summer.
Please begin putting the finishing touches on your Mobile Final Project. If you need specifics on project requirements please reference the project guidelines page.
Mobile Design: Designing Tapworthy Mobile Apps with Josh Clark
Handouts:
http://www.uie.com/handouts/
Write a short review of the presentation including three takeaways or strategies that you can incorporate into your mobile interface design. Emailed to me before class on Tuesday. If you missed class please email and I will send yo the link to presentation. This is a graded assignment.
This week you should be focusing you design efforts on the tablet / desktop version of your site. Taking the mobile design you have been working on the last few weeks you should build off of that initial design work using media queries to establish breakpoints for the devices you wish to target. Make sure you use all of the tools at your disposal for testing. If you need to refer back to this module.
By the end of the week you should have in place the css for both the mobile and tablet versions of your site.
Speaker: Aaron Baker – UALR Web Services
As part of your final project include Google Analytics into your site. This doesn’t have to submitted to me but it should be present when the final project is submitted.
You should have the finishing touches in place on your mobile interface by the end of the week. Be prepared to discuss how, where, and why you have incorporated css3 into your interface designs in class on Tuesday. It is not a requirement to use in the final product but I’d like you to experiment with it.
We’ll use today’s session to continue work on the mobile view of our project websites. By Tuesday of next week you should have a at a minimum the html structure in place along with rudimentary “mobile first” css. We’ll spend next week working with CSS3 as a means to polish our interface.
Spend some time browsing some of the usable CSS3 properties on this page. We’ll discuss usage and implementation on Tuesday.
Begin coding your mobile view (320px-640px). Make sure you are using the tools and techniques discussed thus far. If you need review on how to prep your document review the following modules.
Send a visual mock-up of your mobile site to me before class on Tuesday. This can be a design file from Fireworks or Photoshop or the actual html and css.
Join the Society for Computing and Information Science tomorrow evening at 6:00pm in the EIT auditorium for a webinar entitled “The How and Why of Responsive Web Design” with Ethan Marcotte. Afterwards we’ll head to Buffalo Wild Wings for dinner. Hope you can make it.
