The document discusses the benefits of designing websites directly in HTML and CSS in the browser rather than first designing in Photoshop. It notes that designing in the browser means the designer is working in the actual medium, everything they design can be built because they are building it, and the client sees the real design from the start. Some tips provided include using frameworks for layouts, starting with content, embracing progressive enhancement, and using advanced CSS techniques while allowing for older browsers.
Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait.
That was an eye-opener, right?
Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project.
CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry.
We'll cover:
- Mobile First
- Adaptive Design
- Responsive Design
- Stand-alone mobile options
- Sass
- Mobile-focused tools
- Compass
- Survival Kit
- Susy
Knowledge about Why HTML/CSS on WordPress?, Setup WordPres, What is Underscores?, Why Underscores?, How to get Underscores theme?, HTML Structure by Underscores, Some major working files for designers, Styling default elements, Alternative of Underscores, WordPress child theme, How to Create a Child Theme, Template Hirachy stucture, Create custom template and more...
How to ensure a long life span for a website?Teemu Suoranta
How can you design and implement a website that can stand the test of time? What are the biggest mistakes in content that leads to hours of manual labor later? How to avoid messing images with well thought out image sizes? How to detect and avoid plugins that will screw you later?
Guest speaker, Teemu Suoranta, works as a web developer at Aucor. There are some stories to be told after some more or less messy imports and redesigns.
Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait.
That was an eye-opener, right?
Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project.
CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry.
We'll cover:
- Mobile First
- Adaptive Design
- Responsive Design
- Stand-alone mobile options
- Sass
- Mobile-focused tools
- Compass
- Survival Kit
- Susy
Knowledge about Why HTML/CSS on WordPress?, Setup WordPres, What is Underscores?, Why Underscores?, How to get Underscores theme?, HTML Structure by Underscores, Some major working files for designers, Styling default elements, Alternative of Underscores, WordPress child theme, How to Create a Child Theme, Template Hirachy stucture, Create custom template and more...
How to ensure a long life span for a website?Teemu Suoranta
How can you design and implement a website that can stand the test of time? What are the biggest mistakes in content that leads to hours of manual labor later? How to avoid messing images with well thought out image sizes? How to detect and avoid plugins that will screw you later?
Guest speaker, Teemu Suoranta, works as a web developer at Aucor. There are some stories to be told after some more or less messy imports and redesigns.
How to ensure a long life span for a website (WPHelsinki 2.11.2016)Teemu Suoranta
How to create a WordPress site that will last and how to avoid mistakes that will come to haunt you later. This was my presentation in the WPHelsinki on 2.11.2016.
Designing & Developing for Content in WordPressdiane_kinney
Wordcamp Tampa presentation on Designing and Developing for Content in WordPress. Leverage design patterns, custom post types and custom field tools to take content to the next level.
Learning by Doing: 10 Lessons in Pushing your WordPress Development SkillsSarah Moyer
In this session, I’ll demonstrate how I pushed my limits in WordPress development by building a custom WordPress slider for a client website. I hope you will be inspired to take on challenging projects even though you might not know the outcome. In this project, I realized that advanced client specs aren’t indomitable; they are catalysts in pushing skills as a person and developer. See talk notes at sarah-moyer.com/presentation-wordcamp-lehigh-valley-2016
Smarter Grids with Sass and Susy...and Wordpress!Michelle Barker
In this talk I’ll look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I’ll cover getting started with Sass and Susy in your Wordpress project, the advantages of using Susy, and some useful mixins and functions to help you create awesome grids.
In this talk I look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I cover the advantages of using Susy, how to get started and some of Susy’s mixins and functions, with visual demonstrations.
A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
A brief history of the canvas element, its graphics capabilities, and a call to action to understand and solve real problems with this amazing built-in tool for desktop and mobile browser.
There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.
That’s the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check what’s going on there for you.
Front End Development - Beyond Javascript (Robin Cannon)Future Insights
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
How to ensure a long life span for a website (WPHelsinki 2.11.2016)Teemu Suoranta
How to create a WordPress site that will last and how to avoid mistakes that will come to haunt you later. This was my presentation in the WPHelsinki on 2.11.2016.
Designing & Developing for Content in WordPressdiane_kinney
Wordcamp Tampa presentation on Designing and Developing for Content in WordPress. Leverage design patterns, custom post types and custom field tools to take content to the next level.
Learning by Doing: 10 Lessons in Pushing your WordPress Development SkillsSarah Moyer
In this session, I’ll demonstrate how I pushed my limits in WordPress development by building a custom WordPress slider for a client website. I hope you will be inspired to take on challenging projects even though you might not know the outcome. In this project, I realized that advanced client specs aren’t indomitable; they are catalysts in pushing skills as a person and developer. See talk notes at sarah-moyer.com/presentation-wordcamp-lehigh-valley-2016
Smarter Grids with Sass and Susy...and Wordpress!Michelle Barker
In this talk I’ll look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I’ll cover getting started with Sass and Susy in your Wordpress project, the advantages of using Susy, and some useful mixins and functions to help you create awesome grids.
In this talk I look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I cover the advantages of using Susy, how to get started and some of Susy’s mixins and functions, with visual demonstrations.
A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
A brief history of the canvas element, its graphics capabilities, and a call to action to understand and solve real problems with this amazing built-in tool for desktop and mobile browser.
There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.
That’s the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check what’s going on there for you.
Front End Development - Beyond Javascript (Robin Cannon)Future Insights
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
The web standards gentleman: a matter of (evolving) standards)Chris Mills
This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperOfer Zelig
We are all flooded with information: blogs, videos, millions of open source projects. In this presentation I share my insights: what are the must-know and must-have tools, frameworks and techniques you can use today (or at least know about) in order to be up-to-date.
Jumpstart Your Web App
Presented by Ari Rizzitano on
July 11th, 2012
Just about everyone has an idea for a web app, whether you want to implement a business tool, found a startup, or just host a fun project. Learn how to tackle design and technical challenges, take advantage of best practices, power through obstacles, and grow your idea into a successful application.
My slides from the BlueGlass LA presentation on WordPress. Geared towards marketers and users (not developers) it gives a good look into strong site management.
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
Presented with Christian Ståhl
Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”.
In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.
Node.js 101
with Rami Sayar
Presented by FITC at Web Unleashed 2014 in Toronto
on September 18 2014, 10:30 - 11:15am
Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io.
TARGET AUDIENCE
Beginner web developers
ASSUMED AUDIENCE KNOWLEDGE
Working knowledge of JavaScript and HTML5.
OBJECTIVE
Learn how to build a chat engine using Node.js and WebSockets.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Node.js environment and basics
Node Package Manager overview
Web Framework, express, basics
WebSockets and Socket.io basics
Building a chat engine using Node.js
Everything Old is New Again: The State of Web DesignMaria D'Amato
Back to the Old School: Device-Independence with Responsive Design
Process: Art, Copy & Code: The New Creative Team
Embrace the Medium: Flat vs. Skeuomorphic Design
OVERVIEW
Twitter Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number 1 project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile). This talk will introduce you to the basics of using Bootstrap and show you how to build responsive web layouts to build your own app.
TARGET AUDIENCE
Beginner web developers
ASSUMED AUDIENCE KNOWLEDGE
Working knowledge of HTML5 and CSS3.
OBJECTIVE
Learn how to use Twitter Bootstrap to quickly build a beautiful, responsive web app.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Twitter Bootstrap basics
Bootstrap CSS basics
Bootstrap responsive layouts
Bootstrap components
JavaScript Bootstrap plugins
Similar to Designing in the Browser - Mason Wendell, Drupaldelphia (20)
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
4. Build Your Design
Twice!
• Once in Photoshop,
then again in markup/css
• Two completely different mediums
with vastly different abilities and limitations
7. That’s just too hard to
change.
• fonts & global typography
• color palate
• "just a few small changes"
translation:You'll have to tweak your whole
document
8. What happens when I
mouse over?
• Can't show interactions well, if at all
• You have to show a client two images just
to show a simple mouseover.
• How do you demo the speed and easing of
a javascript slideshow?
9. That’s not what I
approved!
• Why are the fonts different?
• I can’t see my content below the fold!
• It looks different on my boss’ PC!
• It looks different on my iPhone!
17. Everything you design is
build-able, because you
just built it when you
designed it.
18. What do you need?
• All the browsers
• Text editor
• Graphics Editor
• Firebug, Webkit Inspector, Firebug Lite
• Sass & Compass
• xrefresh
19. Play with the
cool new toys.
Most of that you need can be achieved in CSS3
• rounded corners • rotation and other
transformations
• @font-face
• alpha transparency • CSS animations
with transitions
• text and box • more, obv
shadow
20. Use Photoshop only as
much as you need to.
• break out your image editor for other
things
• Use it to make the graphics you need.
(Not to pretend it's a browser)
21. Client sees the real
thing from the start.
• The design they approve will be the same
as the design you deliver.
• You can demonstrate browser
inconsistencies from the start. Then decide
what to do about them.
25. Sketch and/or
Wireframe.
• This is where you'll come up with your
basic layout and concept
• Use paper, a tool like balsamiq or
gomockingbird.com (or even Photoshop!)
26. Start with content.
• Get as close to the real content your
project will have as you can.
• Placeholder images and text can be used to
help you work quickly, if used with care.
29. 1. Generate your raw
markup from Drupal
• Slower to build your raw markup, because
you need to build the site first.
• More accurate
• Best for simple sites and re-theming
existing sites
• If this is your route your markup may be
more complex but you'll skip the next step.
30. 2. Anticipate Drupal
• use your own markup, and be prepared to
bend Drupal to your will (to a point)
• use snippets from drupal in your markup
(nodes, blocks, views, etc)
• be aware when you're designing what will
become nodes, blocks, and views.
Document these with <!-- comments -->
to help your themer
32. Build the basic layout
from your wireframe
• Use a css framework, at least at first.
Blueprint, 960.gs
• They're well tested and near-proven to
give you the layout you expect.
• Think of them as open source CSS
snippets libraries. Take what you need.
33. More CSS Frameworks
• Typography
• Forms
• Baselines
• Fluid layouts
• Study them and take what you need.
35. Embrace Progressive
Enhancement
• Start with content
• Add layers of css complexity
• Enhance for the latest and greatest
• It's fun & and you'll stay sharp
• All browser makers will support these new features
soon enough
• Use advanced techniques liberally. They're fast,
lightweight, and let you be creative. You can adjust for
old browsers and the “real world” later.