Your current filters are…
Building Drupal sites mobile first with lazy loading, responsive media and Varnish - without driving anyone insane. A combined session, technical overview, half-baked solution and hands-on workshop.
Part I: Why Mobile First?
An introduction to the mobile first approach and a quick walkthough of responsive webdesign principles and methods.
Why mobile first
Part II: The challenges: lazy loading & responsive media
A presentation of two core technical challenges for building (Drupal) sites mobile first: Lazy loading of content and responsive media.
Requirements for a Drupal solution
Common approaches for lazy loading?
Different approaches for responsive images.
Pitfalls and alternatives.
Part III: Requirements for a Drupal solution
A presentation and discussion of the requirements for a working Drupal solution for mobile first websites, including lazy, conditional loading of content, adaptive or responsive images that works with both logged in users and Varnish reverse proxy.
Part IV: Hands-on design and development
In which you start out by saying 'Oh, that's easy. You just ...'
Hopefully we can design or - dare we say it - actually build a fully cooked, working Drupal solution for going mobile first.
Bring out the obscure hooks and get your coding chops on!
Jan Willem Tulp is a freelance information visualizer from The Netherlands. He works for clients world wide, such as Amsterdam Airport, Scientific American, World Economic Forum and Popular Science Magazine. During this talk Jan Willem will show some of his visualization projects, and he will detail in on the process behind creating data visualizations.
This session will give an overview how Bojhan Somers and Roy Scholten go about designing Drupal 8. We have a whole new set of challenges ahead of us and this, will give an intro into the process that we follow and the work that has followed.
We will likely cover three topics:
The audience for this session will be primary designers who work on more intense UX projects. But also all those interested what its like designing for Drupal core
The editor experience is somehow a blind spot in a lot of projects.
There might exist a great design for the “frontend”, a lot of efforts go into building a good user experience for site visitors and we also put a lot of work in functionality, but very often we are missing out on usability for editors.
There are a lot of sites that are used extensively by editors and for them the “frontend” is the “backend”. The out of the box functionality just isn’t enough, to make them love to work with Drupal for content management.
In this session I want to show, what modules and techniques you can use right now to design and build for a way better editor friendly interface.
by René Bakx
An introduction on what this thing called 'twig' actually is, how it can help you in creating extendable templates in drupal right now, and perhaps even use the same templates in the future without changing your template code.
As a UX professional you've probably found yourself forced to argue for the importance of UX in a project. You've probably heard people say that UX is of little importance. And as a designer it's not always easy to explain why UX matters. But UX needs to be justified. And it's your job to do so. In this session I will present ways to convince even project managers from hell about the value of UX.
Attend this session to learn methods to visualize and communicate the value of UX and usability. Using these tools and frameworks you will be able to convincingly argue for why UX is critical to a website delivering what its stakeholders expect.
Here is an overview of what you can learn during this session:
If you know what Drupal behaviors are, if you ever added a script to a page or complained that the modules admin page is painful to scoll, this session is for you.
Grids are really old. From the roman camp layout to todays drupal.org layout. After the industrial revolution grids married into modern typography and design and today the we use grids when building web sites.
Responsive design is a catch phrase that you run into everywhere all the time. It's popularity is not entirely without good reason, because responsive design can indeed be a good way of presenting and adapting content from a single source for different platforms (computer, smart phone, tablet).
In this session we'll take a quick look at grids, responsive design and specifically the Less Framework 4.0: how it applies grids to the design. Then we'll try to make up our minds to whether we like this concept or if we'll keep looking for the holy grail...
The practice of design and font-end development is changing.
We have entered a world of multiple devices, multiple capabilities and multiple locations. The practice of front-end development has become one where we have to cope with endless variation and difference.
I want to propose designing in the browser as a means of navigating this new complexity and also as a method to create the beautiful and truly web like designs that the medium has always asked for.
I will argue that our current process of static comps is broken, unhelpful and limiting. Further I will argue that we should design in the appropriate medium to the task of web design. I will propose that this method allows us to create the sorts of designs that the web has always demanded.
The session will then go on to talk about the practical ways in which we can design in the browser. Like any process it has drawbacks of its own. I will talk about ways around these difficulties and tools that allow us the design in the browsers effectively and creatively.
Finally I will outline more generally the type of agile and collaborative design process that designing in the browser allows. I will argue that this approach allows us to bring clients fully into the process of design and allows the creation of beautiful design that both designers and clients can be proud of.
Slides -> http://dl.dropbox.com/u/8289745/...
HTML5 video receives an incredible amount of buzz these days, fueled by debates such as MP4 vs. WebM or Apple vs. Adobe. While producing juicy headlines, these debates do add a lot of confusion to an already difficult area of expertise. This presentation therefore focuses on the practical side of HTML5 video: which browsers support which codecs, what is possible in HTML5 versus Flash today and what is coming in the near future? Coming out of this session, developers will be able to make informed decisions and get started encoding and developing for HTML5 video.
Jeroen Wijering is the creator of the successful JW Player, which has generated millions of downloads since its release in 2005. In 2007, he co-founded LongTail Video, focusing on a hosted video solution that includes encoding, delivery, syndication and advertising.
Drupal has a bad name in terms of Frontend Development. The amount of useless CSS that you need to overwrite in your theme, and the serious case of divitis might at first scare you away. However, with the right mind-set and a few simple tricks you can create Drupal 7 themes that have beautiful HTML and well-organized CSS.
Efficiency, flexibility and maintainability are the keywords for this session. We will not go into the modern techniques such as compiled CSS, of CSS Frameworks, but instead focus on a good basic approach to go from design to theme.
The following steps will be handled:
After this in-depth look at the way of working for Drupal 7, we will have a sneak peak at how awesome theming for Drupal 8 will be.
by Marek Sotak
'Flash is dead!' That statement was repeated too often when HTML5 video arrived. But Flash is not the only solution for cross-browser video.
It is fairly easy with Flash to create animation for the web - be it 2D or 3D. But what about CSS3 transitions, transforms and animations? And are there any other options than CSS3 (WebGL? SVG?)?
Lets re-discover animation on the web.
by Eric Eggert
New web technologies are coming up every day at the moment, but are they accessible for everyone? This talk will take a look at how those technologies care about accessibility and how browsers and assistive technologies handle new stuff. We’ll look into accessibility polyfills and techniques that you can use immediately to enhance your everyday web projects.
Most frontend developers have already heard of Object Oriented CSS, yet it is still sorely under-practiced.
Do your CSS files have overrides and !importants scattered through them? Do they often come in at 3000 lines+ for a regular site?
Tied with good semantic HTML, the Object Oriented CSS approach really is the answer to rapid, lightweight, scalable and easy to maintain frontend code. OOCSS will speed up any front end build, but really comes into its own on bigger sites.
I'd like to talk through my approach to frontend builds and show how OOCSS makes the process so much easier.
I'd also like to talk a bit about CSS compilers and how it is important to have a good understanding of OOCSS methods before jumping into SASS or LESS. Poor CSS practice isn't going to be rescued by a compiler; in fact it can even compound problems by bringing in another layer to debug.
I hope to instill a real understanding of what OOCSS means, why it REALLY matters, and how it's going to make you a better front end developer!
by Alan Burke
So you know you want to use all the latest HTML5 and CSS3 goodness, but those darn browser makers just can't keep up with you.
You don't want to leave users with older browsers out in the cold, so what can you do?
You can use a polyfill.
This session will explain the role of polyfills and how to use them, and why you might sometimes choose not to [hint - performance].
This is the future.
So where's my html5css3responsiveSemanticalDrupal8 site that's easy to put my design on top of?
It has been 15 months since Drupal 7 was released. The html5-css3-responsive is the new black & IE6 is dead & IE7 is getting closer to the grave \m/.
With the mobile browsers hell is coming at us and Drupal 8 is not here yet for several more months - bummer!
So how can we get the Drupal frontend up to speed with all the html5css3responsive awesomeness?
.... Drupal frontend love from <head> to <footer>
This session will be focused around the real-life, nitty gritty dirty frontend solutions & tricks that your mom warned you about & your father told you not to do & developers are afraid to touch cause it might "break".
This is design implementation done right & NOT the way Drupal thinks it should be. We're gonna kill the Divitis & take on the .class war, fix the CSS overload with a BAT, and look goddamn good on the screen, mobile, iPad & lynx (almost kiddin).
This is gonna be extremely hands-on from the header to the footer, licking every template & function we can find - making sure we're getting in there where it's actually itching: *the markup to design implementation.*
20th–22nd April 2012