This document provides an overview of responsive web design (RWD) for designers. It defines key RWD terms and discusses challenges like managing the design process for multiple screens. It offers tips on where to start with RWD, such as designing for a 768px screen first. It also covers working with writers, bosses, and coders on RWD. Recommended resources on RWD are provided at the end.
Running Great Design Reviews With Clients & PartnersCraig Peters
No matter how great your designs are, the way you communicate with your clients/business partners can make or break your engagement, especially as design challenges and organizations become more complex.
But what actually makes some meetings go well, and others not? We’ve heard “Be storytellers,” “Provide the right context,” and “Set expectations,” but what does that look like in practice?
I’ll provide real-life examples of how we’ve done this in our presentations for client engagements. We’ll include examples of our fundamental concepts we live by. No surprises. Over-communicate. Tell them how to be and what to do in the meeting. Design every slide of a presentation, not just the “designs.” Tell a story. Assume your clients have no idea what your meeting is all about (put yourself in their shoes).
It always goes better when you’re well prepared; we’ll help you get there.
Running Great Design Reviews With Clients & PartnersCraig Peters
No matter how great your designs are, the way you communicate with your clients/business partners can make or break your engagement, especially as design challenges and organizations become more complex.
But what actually makes some meetings go well, and others not? We’ve heard “Be storytellers,” “Provide the right context,” and “Set expectations,” but what does that look like in practice?
I’ll provide real-life examples of how we’ve done this in our presentations for client engagements. We’ll include examples of our fundamental concepts we live by. No surprises. Over-communicate. Tell them how to be and what to do in the meeting. Design every slide of a presentation, not just the “designs.” Tell a story. Assume your clients have no idea what your meeting is all about (put yourself in their shoes).
It always goes better when you’re well prepared; we’ll help you get there.
Building immersive experiences: Usability you can really useX.commerce
Combine the finer points of design with existing development know-how to craft user experiences for multiple platforms. Work through a real-life design challenge and apply design principles, patterns, and a proven process to create an immersive experience. This is an interactive workshop to jump start your next project.
Nebraska Trainer's Institute eLearning Presentaiotneaselsolutions
This presentation covered a few eLearning development tools as well as some mLearning Strategies. It was delivered during a ASTD Nebraska 2012 Trainer's Institute session.
Prototyping Interaction with Video ScenariosDavid Sherwin
Aaron Rincover and I presented this workshop at Seattle Make-a-Thon on November 6, 2010, sponsored by IxDA Seattle, AIGA Seattle, and Interact.
When designing interactions that transcend singular devices and form the basis of device ecosystems, wireframes just don’t cut it. Much of the interactions you’re looking to define and refine are evoked through motion, sound, haptics, and other variables that can’t be easily documented without "dancing about architecture." In these situations, it’s often most effective to create video scenarios that describe how an interaction would happen out in the real world. These scenarios are useful not only for explaining ideas to your clients—they’re an effective way of capturing prototypes to see if they make sense and feel real.
Over the course of this workshop, we explored the various flavors of video scenario that you can create, depending on the design problems you’re seeking to solve. Then we’ll spent the balance of our time working in small teams to create a short interaction vignette about gestural input to activate a teleportation device.
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12
Lavacon 2014 responsive design in your hatNeil Perlin
New to responsive design concepts in general? How to do responsive design in MadCap Flare and Adobe RoboHelp? Take a look at my presentation from Lavacon 2014.
Measuring Web Performance - HighEdWeb EditionDave Olsen
Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
My talk at the @media Ajax conference in London in November 2007 about the non-technical steps you can take to make JavaScript and Ajax work for larger teams.
Still trying to get your head around responsive design? This presentation of basic terms, concepts, and examples can help. Useful for introducing responsive design thinking to UX professionals and departments.
PROPS: to Ethan Marcotte for his book, "Responsive Web Design" (available for sale on Amazon) from which this presentation drew heavily.
A talk given to the AOP Product Group, discussing the challenges with producing digital magazines that work across all devices. The problem is not delivery, but workflow. I talk about some of the design thinking and techniques that we have used to address this problem with Padify.
Building immersive experiences: Usability you can really useX.commerce
Combine the finer points of design with existing development know-how to craft user experiences for multiple platforms. Work through a real-life design challenge and apply design principles, patterns, and a proven process to create an immersive experience. This is an interactive workshop to jump start your next project.
Nebraska Trainer's Institute eLearning Presentaiotneaselsolutions
This presentation covered a few eLearning development tools as well as some mLearning Strategies. It was delivered during a ASTD Nebraska 2012 Trainer's Institute session.
Prototyping Interaction with Video ScenariosDavid Sherwin
Aaron Rincover and I presented this workshop at Seattle Make-a-Thon on November 6, 2010, sponsored by IxDA Seattle, AIGA Seattle, and Interact.
When designing interactions that transcend singular devices and form the basis of device ecosystems, wireframes just don’t cut it. Much of the interactions you’re looking to define and refine are evoked through motion, sound, haptics, and other variables that can’t be easily documented without "dancing about architecture." In these situations, it’s often most effective to create video scenarios that describe how an interaction would happen out in the real world. These scenarios are useful not only for explaining ideas to your clients—they’re an effective way of capturing prototypes to see if they make sense and feel real.
Over the course of this workshop, we explored the various flavors of video scenario that you can create, depending on the design problems you’re seeking to solve. Then we’ll spent the balance of our time working in small teams to create a short interaction vignette about gestural input to activate a teleportation device.
How well do you think your product team takes what they learn from their users and puts it into the next iteration of the product? How well does your team come to a common understanding of what the next iteration of the product will look like and then build a product that reflects that common understanding?
These two problems — improving your product with user research and effective team collaboration — can both be solved with a design tool called User Story Mapping.
These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12
Lavacon 2014 responsive design in your hatNeil Perlin
New to responsive design concepts in general? How to do responsive design in MadCap Flare and Adobe RoboHelp? Take a look at my presentation from Lavacon 2014.
Measuring Web Performance - HighEdWeb EditionDave Olsen
Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
My talk at the @media Ajax conference in London in November 2007 about the non-technical steps you can take to make JavaScript and Ajax work for larger teams.
Still trying to get your head around responsive design? This presentation of basic terms, concepts, and examples can help. Useful for introducing responsive design thinking to UX professionals and departments.
PROPS: to Ethan Marcotte for his book, "Responsive Web Design" (available for sale on Amazon) from which this presentation drew heavily.
A talk given to the AOP Product Group, discussing the challenges with producing digital magazines that work across all devices. The problem is not delivery, but workflow. I talk about some of the design thinking and techniques that we have used to address this problem with Padify.
Building Drupal sites mobile first with lazy loading, responsive media and Varnish - without driving anyone insane.
A combined session, technical overview, and outlined solution.
Includes the notes from the workshop at the end.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
Technoblade The Legacy of a Minecraft Legend.Techno Merch
Technoblade, born Alex on June 1, 1999, was a legendary Minecraft YouTuber known for his sharp wit and exceptional PvP skills. Starting his channel in 2013, he gained nearly 11 million subscribers. His private battle with metastatic sarcoma ended in June 2022, but his enduring legacy continues to inspire millions.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
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.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
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.
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.
6. Requisite RWD freakout photo
(Borrowed from David Blooman’s @dblooman Blog Post:
http://mobiletestingfordummies.tumblr.com/post/
20056227958/testing)
20. Topics
The current Resources Getting
state of RWD you have Started
now
Managing You Testing
Your Design + Writers
Process + Bosses
+ Coders
Extra Credit
30. Start with
one size.
So you can focus on
the important stuff.
31. By the way
tart with New products, like
one size. Adobe’s Reflow are
trying to solve this
with variable-canvas
design tools.
you can focus on
important stuff.
38. 768 It’s “hardware” relevant.
It’s close enough to 800.
It helps you establish your
desktop style.
It’s tight enough to make
you think ahead to phone.
39. About pixels.
When we design, we’re
thinking about virtual pixels.
40. About pixels.
“Real” “Virtual”
Pixel Retina Pixel
These aren’t your pixels.
50. Caution Words
“Rollover” “We’ll fix “Add
that with another
Javascript.” breakpoint.”
“Pin” or “Make it “There’s no
“fixed smaller” or device for
position” “Limit word that case.”
count”
56. Don’t forget about floats. They are not
on the grid, but responsive friendly.
57. What future are you
making for yourself?
Managing monolithic
pages.
Curating a system of
blocks that just work.
58. What a block knows.
A default layout behavior.
Any “family” block behaviors.
Any special device behaviors.
How to relate to other blocks.
If it might contain other special blocks.
60. Laying out
different states.
Mock up separate Wireframe the
layouts for each phone, then mock
major screen up the desktop.*
Lay out just one Draft phone views in
and sit very close the margin of your
to the coders. layouts.
Drew Clemens, Smashing Magazine. http://uxdesign.smashingmagazine.com/2012/05/30/
design-process-responsive-age/
61. How big do you let
your desktop get?
Depends on how much time you have.
Giant layouts require special care too.
62. Do you need a
“desktop” view at all?
Nike.com has
one, fluid “big
screen”
layout.
64. Create a semantic language that you
and your writer can share:
Headlines
Summaries
Rich Text Body
Call to Action
Sidebar
Merchandizing
Callouts
...
78. Retina
Do you need an alternate image?
Actual Size. 1024x768 (scaled).
90% JPEG 0% JPEG (!)
95kb 44kb
http://filamentgroup.com/lab/rwd_img_compression/
84. If you don’t specify
what you’ll support,
you’ll have to support
everything.
85. Support.
About 15 devices you will strategically support but will not test.
If someone reposts an issue, you’ll look into it.
Test.
5-7 devices you plan
to fully support and
test thoroughly.
Targets.
3 most-
important
devices you
keep close
during design.