What I thought/experienced/noted…
DrupalCon was really good, I participated on a great workshop and the sessions were in majority entertaining, informative and really good to learn new things or reinforce concepts already known. (Of course, in any conference there are a few exceptions… some boring sessions and some really bad presentations, but thankfully they were just a few.)
Advanced views
Presented by Johan Falk
Link to conference schedule of this course.
Main screencast from NodeOne website (before the course): http://nodeone.se/blogg/learn-views-with-nodeone-part-1-overview
Read the following related to this course:
Blocks: you can click ‘show blocks’ and you can see them highlighted.
Interesting modules: token, transliteration, Pathauto, CTools, Views, Panels, References, Masquerade – be sure to read the description to know more!!!
Check: “display suite” for more panel and views configuration
Instructors: Johan Falk (Itangalo), Hagen Graf (hagen), Roel De Meester (demeester_roel).
Keynote – the state of Drupal
Presented by Dries Buytaert
Link to the keynote video
Drupal biggest opportunities: substituting legacy systems, IT cutting costs, mobile
Big vision: Flexibility, Scalability, Reach.
Competition: WordPress, Joomla, Sharepoint, TYPO3
The roll out of Drupal 8 from 7 will happen only if critical bugs are less than 15 and major bugs/tasks are less than 100. Trying to reduce thresholds to balance D7 and D8.
Drupal 8 initiative priorities: Native html5/css3, media/asset handling; usability ease of use; mobile support wysiwyg editor; better apis; configuration management; content import/export; content staging.
Dries Buytaert – @dries – http://butayert.net
The Path to a Mobile Drupal: Techniques, Tools and Failure
Presented by John Albin Wilkins
Link to the session video and description
Other Links:
Mobile the traditional way:
Responsive Web Design (Hicksdesign)
Check Hicksdesign website and scale the browser to see it working… notice the different rendering of images/paragraphs/divs, etc.
A list apart article: responsive web design
1. flexible grids
2.flexible images
3. CSS3 media queries
Adapttive Design – developed in response to Responsive Design.
1. CSS3 media queries
2. fixed layout sizes
Flexible grids:
use perentages to set grid sizes
.content{width:62.5%;} //5 grids
.sidebar{width: 37.5%;} //3 grids
percentages allow grid to grow/shrink with the screen size
target/content=result
eg (5 grids)/(8 grids) = 62.5%
600px/960px=62.5%
Flexible images
use max-width to constrain images within the flexible grid.
img, embed, iframe, object, video{max-width:100%;}
CSS3 media queries
with css2 media types we could target different classes of devices: print, screen, handheld, all
with css3 media queries we target device capagilities
[type] and ([query])
all and (max-width: 768px)
.info Files (Drupal)
stylesheets[all][] = css/print.css — move your media types and queries inside your css files
@media all and (min-width:480px){
put all your style here;
}
Few (monica’s) links for inspiration:
Two types of breakpoints
device breakpoints (unnatural):
ex: 320px iphone in portrait mode, 480px iphone in landscape mode 768px ipad in portrait mode, 992px – small laptop (minus browser chorme) 1200px large desktop
design breakpoints (natural):
“Devices will change, follow your design”
Revenge of the Meta Tags (mobile device zooming)
check metas: ‘viewport’, ‘MobileOptimized’ content width, ‘HandhelFriendly’ content true
Browsers not supporting CSS3 Media Queries
IE6-8 – Respond.js (https://github.com/scottjehl/Respond) — insert inside IE conditional comments
Mobile First! – at least have one design outside media queries, the idea is to use mobile first.
Loosing 80% of the screen make you focus!!! just put what is really interesting/relevant/important first
Image Handling in Drupal
Zen 7.x-5.x
Responsive panels layouts, respond.js, sass (CSS preprocessing), html5
Check palantir.net and resize browser (it is in Drupal)
Speaker’s links:
Web Typography & Drupal: Putting Arial Out To Pasture
Presented by Jason Pamental
Link to this session video and description.
Didn’t go to this session but I wish I had gone… the next one I actually went was a bit boring… (probably because of my lack of knowledge, don’t blame the presenter!)
From: http://thinkinginpencil.com/
References related to the above:
Easy Drupal Hosting Lifecycle: Local Dev, Production Deploy, Cloud Scale, and Sleep Well
Presented by Barry Jaspan
Link to description and video of this session.
Barry Jaspan @bjaspan (barry.jaspan@acquia.com)
Acquia Dev Desktop also runs like xampp (??? this I didn’t get it, would check presentation later to understand or send him an email asking about)
Mostly saying about DevCloud, which is easier to push.
Said that Acquia is recruiting, check acquia.com/careers
Forensic Theming: Key Techniques to Building Effective Drupal Themes
Presented by Emma Jane Hogbin
Link to video and description of this session.
My first time at DrupalCon and I got a book Front End Drupal from her! (thanks Emma Jane!)
Links:
She will usually change one tpl.php ()
Tools: css editor, firequeries, webdeveloper, ie web developer, firebug, sweaver
Devel/Themer: overlay on top of page, “point, click, analyse”. Also give info about the template file you are working on.
Drupal (layout) Modules: context, display suite, panels, omega, tao
Emma Jane Hogbin is author of:
Theming API
Presented by Rolf van de Krol
Link to this session video and description.
He started talking about the theme function call.
Found slideshare for this session at: http://www.slideshare.net/rolfvandekrol/theme-api
Links – theme hook, it will give a list of links and will be themed as a list of links. On array is the list of links itself and with the titles on it.
On the node you can also find a path to the template.
Template will override the default from Drupal.
Preprocess and process functions
Get the variables in the pipeline and change them as necessary (???)
gets the variables array as parameter and change the variables array and you can extract the values more easily like the ‘title’ value.
Templates, then modules, then themes pre-processing (preprocess use for any template, preprocess_node only use for the node template).
Inside the node array instead of have a type theme, was found a ‘theme engine’, so the engine actually find the template files for you, you don’t have to specify them yourself. PHPtemplate – default template engine in Drupal.
Pattern: node– (dash,dash)
If engine find these templates on site: page.tpl.php, node.tpl.php and node–page.tpl.php (is a special case of node)
mythemes_lnks__comments (mythemes will be ignored, a function links__comments will be created, if you don’t define the function it will use the default from the core).
If you are really interested in this topic I recommend checking the video for this session and analysing the slides on slideshare since it went a bit fast to follow up everything.
Take Full Control of Your Site Layout with Display Suite for Drupal 7
Presented by Kristof De Jaeger and Jan-yves Vanhaverbeke
Link to this session description and video.
@swentel drupal user 107403
@janyves drupal user 591438
Maintainers of field_group, sweaver, imagecrop
Demo for this presentation http://dsd7.customsource.be
Philosophy of Display Suite
manage your site layout from one central place, bridge the gap between themers and developers, make template files unnecessary, no php code (reduce danger of exploits), focus on ease of use, portability and manageability; not a css tool!
Modules: Display Suite, Extras and Search Display
Really good for dragging and dropping your layout without having to mess with Css, where to put, etc. (the basic way, more specific layouts you can tweak with the style). Very nice to style some teasers with images, etc.
Display suite has other view modes. You can also go on Page: Row style options and use individual views for each item on your page.
Extras module: field templates, regions to block, contextual links, page title options, switching view modes, views displays (templates and fields) and more.
If you don’t use panels, the extras/display suite could be a good replacement for panels.
“A beautiful search”
override search result pages for Node and apache solr
search display allows to override the search display of the search.
Use page control with panels and content control with Display Suite.
Performance
always a concern, D7 was rewritten from ground up, views field API fields, install drupal.org/project/entitycache
References:
Keynote: The Future of Social Media – a historical perspective
by Tom Standage
Link to video of this session
Truly enjoyable talk, with some funny moments!
“The Roman used laptops and tablets”
Social network in Roman era (scribes – enabling the infrastructure, scrolls)
Romans writing on walls “Gnaeus Alleius posted on your wall” (messages, adverts, graffiti)
St Paul used social media, ‘open letters’ (know as epistoles)
‘Scroll the news’ like the old times…
“New blog post from Martin Luther” pamphlet distributed getting ideas against selling indulgences to get a piece in heaven. Traffic stats when something was reprinted and spread, difference between german and latin letters to reach clericals or general public.
Coffee houses in England inspired origins of the open source movement (environment allowed discussion, exchange of ideas, debate).
Multilingual Drupal Solutions: Use cases and modules
Link to the video: http://london2011.drupal.org/conference/sessions/multilingual-drupal-solutions-use-cases-and-modules
Presented by Florian Loretan and Jose Antonio Reyero del Prado
They have an international discussion going on, using hashtag #dci18n on twitter.
Why multilingual? focus on audience, but not easy because some things don’t translate well or have different meanings (cooking and baking -> cousine cousine (French))
Localisation is only associating a place to something.
- Use case #1 simple multilingual blog: drupal.org/project/i18nblog (simple multilingual blog)
- Use case #2 multilingual brochure site (wunderkraut)
Publishing options > Multilingual support > enabled, with translation
(check isomething sync module to check which parts will be translated or not – maybe an image don’t, don’t duplicate). Same, check permissions that maybe multiple users can translate the website, so need more people.
Drupal automatic recognises which menu item belongs to which language and only show the correct menu when the language is selected.
- Use case #3 multilingual community (Drupal documentation to be translated, for example)
Different setup, get a term and translate each individual term and possibly the whole meaning still would stand.
Contact info:
Jose A. Reyero – reyero.net – @josereyero
Florian Loretan – wunderkraut.com – @floretan
Creating and measuring the user experience
Presented by Jeff Noyes
Video for this presentation: http://london2011.drupal.org/conference/sessions/creating-and-measuring-user-experience
PDF for this presentation.
He gave an example of bad user experience if you have a Microsoft Word interface with all toolbars turned ON, leaving only 20% of space for typing… and it should be the opposite, 80% focus on writing.
IDEO video – example of redesign of the shopping cart
“One conversation at the time”. “Wild ideas”
Focus caos… loads of posts with ideas, voting on the ideas that are cool but also doable.
“Fail often in order to succeed sooner”
Ideas: child safe, baskets to fast shop, scanner to add products, wheels that allow car go sideways, after check-out basket stays in the store and bags are hooked on the frame
IEEE study ‘why software fails’, lack of requirements, fixing error after something was manufactured (100x more cost after something was actually manufactured to fix a problem).
REMEMBER the audience!!! you have to remember who you are designing for, what are you designing, why? which problems they have.
To find the right solution (the “How”), we
need to prioritize the features we invest in
(the “What”). To determine our priorities, we
need to define the problem (the “Why”). To
define the problem, we need to identify the
intended audience (the “Who”).
– Whitney Hess, Happy Cog
How to know the audience and the problem (Who and Why):
- contextual inquiry (field research in natural setting)
- surveys
- interviews with target users (check views3)
- usability tests
- analytics (Google Analytics, Crazyegg-have heatmaps and scrolling, also search criteria- etc)
What:
- design principles
- ideation
- task flows
Some interesting online tools: http://www.lucidchart.com/ and http://www.mindmeister.com/
- greyboxing (really leave as grey boxes, avoid divisions, number of items on titles, etc)
- storyboards – sequence of events (views project, map general flow of the 80% use of the tool)
- wireframes (not usually helpful from a user perspective)
- prototypes (clicable version of your design, can be high/low fidelity)
Test / Validade
- moderated test (someone guiding the user through tasks)
- self-moderated test
- static image, self moderated test (user will be presented an image and get feedback on what’s stand out, etc)
- navigation tests (focused on the information architecture of your site)
- diy testing (have to keep in mind: target audience, be unbiased, listen more than talk
http://flavors.me/jnoyes
Don’t Design Websites. Design web systems!
One of the best presentations in my opinion!
Presented by Todd Ross Nienkerk and Adam Snetman
Link to the session and video presentation
PDF of this session
Today’s websites are really websytems
Designers determine the site’s functionalities… (big responsibility!)
Cannot paint a house without building it… architecture is necessary first.
- Define the site
- Gather goasl and requirements
- Create personas (audience)
- What is the content and how would be organised? (content types and site map)
- usability testing
- choose your platform
- translate everything into drupalspeak if you choose this platform (to map to its structure from wireframe)
Check Samantha Warren (and also check mood boards – collage and style tiles – elements of inspiration, sample colours)
Really liked the style tiles!!!
bit.ly/mood-boards
bit.ly/style-tiles
Example of the redesign of the logo, then site.
Check the goals, logo, typography, imagery, catch phrase, grid, experience.
Design on grid
960 grid, check the module, etc…
Stark theme is default, included in core.
understand the source code….
The trick to find the modules you need…
textformatter module, check! lullabot.com/ideas module monday blog series to check popular modules or reviews. drupal.org/project/modules sort by most popular for easiness
Minimize templates (design for change): less maintenance, consistent styling, specify the rules and all elements that we need functionality before implementation itself, remember architecture…
Check navigation levels, how many levels you can have?
‘the site you design today will change tomorrow’
The designers are the primary architects
check bit.ly/drupal-balsamiq
Drupal as base system for your iPhone, Android, iPad apps
Presented by Sumit Kataria
Video for this session
PDF of this session
This session is about building native iPhone/iPad/Android applications using opensource web based technologies (http://www.appcelerator.com) with Drupal as base system to manage content, users, views, permissions etc.
Some iPhone/Drupal stuff Sumit wrote in past: http://civicactions.com/blog/sumit
Slides: http://goo.gl/5xZmP
Tool they choose: Titanium http://appcelerator.com (major brands choose titanium)
Free framework which allows build apps for phones, apps, desktop (90% of code base) get native apps
drupal.org/project/services (services APIs gives the end-point to make request and get data out of it. Layers: services, serves, authentication layer).
Drupal will have data, users and services api, TI network api will gather that and then compile to the platform. (example: drupalize.me)
I thought that with Titanium you could actually develop for iPhone/iPad independently of platform but apparently you still need a Mac for that.. 🙁
However, good idea, you can use your Drupal site to contain all the information and structure of the application and you just make calls to the nodes and get the content. Storage of videos still on Drupal (is the app only streaming?)
Keynote: Designing the Sustainable Web
by The Web Standardistas
Link to video and description for this session
I thought it was worth it to include the session description here, since it was succinct enough and also very relevant to my interests:
The web is evolving. Fast. As designers and developers working in this volatile medium – one that is characterised by a relentless pace of change – we need to consider strategies that deliver a sustainable web that exists beyond the here and now.
This keynote will focus on how, by marrying fundamental web standards with timeless design principles, we can create beautifully designed user experiences that embrace the full range of emerging technologies at our disposal. HTML5 and CSS3 offer today’s designers and developers a platform on which to build sustainable web presences for tomorrow. In short, to create a sustainable web – one that exists across a growing number of devices – that is designed not with short term goals in mind, but that is built from the ground up with longevity as its driving force.
We discuss how a standards based approach that is forward looking, whilst embracing classic design principles, can ensure wonderful user experiences that exist outside of the latest trends and live on in our users’ imaginations.
We both believe great design and enhanced user experiences go hand in hand:
- Build a solid platform, embracing emerging standards, ensuring maintainability moving forward is pain free;
- Apply fundamental and timeless design principles to ensure wonderful user experiences, experiences that exist outside of the latest trends and ensure a longer shelf life; and
- Deliver efficiencies (via 1) and marketability (via 2) to satisfy the business people.
The Web Standardistas
In addition to their role as The Standardistas, Christopher Murphy and Nicklas Persson teach interactive design at the University of Ulster at Belfast, where they have been active in promoting a web standards-based curriculum.
As tweed-clad duo The Standardistas, they write regularly on standards-based web design and the importance of improving web design education. Their first book, which extols the virtues of A Web Standardistas’ Approach, has received widespread praise for its practical and hands-on modus operandi. In addition to this they have been invited to write for, amongst other publications: 24 Ways (http://j.mp/startonpaper), The Manual (http://j.mp/designingthemind), and .net magazine.
In addition to speaking regularly at conferences worldwide, they run workshops and masterclasses, teaching the principles of design, both on and off the screen.
My notes:
Design for multiple devices (desktop, tablets, mobiles)
Content shifting
Secret formula, not sprinkles, they can be used to add for flavour
Check: grids, ratios, typography, semantics
Remember of the 50/50 of the iceberg, design and code
Initial web was already responsive (no styling in the beginning), tables were used for styling instead of their original purpose.
Zen garden starting the show of content and design separation.
Seriously good resources below!
Jan Tschichold typography.
Check book: Grid systems in graphic design
hierarchy, composition, typography, semantics, device independence, openness.
Check Designing the invisible (a practical guide), also Josh Brewer website, Build conference. Check The Grid System website. Also check cognition.happycog.com (it is a responsive website) and Naomi Atkinson, Dan Rubin and Ryan Taylor.
Surveying the landscape, the secret formula, the markup and design timelines, a marriage made in heaven.
@standardistas
nicewebtype.com – rich typography – Tim Brown
Adaptive, Responsive, Mobile First and Drupal theming for the future with HTML5, CSS3 and Omega
by Jake Strawn
Link to video for this session
Really great presentation and some good resources (check link for session above).
This session will introduce you to Adaptive Design and Responsive Layouts and how you can implement designs and themes that will work on ANY device without the need for multiple versions of a site all with different themes and designs.
@himerus
Mobile first: it is the common (minimum) denominator.
One reason for mobile first: mobile is exploding!
Responsive web design: alistapart.com/articles/responsive-web-designs
www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means
Theme for Drupal – Omega html5 – media queries for 3(?) different sizes 1200, 960 and ….
Of Constraints and Capabilities: applying systems thinking to design the ideal experience
by Dante Murphy and Angel Brown
Link to video and description of this session
PDF of presentation
“Design must convey the essence of a device’s operation”
Recommended books: The design of everyday things; The laws of simplicity book and website (John Maeda);
Idea of offline capabilities: tube system – longer distances, related system: buses for shorter terms. Walking signs (tourists/info).
Appearance: impacts how people perceive and also how they feel.
Constraints are good to be able to start and stop.
“Designs depends largely on constraints”
– Charles Eames
Theory/mental/psychology term FLOW (challenge activate your capabilities).
‘If you wait for ideal circumstances in which you have all the information you need (which is impossible)…
‘Not my problem’ self imposable contrains
@dantemurphy @angelbrownuk
Making your theme scale with your brand
by Maarten Verbaarschot and Terrence Kevin O’Leary
Link to video and description of this session
Reduce power of theming from editors/project managers and leave it to the themers/designers. Create and use personas (google it). The master theme document (chapter three website – http://www.chapterthree.com/)
Groups at Drupal: j.mp/markupguide
Sass compiles the code once you import the images with @import all (???? check)
Principle: save time, stay focused, do things properly
News and interesting articles that came out from twitter or talking to people:
