Jive Factory: Creating a Basic Wireframe

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Wireframing the foundational Jive Factory layout and implementing mobile-first media queries for optimal responsive design

Exercise Preview

Exercise Overview

This is the first in a comprehensive series of exercises where you'll build a fully responsive website for The Jive Factory, a contemporary music venue, using industry-standard mobile-first methodology. Before diving into high-fidelity design implementation, wireframing serves as a critical foundation for establishing page architecture and validating responsive behavior across diverse device ecosystems. This exercise focuses exclusively on creating robust structural foundations—we'll develop a semantic wireframe that serves as the scaffolding for content integration in subsequent exercises. This approach mirrors professional development workflows where structure precedes aesthetics, ensuring optimal performance and maintainability.

Starter Site Template

We've prepared a professional-grade development environment based on industry-standard front-end frameworks and best practices current as of 2026. This starter template incorporates modern HTML5 semantic structure, optimized CSS architecture, and essential JavaScript foundations—eliminating boilerplate setup time so you can focus on responsive design principles. The template follows contemporary web standards including accessibility guidelines, performance optimization, and progressive enhancement strategies that professional developers rely on daily.

1. Navigate to your Desktop, then access Class Files > yourname-Mobile and Responsive Class and open the Jive folder. This organized file structure contains:
   • An img folder housing optimized assets for web delivery.
   • An index page featuring semantic HTML5 structure with initial content framework.
   • A css folder containing modular stylesheets following modern CSS architecture patterns.
   • A js folder with essential JavaScript utilities and progressive enhancement scripts.
   • A snippets folder containing pre-written code blocks to accelerate development workflow.
   • A layouts folder with comprehensive design specifications in PDF format for reference throughout development.
2. Open the entire Jive folder in your code editor (modern editors like VS Code, Sublime Text, or Atom support full project integration).
3. Open index.html in your code editor to examine the foundational markup.

4. Review the code structure, noting these professional implementations:

   • The viewport meta tag is properly configured for responsive rendering across devices.
   • Dual stylesheet architecture links to normalize.min.css and main.css, leveraging Normalize.css for consistent cross-browser rendering foundations.
   • Semantic HTML5 elements including header, footer, and content sections provide accessible structure with placeholder content ready for enhancement.

5. Open main.css from the css folder within the Jive directory.

   Examine the stylesheet architecture, which incorporates modern CSS best practices including universal border-box sizing for predictable layout behavior, responsive image handling, and the clearfix utility class for legacy float support. The commenting system provides clear organizational structure for general styles and media query breakpoints, following professional development documentation standards.

6. Return to index.html for the next phase of setup.

7. Locate the jQuery implementation near the document footer.

   This implements a robust fallback strategy: the primary jQuery library loads from Google's CDN for optimal performance and cross-site caching benefits. However, the script includes a failsafe that detects successful CDN loading and falls back to a local copy if network issues occur. This technique, adopted from HTML5 Boilerplate, ensures reliable functionality regardless of external dependencies—a critical consideration for production websites.

Studying the Designs

Understanding how content adapts across device contexts is fundamental to effective responsive design. Let's analyze the provided layouts to understand the strategic content reorganization patterns for mobile, tablet, and desktop experiences.

1. Navigate to the Jive folder, access the layouts directory, and open Layout1-Mobile.pdf. The file will open in Adobe Acrobat or your default PDF viewer.

2. Adjust zoom to view the complete page layout at comfortable resolution.

3. Analyze the mobile-first design approach, noting the linear content flow optimized for touch interaction and narrow viewports.

4. Proceed to page 2, where content sections are clearly labeled to illustrate the information architecture that will guide our HTML structure decisions.

5. Open Layout2-Tablet.pdf from the Jive > layouts directory.

6. Zoom out for full-page perspective of the tablet layout adaptation.

7. Study the enhanced layout complexity, particularly the introduction of the slideshow component that leverages increased screen real estate.

8. Examine page 2 carefully:

   • The left sidebar consolidates three distinct content modules (Just Announced, Happy Hour, and Email Signup) into a cohesive navigation aid positioned alongside the primary Upcoming Shows content.
   • The layout employs a classic one-third/two-thirds proportion, with sidebar content occupying approximately 33% of available width while the main content area utilizes the remaining 67%—a ratio that optimizes readability and visual hierarchy.

9. Open Layout3-Desktop.pdf from the Jive > layouts directory.

10. Adjust zoom to encompass the full desktop layout design.

11. Observe the sophisticated layout evolution that takes advantage of wide-screen displays while maintaining content accessibility.

12. Study page 2 to understand the advanced layout relationships:

    • The Logo & Nav section now functions as a persistent left-column element, providing consistent branding and navigation alongside the dynamic Slideshow and Upcoming Shows content areas.
    • The sidebar content modules are strategically repositioned beneath the primary navigation, creating a secondary content hierarchy that doesn't compete with main content for attention.
    • The proportional system shifts to approximately 25%/75%, reflecting desktop users' preference for wider primary content areas while maintaining sidebar utility for supplementary information.

With a clear understanding of our responsive design targets, we can now begin implementing the foundational structure that will support these varied layouts.

Styling the Placeholder Content & Page Margins

1. Close all PDF documents to focus on development work.

2. Return to index.html in your code editor.

   Having analyzed the design requirements across device contexts, we'll now establish the visual foundation by styling the existing placeholder content. This approach allows us to see structural changes immediately as we implement responsive behaviors.

3. Preview index.html in a modern browser to observe the current unstyled state. Notice that the content order in the source code directly reflects the mobile-first content priority—this sequence ensures optimal accessibility and progressive enhancement.

4. In your code editor, observe that each content section includes a module class. This systematic approach to CSS class naming allows us to apply consistent visual treatments across all content blocks while maintaining the flexibility to customize individual sections later.

5. Switch to main.css to begin implementing the visual foundation.

6. Locate the PROJECT STYLES comment section and add the following modular styling:

   .module {
      background: #eee;
      border: 1px solid #000;
      padding: 20px;
      margin: 0 10px 20px;
      line-height: 1.9;
   }

   NOTE: This margin strategy leverages CSS's margin collapse behavior: vertical margins merge while horizontal margins accumulate. By using 10px horizontal margins (totaling 20px between adjacent elements) and 20px bottom margins, we achieve consistent 20px spacing throughout the layout. The increased line-height provides visual breathing room during the structural development phase.

7. Save the file and observe the improved visual separation in your browser preview.
8. Preview index.html in your browser. The content sections should now display clear visual boundaries, though we need to address the overall page spacing for professional presentation.

9. Return to main.css and add this body styling above the existing .module rule:

   body {
      margin: 0;
      padding: 25px 15px 5px;
      background: red;
   }

   This padding-based spacing approach (rather than traditional margins) is intentional and strategic. In upcoming exercises, we'll constrain content width using max-width properties and center content with auto margins—a technique that requires padding for edge spacing since margins will be reserved for centering. Our padding calculations ensure uniform 25px spacing:

   • Top: 25px direct padding (no other spacing elements).
   • Horizontal: 15px padding + 10px module margins = 25px total.
   • Bottom: 5px padding + 20px module margins = 25px total.

Adding the Media Queries

Media queries form the backbone of responsive design, allowing CSS to adapt to different device capabilities and screen sizes. We'll implement a mobile-first approach with distinct breakpoints, using temporary background colors to visualize our responsive behavior during development—a professional debugging technique.

1. In main.css, locate the MEDIA QUERIES comment section.

   You'll notice we've included a high-resolution media query from HTML5 Boilerplate, designed for Retina displays and print optimization. This remains available for future enhancement while we focus on viewport-based responsive behavior.

2. Below the MEDIA QUERIES comment but above the High Resolution Styles section, implement our first breakpoint:

   @media (min-width: 480px) {
   
   }
   
   /* High Resolution Styles */

   NOTE: This 480px breakpoint targets devices transitioning from phone to small tablet sizes, representing a critical threshold where layout complexity can increase.

3. Add visual debugging within the min-width: 480px media query:

   body {
      background: green;
   }

4. Save your changes and test the responsive behavior immediately.
5. Preview index.html in your browser and test the breakpoint behavior.
6. Resize your browser window to observe the background color transition: red indicates mobile viewport (under 480px), while green confirms tablet/small desktop viewport (480px and above). This visual feedback is invaluable for understanding responsive breakpoints.
7. Duplicate the existing min-width: 480px media query, including its body rule, for our desktop breakpoint.
8. Paste the copied code directly below the original query.

9. Modify the second media query to target desktop displays:

   @media (min-width: 480px) {
      body {
         background: green;
      }
   }
   @media (min-width: 1024px) {
      body {
         background: blue;
      }
   }

10. Save your stylesheet changes.
11. Preview index.html and test all three responsive states.

12. Resize your browser window across the full spectrum to observe three distinct background colors: red (mobile, under 480px), green (tablet, 480px-1023px), and blue (desktop, 1024px and above).

    This foundational responsive framework is now ready for content and layout enhancements in our next exercise phase.