Unit 20: Client Side Customisation of Web Pages

Lesson 5: Multi-Column Responsive Pages Using CSS

Most web pages involve using multi0ple columns of information. In the past tables were used to achieve this. Tables are however inflexible and with the advent of mobile devices such as phones and tables there is a greater need to design web pages that are fluid and can adapt to different screen sizes.

There has been a lot published online and in the press on the need to for responsive web design. This means developing pages that can respond to different devices so that a simpler one column page is provided for mobile phones, and multi-column pages are provided for tablets and work stations.

In order to achieve this, and for it to work in most browsers complex CSS is required. In my view adopting tried and tested CSS Frameworks is a more efficient route to developing reponsive pages.

Assessment 2: Assessment 2: Mini Website

  • P4 design web pages using CSS to control layout
  • M3 employ good practice in the design and implementation of web pages

Lesson Activities

  1. 15 min Tutor: Explain the need for Responsive Pages, and explain the need for using css & js frameworks
  2. 45 Minutes Tutor & Students: Presentation and demonstration on Multi-Column Responsive Pages
  3. Example HTML: Example of Multi-columns

Useful Resources

  • Website: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It is also now an integral part of Microsoft ASP.NET web applications
  • Article: 16 Best Free Responsive CSS Grids