We'll start out with a brief overview of the Omega and Delta modules and then we'll tackle some of the less-documented Omega features including:
• Creating Custom Grids
• Understanding and customizing the Region/Zone/Block System to meet your needs
• Owning the .info file
• Some basic functions (Yay Code!)
Responsive Web Design, because progressive enhancement is better than graceful degradation. You probably need responsive web design and you don't even know it. Responsive web design is the concept of developing a website in a way that helps the layout adjust according to the user’s computer screen resolution. Take SONY.com. Wouldn't it be wonderful if that beautiful site would render correctly no matter what screen size it's being viewed on?
It does: http://mattkersley.com/responsive/?http://sony.com
More examples:
You get the point.
You need responsive web design when:
YOU’RE STARTING FROM SCRATCH
Developing a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.
YOU WANT TO KEEP COSTS LOW
Solid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.
YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASED
A mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.
Come to this session and learn about bleeding edge topics like:
Progressive Enhancement consists of the following core principles:
Focuses on the content. (not browsers)
Media Queries consist of a media type and zero or more expressions that check for the conditions of particular media features.
For example:
@media screen and (min-width: 480px) {
.content { float: left; }
.social_icons { display: none }
// and so on...}
Whether you use Drupal or any other Content Management System as the back-end of your website, there is always a requirement for front-end design. This session does not focus on creating a Drupal theme, instead, it focuses on learning the principles of designing a clean, user-friendly and visually appealing design. These principles can then be applied to a Drupal theme.
In this session we will use CSS3 to accomplish many of the progressive enhancements to our design. We will build a full website layout in a matter of minutes and will discuss how to properly use color, texture, white space and typography to accomplish a visually appealing look. In addition, we will briefly go over how to style web forms and will be discussing the basics of using a CSS Framework to accomplish the layout of our design.
This session requires basic knowledge of CSS to follow along.
View Live Sample and Download Source Code
View the slides of this presentation
This isn't just another Drupal Session – it's applicable to all facets of web design!
We'll be going over the things that you thought you knew about design, but could never put name to. Topics will include, but aren't limited to: Screen Layout, Interaction Styles, Text, and Color.
JUST ADDED: We'll be going over advanced topics like Cognitive Perception, Preattentive Processing, Gestalt Laws and more!
