responsive

If you’ve been doing web design and development for a while you may remember the days when creating website layouts involved tables or browser specific techniques. Things got a lot better when we began using floats for creating layouts and this proved to be extremely successful. In fact, this technique is still widely used by most developers and designers because it works well and it allows us to build pretty sophisticated layouts.  

There have been plenty of blog posts touting the reasons to use Sass as a CSS preprocessor, and if you've been doing responsive design for a while, you're probably already using the Breakpoint gem with Sass. But there are many ways to use both of these tools, so let's talk about using breakpoints effectively. 

Start with the small screen first, then expand until it looks like sh*t. Time for a breakpoint!
- Stephen Hay.

Continuing our six-part Drupal 8 webinar series is Kendall Totten.

Intro

During my trip to Drupalcon Porltand this year I discovered a new grid system/framework called Singularity Grid System or Singularity GS for short. Since then, I have taken some time to work with this framework and I have to say it's pretty awesome. It took me some time to get my mind around this novel way of creating grids and layouts, but after I created a few, things started to click. 

Last night I was working on a project where the mockups called for some assymetrical button shapes that were all different sizes. Rather than creating a half a dozen background images for each button length, I wondered if I might just use an SVG or Scalable Vector Graphic file as the background which I could then stretch as needed. As you know, there's no penalty of pixelation when stretching SVGs because they are not based on pixels. This would also save a lot of load time on the site, as I can load one vector image instead of half a dozen pixel-based images. 

There are a lot of ways to handle navigation in general, because “best practices” for mobile are still being sorted out. There isn’t a one-size-fits-all solution because everyone has different needs for their site, and their menus are organized differently.

At various Omega presentations I've given at Drupalcamps and in blog posts I've written, people have asked me about responsive menu options. Brad Frost has outlined some great options for responsive menus, and I'd encourage you to do your research since it's a always a good idea to review what your options are before

The Omega 3.x Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content-first layouts, that resize and rearrange themselves depending on the screen size of the user's device.

The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page, and pitfalls to avoid.

Experience level: Intermediate