Site Overlay

Responsive Design Basics

Course Content
Copyright Agreement
0/2
UAMS Copyright Agreement
Use of Material
Website & E‑Commerce Basics
This module introduces learners to the core concepts behind websites and online stores. Students explore how websites work (domains, hosting, CMS vs hosted platforms) and gain a clear understanding of different website and e-commerce models. The module covers foundational platforms such as WordPress, WooCommerce, and Shopify, including their purpose, strengths, and common use cases. Learners also review essential setup concepts like site structure, navigation, basic SEO, and store functionality.
0/4
How Websites Work (domains, hosting)
00:00
CMS vs Hosted Platforms
00:00
Intro to WordPress & Shopify
00:00
Types of Websites and Online Stores
00:00
Domains, Hosting & Setup
This module explains the foundational components required to launch a website or online store. Learners explore how domain names work, how web hosting stores and delivers website content, and the role of DNS in connecting the two. The module also introduces hosting types, setup considerations, and basic installation workflows for platforms like WordPress and Shopify. By the end of the module, learners can confidently choose a domain, understand hosting options, and complete the initial setup needed to get a website online.
0/4
Choosing a Domain Name
00:00
Web Hosting Basics
00:00
Installing WordPress (local & live)
00:00
Creating a Shopify Account
00:00
WordPress Dashboard & Settings
This module introduces learners to the WordPress admin dashboard and its core settings. Students explore the layout of the dashboard, key menu areas, and the purpose of essential settings such as site title, permalinks, user roles, reading, and discussion options. The module emphasizes how proper configuration affects site usability, SEO, and security. By the end of the module, learners can confidently navigate the WordPress dashboard and configure settings to support a well-structured, functional website.
0/9
WordPress Dashboard & Settings
00:00
WordPress Admin Overview
00:00
Pages, Posts, Media
00:00
Permalinks & User Roles
00:00
Themes & Customization
00:00
Block Editor vs Page Builders
00:00
Using Elementor in WordPress
00:00
Responsive Design Basics
00:00
Backups, Updates & Security
00:00
Shopify Platform Overview
This module introduces learners to Shopify as a leading hosted e-commerce platform. Students explore its key features, including store setup, themes, apps, and integrations, and understand how Shopify simplifies online selling for businesses of all sizes. By the end of the module, learners can explain Shopify’s functionality, identify its advantages, and determine when it is the right platform for an online store.
0/9
Shopify Ecosystem
00:00
Shopify vs WooCommerce
00:00
Admin Dashboard Tour
00:00
Themes & Customization
00:00
Products & Collections
00:00
Navigation & Pages
00:00
SEO for Shopify
00:00
Email & Social Selling
00:00
Analytics & Reporting
00:00
Launch & Maintenance
This module guides learners through the final steps of preparing, launching, and maintaining an online store. Students explore pre-launch checklists, performance testing, ongoing updates, backups, security, and routine maintenance for both Shopify and WordPress sites. The module emphasizes best practices for keeping stores secure, fast, and operational post-launch. By the end of the module, learners can confidently launch a website or store and implement a consistent maintenance routine to ensure long-term stability and growth.
0/4
Pre‑launch Checklists
00:00
Performance Testing
00:00
Ongoing Maintenance (Shopify)
Ongoing Maintenance (WordPress)
00:00
Website Security & Account Protection
By the end of this lesson, learners will understand why website security matters, how accounts get hacked, and how to protect websites and online accounts using simple, everyday tools like strong passwords and Two-Factor Authentication (2FA).
0/6
What Is Website Security?
00:00
Common Website Security Threats
00:00
Password Security Basics
00:00
Two-Factor Authentication (2FA)
00:00
Website-Level Security Tools
00:00
Everyday Security Habits
00:00
Website Learning Lab

Module Overview

This lesson introduces learners to responsive design, the practice of creating websites that look and function well on any device, from desktop computers to smartphones. Responsive design ensures a positive user experience and is essential for modern websites.

Learning Objectives

By the end of this lesson, learners will be able to:

  • Define responsive design and its importance

  • Identify different screen sizes and breakpoints

  • Use responsive design principles in WordPress or page builders like Elementor

  • Test and optimize websites for multiple devices

  • Avoid common responsive design mistakes

Lesson 1: What is Responsive Design?

Responsive Design in web design means building websites that automatically adapt to any screen size or device — desktop, laptop, tablet, or smartphone — so the site always looks good and is easy to use.

It ensures the layout, images, text, and navigation adjust smoothly without the user needing to zoom or scroll sideways

  • Responsive design is a web design approach that makes a site adapt to different screen sizes and devices.

  • The layout, images, text, and navigation adjust automatically for optimal viewing.

  • Benefits:

    • Improved user experience

    • Better SEO (Google prioritizes mobile-friendly sites)

    • Increased engagement and conversions

Lesson 2: Key Concepts

Breakpoints

  • Points at which the website layout changes to fit the screen size.

  • Common breakpoints:

    • Desktop: 1024px and above

    • Tablet: 768px – 1023px

    • Mobile: 320px – 767px

Flexible Grids

  • Layouts use percentages instead of fixed pixel widths to adapt to screen size.

Flexible Images & Media

  • Images scale based on container width, ensuring they fit any screen without distortion.

Media Queries (CSS)

  • Code that applies specific styling rules based on device size.

  • Example: change font size on mobile devices.

Lesson 3: Responsive Design in WordPress

  • Themes: Choose responsive themes that adjust automatically to different devices.

  • Block Editor (Gutenberg): Preview content in desktop, tablet, and mobile modes.

  • Elementor/Page Builders: Use responsive settings to adjust font sizes, spacing, and visibility per device.

  • Menus & Navigation: Ensure menus are mobile-friendly and collapse into hamburger menus on smaller screens.

Lesson 4: Testing Responsive Design

  • Use built-in tools in WordPress customizer or page builders to switch between device views.

  • Browser developer tools (Chrome, Firefox) allow simulation of different devices.

  • Test actual devices whenever possible to check usability.

Lesson 5: Common Mistakes

  • Ignoring mobile optimization

  • Using fixed-width images or containers

  • Overcrowding pages with too much content

  • Not adjusting font sizes and button sizes for small screens

  • Neglecting touch-friendly navigation elements

Knowledge Check (Quick Quiz)

  1. What is responsive design?

  2. Why is responsive design important for SEO?

  3. Name three common breakpoints.

  4. What is a flexible grid?

  5. Give one common mistake to avoid in responsive design.

Practical Activity

  • Open your WordPress site or Elementor page.

  • Switch between desktop, tablet, and mobile views.

  • Adjust font sizes, padding, and image sizes for each device.

  • Ensure buttons and menus are easy to use on mobile.

  • Optional: Test your site on a real smartphone or tablet.

Key Takeaways

  • Responsive design ensures a website works well on all devices.

  • Flexible layouts, images, and media queries are key to responsiveness.

  • Testing on multiple devices is essential to ensure usability.

  • Proper responsive design improves user experience, engagement, and SEO.

Previous
Next
Scroll Up