I passed my first Sprint Challenge on Friday, so I’ve made it to round two! Yesterday began the 2nd week of full-stack web development class for my cohort at Lambda School. With basic HTML and CSS still fresh on our minds, we’ve started working on responsive websites.

So, what is that, exactly? Responsive websites are basically sites that reconfigure themselves based on the screen size of the device that’s being used to view them. They might use one layout for a widescreen viewer, like a desktop monitor, and another for tablet view, and yet another for smartphone screens – maybe even multiple ones, dependent on the size of the phone screen.

Website layouts

There are 4 basic types of website layouts: fixed, fluid, adaptive and responsive.

• Fixed layout websites were the norm in the early days of the internet. These websites were designed to work on desktop computer screens, but their layouts worsened as screens shrank. They were plagued by horizontal scrollbars and led to later tablet and mobile users having to pinch and zoom the screen to navigate “properly”. They’re somewhat cheaper to build than responsive websites, hence their continues (albeit decreased) presence today.
  • CSS widths are usually hard-coded into the website
  • Horizontal scrollbars are the norm as smaller screens visit them
• Fluid layout websites were the first step towards responsiveness. They had the ability to expand and contract proportionately with the size of the screen being used to view them. It was an early fix, but had a major issue: without careful constraints images could get too small, buttons too large and layouts could spread apart with too much white space on desktops. It created a game of white space vs. content for designers to navigate. Fluid layouts are still used today, but less frequently than adaptive and responsive ones.
  • Design usually divided between desktop, tablet and phone
  • Uses percentage-based units instead of hard-coded pixels
  • Most/all of website designed to proportionally shrink
• Adaptive layout websites are an amalgamation of fixed and fluid designs. They make use of the speed of a fixed layout but are designed to accommodate different devices at pre-determined breakpoints. One example of this is using hard-coded pixels, instead of proportional resizing, but combining that with media queries so that the layout changes from one “fixed” layout to another based on screen size. Adaptive layouts are fairly quick to build, but their ability to more specifically accommodate many devices is limited due to their reliance on a small set of breakpoint designs.
  • Like with fluid, design often centers on desktop, tablet and mobile sizes
  • Makes use of media queries, unlike fixed and fluid design
  • Layout widths are still hard-coded with media queries
• Responsive layout websites combine aspects of all three design types that came before them, to create a more seamless experience for the viewer. They make use of media queries to constrain and reconfigure individual responsive units so that as the screen size shrinks or grows, functionality is preserved. Layouts can change with responsive websites, based on the size of the screen accessing them – sections can switch from horizontal to vertical, individual elements can become invisible, and more. They’re more costly to produce, with regard to time and effort, but have become the standard that long-term projects should be built with.
  • Design is usually divided between desktop, tablet and mobile
  • Responsive units are employed
  • Media queries are employed

Media queries and breakpoints

So, what are media queries and breakpoints?

CSS breakpoints are blocks of CSS code that change the layout or properties of elements on a web page based on the size of the screen viewing them. This screen size is called a viewport. A CSS breakpoint can look like this, and can have as much or as little CSS code nested inside of it as needed to make necessary adjustments to the website based on its trigger (usually screen width):

@media (max-width: 500px) {
    header {
        flex-direction: column-reverse;
        text-align: center;
        justify-content: space-between;
    }
}

They’re apparently also referred to as media query breakpoints, which leads to our next item:

A media query is a CSS command that checks the device viewing a web page for certain criteria that can then be used to initiate breakpoint code. Media queries can check for viewport height and width, device height and width, device orientation (landscape/portrait), and even screen resolution. It essentially provides the trigger to activate a breakpoint and reconfigure a web page.

• How to use CSS breakpoints to create responsive designs
• w3schools: Responsive Web Design – Media Queries
• w3schools: How TO – Typical Device Breakpoints
• css tricks: Media Queries for Standard Devices

One other topic we covered in class was mobile-first design vs. desktop-first design, which affects how breakpoints and initial layout is determined. The first essentially designs for a small screen and adds elements (and width) as screen size increases. The latter is the opposite, starting from a widescreen base and reconfiguring the screen as it narrows. Its the norm for how desktop web applications are built (including where I work – all of my design was desktop-first… it was actually desktop-only!).

Project

I actually completed MVP (minimum viable product) for yesterday’s project on time, and then I started the first stretch goal. I didn’t finish the stretch goal until later in the night though, because I had to leave and make dinner for the kids and be a dad.

We took the website we worked on last week (the Great Ideas website) and made it responsive. When we first created the website, it used basic html and CSS and a lot of inline-blocks. Then, we graduated to Flexbox. Yesterday, we took the Flexbox versions, which were desktop-first designs, and then added breakpoints at 800px for tablet viewing and 500px for mobile devices. Here are my final layouts:

desktop

tablet

mobile

Overall, I feel like I did better this week than last week. I’m starting to understand and actually remember some html and CSS. I can recall concepts a little more surely, and I’m beginning to get used to Git Bash and GitHub, mainly through repeated use.

The first stretch goal for our project was to create a responsive version of our Services page. Creating the Services page was a stretch goal from one of last week’s projects, which I had completed after-hours, so I was able to use it for yesterday’s work. Like the Index page, it made use of breakpoints at 800px (tablet) and 500px (mobile).

desktop

tablet

mobile