1. Seminar and article

Brief

This element is undertaken in pairs. Find a partner from your group and together, select a topic from the list below on which you will give a 15 minute seminar to the other students in your group. After the seminar, you will publish an article on the same subject on your blog and make the presentation slides available.

Requirements for presentation

1. Presentation to last 15 minutes + 5 minutes questions (maximum).
2. Both parties are to share the delivery of the talk.
3. Presentation to be delivered with slides (using PowerPoint/Keynote or a web based medium).
4. Where appropriate, live demonstrations are encouraged.
5. Presentation slides to beade available as a PDF.

Tip: Make sure you give yourself plenty of time to practice your presentation and to decide who will say what.

Requirements for article

1. Article to include all of the key points of the presentation (with illustrations as appropriate) and including relevant links and references.
2. Article to be published as WordPress post – format options: article or tutorial (whichever is most appropriate to the topic).

Note: Both students in the pair will make the same post on their blogs and provide the same slides – this is a joint submission.

Submission: A link to your article and a link to your slides from your coursework homepage.

Deliverables

1. 15 minute seminar presentation in class.
2. Slides made available online and linked to from your coursework homepage.
3. A blog post covering the seminar topic, linked to from your coursework homepage.

Assessment

The assessment for your seminar will be based upon:

1. Quality of the materials used for presentation (clarity, design etc.)
2. Content quality – how well you understood your subject and how well you helped others to understand the subject.
3. Subject coverage (depth, breadth, focus as appropriate) of the presentation and accompanying article.
4. Readability of the article – clear headings/sectioning, logical structure, understandable text.

Both members of your pairing will be awarded the same grade, so it is in your best interest to collaborate effectively and to deliver high quality content.

Seminar topics

Choose one of the following:

1. Responsive images – how do we implement art directed images?
2. What is the HTML <details> element? How is it used and how can it be styled? Can we use it now?
3. CSS custom properties – what are they and how can they be used what are the key use cases?
4. What are container queries – will they change the way we design responsive pages? Can we use them now?
5. CSS animation – how does it work and what can we do with it?
6. What is CSS Scroll Snapping? How can it be used to build practical interfaces?
7. Does the CSS @support feature mean an end to vendor prefixes? How is it used?
8. CSS pre-processors, what are they and should we use them now?
9. What is “atomic design”? Does it help with an understanding of CSS naming conventions such as BEM?
10. What are “Progressive Web Apps” and how do they work?
11. What is version control and GIT? How does it help team working?
12. Page load speed is a UX consideration. How can we check the speed of our pages and improve it?

No duplication of topics allowed within the same group (Standardistas and Codepoets). Claim your topic on Slack in the # 1-webbies-22-23 channel. First claim bags the topic!

Schedule

Submission date/time (slides and article): Friday, 17th March 2023 at 4pm
You are advised to submit the slides and article shortly after giving your seminar so that the topic is still fresh in your mind.

Seminar schedule 2023

15th February (morning)

• Sophie and Jess = The HTML <details> Element
• Mona and Anumeha = CSS Custom Properties
• Hari and Muhammad = Page Load Speed
• Adi and Vidhi = CSS Animation

15th February (afternoon)

• Zara and Prachi = CSS Animation
• Gopika and Larmie = Version Control
• Miri and Eddy = CSS Custom Properties
• Amrutha and Sabbu = CSS Pre-processors

22nd February (morning)

• Armani, Natalie and Ye-Seul = Responsive Images
• Bukie and Peter = CSS Pre-processors
• Lipi and Emil = Progressive Web Apps
• Andre and Ibrahim = Version Control

1st March February (morning)

• Gopika and Larmie = Version Control
• Jeena and Aleyna = Progressive Web Apps
• Devjan and Sushan = Responsive Images
• Rohith and Jagdeesh = Page Load Speed
• Brikena and Sukhi = Container Queries

2. Small business website, revisited

Brief

This is an opportunity to demonstrate how far you have improved and how your understanding of web design has developed since completing the first project. This project requires that you critically analyse the website you created during the Design for Web Content module and redesign/reengineer the site using all your new skills and knowledge.

Requirements

In addition to good visual design, and valid semantic code, the new site should also demonstrate the following:

1. Good maintainability through the use of PHP Server Side Includes for common page elements (e.g. header, footer and navigation).
2. Good UX considerations, including a custom 404 error page.
3. Features that are inclusive and sustainable (e.g. good image optimisation).
4. A well-considered use of JavaScript (e.g. the highlighting of today’s opening times, is the shop open or not).
5. Good search engine optimisation (SEO) in the design of code and content to provide excellent findability (e.g. clear keyword strategy and good use of description meta tag, title and headings).
6. Good accessibility features through code, content and design (e.g. appropriate use of ARIA features, colour contrast, clickable area size and an accessibility statement).
7. Fully responsive layout with a mobile-first approach, paying particular attention to viewport widths between breakpoints.
8. Any other features you think are appropriate to the project.
9. Your analysis of the original site and a summary of improvements made should be included either as a blog entry or as a separate document saved as a .PDF file.

Note: Please ensure that both versions of your Small Business Website remain live and linked to from your coursework homepage so that a comparison can be made.

Schedule

Interim crit: 22nd/29th March 2023
Submission date/time: Friday, 21st April 2023 at 4pm

Deliverables

1. A revised version of the small business website, linked to from your coursework homepage.
2. A short analysis of the original website and a summary of all the changes/improvements you have made in the new version, linked to from your coursework homepage.

Checklist

These are the things you should do before submitting your work.

1. Validate your code (both HTML and CSS).
2. Ensure your code is lean, consistently formatted and clearly commented.
3. Check that the semantics and structure of your HTML are logical and consistent. Pay special attention to heading levels.
4. Optimise your images (file size, image size and image quality).
5. Check your file and folder management – filenames and folder names should be descriptive, all lower case, no spaces. Folder structure should be logical.
6. Check all your links and make sure navigation works as expected.
7. Ensure the visual design shows attention to detail, especially typography. Think about font choice, line height, use of whitespace etc.
8. Read the requirements above and ensure you have done everything you need to do before the submission deadline.

Assessment

The assessment for this project will be based upon the following:

1. How clearly you have identified potential areas for improvement in your analysis document.
2. How well you have implemented the requirements of the brief to demonstrate your understanding of best practice in contemporary web design.