← Back to Module

CSS3 & Responsive Design

CMM721: Web Application Development - Session 3

Birmingham Newman University

Lecturer: James Williams

Masters Level Conversion Course

3-hour session • 17 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Apply CSS3 layout techniques including Flexbox and Grid
  • Create responsive designs that work across all devices
  • Use CSS media queries effectively
  • Implement mobile-first development approach
  • Apply CSS frameworks and follow best practices

CSS3 Fundamentals

CSS Box Model:

  • Content: The actual content of the element
  • Padding: Space between content and border
  • Border: Line around padding and content
  • Margin: Space outside the border
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

CSS Box Model in Detail

/* Box Model Properties */
.element {
  width: 300px; /* Content width */
  height: 200px; /* Content height */
  padding: 20px; /* Space inside border */
  border: 5px solid #000; /* Border around padding */
  margin: 15px; /* Space outside border */
  box-sizing: border-box; /* Includes padding/border in dimensions */
}
  • box-sizing: content-box: Default (width/height = content only)
  • box-sizing: border-box: Recommended (width/height includes padding/border)

Flexbox Layout System

Flexible Box Layout - One-dimensional layout system

Container Properties:

  • display: flex: Creates a flex container
  • flex-direction: row | row-reverse | column | column-reverse
  • justify-content: Aligns items along main axis
  • align-items: Aligns items along cross axis
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid Layout

Grid Layout - Two-dimensional layout system

Key Concepts:

  • Grid Container: Element with display: grid
  • Grid Items: Direct children of grid container
  • Grid Lines: Horizontal and vertical lines that create grid
  • Grid Tracks: Spaces between grid lines

Media Queries

/* Mobile First Approach */
.container {
  width: 100%;
  padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1000px;
  }
}

Common Breakpoints:

  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px+

Responsive Design Principles

Mobile-First Approach:

  1. Start with mobile design (base styles)
  2. Use min-width media queries to enhance for larger screens
  3. Progressive enhancement for better devices
  4. Touch-friendly interface elements

Key Considerations:

  • Flexible grid systems
  • Scalable images and media
  • Readable typography at all sizes
  • Intuitive navigation patterns

Viewport Meta Tag

Essential for Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: Sets viewport width to device width
  • initial-scale=1.0: Sets initial zoom level to 100%
  • Prevents: Mobile browsers from scaling pages incorrectly

Task 1: Responsive Layout Creation

Objective:

Create a responsive layout using CSS Grid and Flexbox

Requirements:

  1. Create HTML structure with semantic elements
  2. Implement CSS Grid for overall layout
  3. Use Flexbox for component alignment
  4. Add media queries for different screen sizes
  5. Ensure mobile-first approach
  6. Test responsiveness across different devices

Deliverables:

  • Responsive HTML/CSS code
  • Screenshots of different breakpoints
  • Brief explanation of responsive decisions

CSS Frameworks

Popular Options:

  • Bootstrap: Most popular CSS framework
  • Foundation: Advanced responsive framework
  • Bulma: Modern CSS framework based on Flexbox
  • Tailwind CSS: Utility-first CSS framework

When to Use:

  • Prototyping and rapid development
  • Consistent design systems
  • Responsive components out of the box

Bootstrap Grid System

<div class="container">
  <div class="row">
    <div class="col-md-6">Half width on medium+</div>
    <div class="col-md-6">Half width on medium+</div>
  </div>
</div>
  • 12-column grid system
  • Responsive breakpoints: xs, sm, md, lg, xl
  • Mobile-first approach

Task 2: Cross-Device Testing

Objective:

Test responsive design across different devices and browsers

Testing Methods:

  1. Use browser developer tools device simulation
  2. Test on actual mobile devices
  3. Check different browsers (Chrome, Firefox, Safari, Edge)
  4. Verify touch interactions work properly
  5. Test with different orientations (portrait/landscape)

Tools:

  • Browser DevTools
  • Responsive Design Mode
  • Online testing tools (BrowserStack)

Performance Considerations

CSS Performance Tips:

  • Minimize CSS specificity conflicts
  • Use efficient selectors
  • Avoid deep nesting when possible
  • Optimize media queries
  • Consider critical CSS for above-the-fold content

Responsive Images:

  • Use srcset and sizes attributes
  • Implement lazy loading
  • Consider WebP format for better compression

Accessibility in Layout

Important Considerations:

  • Maintain logical reading order
  • Ensure sufficient color contrast (4.5:1 minimum)
  • Provide focus indicators for keyboard navigation
  • Use relative units (em, rem) for scalability
  • Test with screen readers
Remember: Good responsive design is also accessible design!

Next Session: JavaScript Fundamentals

  • JavaScript basics and data types
  • DOM manipulation and event handling
  • ES6+ features and best practices
  • Debugging techniques
  • Browser developer tools

Prepare by reviewing JavaScript fundamentals and practicing basic scripting.

Questions & Discussion

Contact: JWilliams@Staff.newman.ac.uk

Office Hours: Available for consultation

Thank you for your attention!