Class Session: Monday Feb 18, 2019
Images & UX Design
For the image component, read from Learning web design : a beginner's guide to HTML, CSS, Javascript, and web graphics, 4th Edition. Chapter 7. Adding Images
For the design component, think first about accessibility by looking over Designing for Inclusion by the W3C.
And then, in the Web Style Guide by Patrick Lynch and Sarah Horton glance over Chapter 4, Interface Design
Review
In this session we will learn about UX Design and how to integrate images into your site.
Designing websites that are accessible to special-needs populations can be a very tedious process. We will look at some ready-made frameworks that have already integrated accessibility code.
The two most popular CSS javascript frameworks are
- Foundation and
- Bootstrap and here are their accessibility pages:
- Foundation Accessibility Page
- Bootstrap Accessibility Page
Need to identify a font? Try Font Matcher
Both of these accessibility pages have additional links to sites where you can learn more about web accessibility issues.
We will look at some of the code that I have used for various website design. I will provide snippets and links on my GitHub account and my Carolina Source Control account. We will also look at some CSS frameworks that give you a major boost in developing sites with custom colors and image containers.
Designing websites that are accessible to special-needs populations can be a very tedious process. We will look at some ready-made frameworks that have already integrated accessibility code.
The two most popular CSS javascript frameworks are Foundation and Bootstrap.
Which of these two is a better bet for accessibility?
We will continue to work on our sites in this class.
Helpful Links
- Skeleton Grid Help for 02.02 multipage theme.
- Bootstrap grid system for single page site.
- CSS layout at W3Schools.com
- CSS Styling Images at W3Schools
- Quick video on integrating Google Fonts in your site This demonstration places the style in same page. That is not as efficient as putting it in your custom.css file.
- How to: Google fonts at W3schools.com
Making images the Same Size
If you do not know how to resize and crop images in Photoshop, you can use Powerpoint. For example, if you want to use the gallery in the one page site, get one of the thumbnail images and open and open it in PowerPoint. Here is a link to one. This is the size that you want for your "thumbnail." You will want your primary image to be around 800 to 100 pixels wide. That will be the image that will load when you click on the thumbnail.
Therefore, you will want to have two images for your portfolio. Start with the larger one. If it is not too large, you can use it "as is." They don't all necessarily need to be the same size, but it is ideal if all of the thumbnails are the same size.
Here is the PowerPoint file I will use to demo the process: Image Crop and Scale PowerPoint Example
<a class="portfolio-box" href="img/portfolio/fullsize/3.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/3.jpg" alt="">