ebook-responsive-elearning-with-links-us
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
2<br />
Understanding<br />
Responsive eLearning Design<br />
2.2: Key Features of Responsive Design<br />
Fluid Grids: A traditional website design consists of tables, frames and images. Each element is<br />
assigned a fixed or absolute value in pixels, which specifies exactly how wide or long these would be<br />
when displayed on the webpage. With a fluid grid design, the size of each cell in the grid and its<br />
contents is defined in relative terms, in proportion to its container. Containers, fonts and images are<br />
assigned relative rather than absolute values, expressed as percentages or ems. However, this<br />
doesn't mean abandoning working <strong>with</strong> pixels in image-editing software. All it leads to is the<br />
application of basic math to the design process.<br />
Flexible Images: The <strong>responsive</strong> design's fluid grid design allows images to move and be scaled<br />
proportionately as per the screen size. Another option is to <strong>us</strong>e CSS to crop (rather than scale)<br />
images around a foc<strong>us</strong> area. Scaling and/or cropping images eliminates the need to upload multiple<br />
versions of the same image on the server.<br />
Media Queries: In June 2012, media queries became a W3C recommended standard. Media queries<br />
return information on devices' physical specifications (width, height, orientation, resolution, etc.),<br />
allowing different styles to be delivered to different devices in order to offer the best experience to<br />
each <strong>us</strong>er. Media queries aid designers in building multiple layouts, but are not specifically a mobile<br />
solution or a tablet solution. They ask the 'right' question to the device and based on the response<br />
direct the fluid grid and flexible images to align to the device dimensions.<br />
13
Change language