Let's check the compatibility of your portfolio sites. The final portfolio assignment has a number of requirements that you will need to meet for your final submission. See the assignment for details. Today, let's check your site navigation and browser/mobile compatibility.
Add a link to your portfolio in the spreadsheet. Pair up with someone in class. Create a shared Google doc to document your findings. Find their portfolio site link in the spreadsheet and do the following tasks:
From your partner's home page, navigate to all of the required content pages:
- Home page
- Bio/About page
- Cheatsheets page
- Four Mini-project writeups (MP0: Setup, MP1: Extension, MP2: Creative Code, MP3: Game)
- The MP2 sketch gallery
- All of the sketches from MP2, each on its own page
- The MP3 Game
- The final project proposal (the rest of the final project will of course not be up yet)
Ensure that all of the links work and that there is a clear path to each page. It is ok if they aren't linked directly from the home page. For example, there could be a subpage called "438 projects" or "web dev projects" that contains links to the project pages. However, it should still be easy to find all of this content.
Document any broken links and missing/hidden pages.
Open their site in a different browser than the one you're currently using. It would be best to try one each of Chrome, Firefox, and Safari. Note: Edge is a Chromium-based browser so you can be reasonably confident that a site that works on Chrome will work on Edge
Navigate around their site again. Do you notice anything that is different? Keep an eye out for:
- images or gifs not displaying correctly
- transitions that don't work as expected
- incorrect/broken styling (particularly w.r.t sizing or display)
Drag in the side of your browser window so the page is very narrow. How does the site look now? Keep an eye out for:
- Overflows, pictures flowing off the screen
- Wonky percentage-based positioning or sizing
- No padding around text content (meaning text hits the edge of the screen)
On your phone, open your partner's site in your mobile browser. This is where many of you will need to focus your efforts. Navigate around the site again, documenting places where the layout or styling may need to be adjusted.
Share your list of findings with each other. What common issues do you both need to fix? How can you fix them?
See the in-class activities on CSS Layouts, Accessibility, and Templates for more resources. Additionally, these articles might be helpful as your polish your site:
- Responsive layouts, fewer media queries - another banger on designing responsive layouts from CSS-Tricks
- Meta-list of CSS cheatsheets - Lots of great links
- Responsive Web Typography - this article is awesome, particularly if you're interested in typography
- MDN Guide on Responsive Design
- Beginner's guide to media queries - I recommend not relying too much on media queries, but they can be very useful
- Responsive Design Cheatsheet
- HTML, CSS & Responsiveness Reference Sheet