A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
Do your websites adapt to the device or screen on which they're being viewed? Do they accommodate viewing on a smart phone as elegantly as on a 1920-pixel wide monitor? Or a 5000px monitor? Or a netbook?
Responsive Design is the answer. It's a technique that employs flexible grids, fluid layouts, and most importantly - CSS3 media queries that let you change how things are laid out on the screen depending on the screen size (and many other factors), dynamically.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Slide-deck covers what is responsive web design, why use it and a walk-through of The Department of Labor's Ride Safe New York website going responsive.
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
Do your websites adapt to the device or screen on which they're being viewed? Do they accommodate viewing on a smart phone as elegantly as on a 1920-pixel wide monitor? Or a 5000px monitor? Or a netbook?
Responsive Design is the answer. It's a technique that employs flexible grids, fluid layouts, and most importantly - CSS3 media queries that let you change how things are laid out on the screen depending on the screen size (and many other factors), dynamically.
Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.
Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.
But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Slide-deck covers what is responsive web design, why use it and a walk-through of The Department of Labor's Ride Safe New York website going responsive.
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Whitepaper: Responsive Test - A test framework to cover it allIndium Software
The count of applications that are being developed every day is overwhelming. These
applications span across various platforms and devices. Adding to this, there are Operating
Systems and in some cases even hardware to consider. To deliver a completely tested product
becomes a challenge with all these combinations. In this paper, we discuss issues that may
arise in applications across Desktop, Web and Mobile platforms and how best to test them to
ensure quality.
Are you a Designer or a Developer or both? – This talk will explore myths & preconceptions about roles.. And how when we push these boundaries, we can achieve greater things. Because, if you understand what you’re trying to accomplish both technically and visually, you will have fantastic a outcome.
We’ll touch on “crossover” (golden unicorn) topics such as UI, UX, trusting instincts, user testing, wire framing, information architecture, typography, front end structure, form, and the mindset we need to have in order to challenge both sides of our brain.
WordPress is a great place to put this into practice: as its a perfect environment for leaning php & css, but also its surrounding community support helps us achieve greatness.
Weather you consider yourself a Designer, a Developer, or both: this talk is for you.
Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design.
Responsive web design (RWD) can be very good for accessibility but is also poses some new challenges and design considerations to provide an optimal experience for people with disabilities. When done properly, RWD can address many accessibility issues related to low vision and certain mobility impairments. While responsive web design was not created specifically to address accessibility, its aim is to craft sites to provide an optimal viewing experience and easy navigation for all users and thereby address some accessibility issues. RWD enables the website to adapt its layout to the format of the viewing environment through the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Responsive sites adjust to the screen and presents in the most readable and usable way for that particular screen size and format. This can ensure that font size remains readable and at a high resolution for people with low vision. It also keeps interactive elements large and easier to operate for people with mobility impairments. In this session we will review what a responsive website is and talk about the challenges and opportunities for accessibility in regards to responsive web design.
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
This is the slide deck from the workshop given at UI11 on October 9, 2006. This presentation was given with myself (David Malouf) and Bill Scott (AJAX Evangelist @ Yahoo!).
The goal of the course was to teach people the basics of Interaction Design and then how to apply those principles to design using RIA technologies like AJAX and Flash.
UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Whitepaper: Responsive Test - A test framework to cover it allIndium Software
The count of applications that are being developed every day is overwhelming. These
applications span across various platforms and devices. Adding to this, there are Operating
Systems and in some cases even hardware to consider. To deliver a completely tested product
becomes a challenge with all these combinations. In this paper, we discuss issues that may
arise in applications across Desktop, Web and Mobile platforms and how best to test them to
ensure quality.
Are you a Designer or a Developer or both? – This talk will explore myths & preconceptions about roles.. And how when we push these boundaries, we can achieve greater things. Because, if you understand what you’re trying to accomplish both technically and visually, you will have fantastic a outcome.
We’ll touch on “crossover” (golden unicorn) topics such as UI, UX, trusting instincts, user testing, wire framing, information architecture, typography, front end structure, form, and the mindset we need to have in order to challenge both sides of our brain.
WordPress is a great place to put this into practice: as its a perfect environment for leaning php & css, but also its surrounding community support helps us achieve greatness.
Weather you consider yourself a Designer, a Developer, or both: this talk is for you.
Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design.
Responsive web design (RWD) can be very good for accessibility but is also poses some new challenges and design considerations to provide an optimal experience for people with disabilities. When done properly, RWD can address many accessibility issues related to low vision and certain mobility impairments. While responsive web design was not created specifically to address accessibility, its aim is to craft sites to provide an optimal viewing experience and easy navigation for all users and thereby address some accessibility issues. RWD enables the website to adapt its layout to the format of the viewing environment through the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Responsive sites adjust to the screen and presents in the most readable and usable way for that particular screen size and format. This can ensure that font size remains readable and at a high resolution for people with low vision. It also keeps interactive elements large and easier to operate for people with mobility impairments. In this session we will review what a responsive website is and talk about the challenges and opportunities for accessibility in regards to responsive web design.
About four years ago, I wrote a blog post about Web flowcharts design. It was, and still is, very popular. Today, I'm thrilled to publish the long-waited follow-up article: The definitive guide to Web flowcharts.
The new guide is pretty comprehensive. It covers the most common topics about flowcharts design, from basic ideas to visual vocabulary, from examples to suggestions and tips, from tools for drawing flowcharts to templates and stencils.
Find more information at http://dingyu.me/blog/the-definitive-guide-to-web-flowcharts
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
This is the slide deck from the workshop given at UI11 on October 9, 2006. This presentation was given with myself (David Malouf) and Bill Scott (AJAX Evangelist @ Yahoo!).
The goal of the course was to teach people the basics of Interaction Design and then how to apply those principles to design using RIA technologies like AJAX and Flash.
UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution.
This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.
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.
In today's digital age, having a mobile-responsive website is not just a good practice; it's essential. With the increasing use of smartphones and tablets for browsing the internet, a mobile-responsive website ensures that your content is accessible and visually appealing across various devices and screen sizes.
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
Learn Bootstrap 4 Step by Step for Beginners
This Bootstrap tutorial pdf and training material will teach you how to quickly prototype and build responsive websites using Bootstrap 4. You will become familiar with common components, setting up a grid, and how to customize the look and feel. Get your copy at https://bootstrapcreative.com/shop/bootstrap-quick-start/
The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.
Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
Is your website responsive? Know about the benefits that you are losing out; collaborate with an outsourcing responsive website development agency now!
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
There are a number of options when going mobile, and it's not slowing down. Why choose one over the other? What are the strengths and pitfalls? What's right for your customers and users? We'll go over each option, with examples of how you can come to the right strategy around your mobile offerings.
Responsive web design, a technique that allows web designers to create flexible web page layouts that change depending on the screen size of the site visitor, allows us to optimize user experiences for the increasingly variable ways people are accessing the Web.
Similar to Responsive Web Design - more than just a buzzword (20)
This presentation will look at how to build accessible chat windows. Along the way we will explore: how they differ from traditional modals, how to manage focus, how to manage dynamically updating content for assistive technologies and more. The session is designed for developers and coders.
This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
What are accessible names and why should you care?Russ Weakley
This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
This presentation was fro the AllyBtyes event on 21 May 2020. The presentations looks at a pattern for building or reviewing any new UI component – semantics, focusable, keyboard interaction, visible states, accessible name and relationships.
What is WCAG 2 and why should we care?Russ Weakley
A presentation for IAG staff for the "Future is here" event on 6 May 20202. This presentation covers three topics - "What are our legal responsibilities around accessibility?", "What is WCAG?", and "What is inclusive design?"
This ID24 2019 talk will look at a the importance of states (visited, focus, active, checked/selected, open and more) when building design systems. We will explore their relevance, how to maintain consistency and how to systemise when designing at scale.
Creating accessible modals and autocompletesRuss Weakley
In this two-part presentation, Russ will guide us on a deep dive into how to create accessible modals and accessible autocomplete search functions. Along the way, we will look at the problem for different types of users as well as explore how ARIA can be used to improve these experiences. There will be blood, sweat and tears (Russ' words!) but hopefully a happy outcome for all.
Presentation for the Sydney Web Accessibility & Inclusive Design - 30 August 2019
Building an accessible progressive loaderRuss Weakley
This presentation for A11y Bytes May 2019, takes you through how to mark up a progress loader using the progress element. Then, eight tips for making the progress loader accessible.
Accessibility in Design systems - the pain and gloryRuss Weakley
Slides from CodeHeart Design 2018: Building a design system is a painful enough, but how do you add accessibility into the mix? Is it an "up-at-dawn, pride-swallowing siege", or can it become part of the normal work flow. We'll look at accessibility for different roles - such as UX, UI and devs, as well as where accessibility should be injected into the process.
Presentation for OZeWAI Sydney 2018. A walk through of four different methods for making inline error messages programmatically associated. Also covers aria-invalid and aria-live.
Presentation for A11yCamp Melbounre 2018. It all seems so easy, adding a hint or an error to a form field. But what happens when you’re suddenly asked to add pop-up tool tips? Or, even worse, additional information as modals? This presentation will take you through the highs and lows of tool tips and error messages. Along the way, we’ll look at some new ARIA 1.1 attributes like aria-errormessage.
This presentation covers; different types of disabilities, assistive technologies, legal and ethical responsibilities as well as a range of terms such as W3C, WAI and WCAG.
In the old days, many developers looked at complex websites and web applications as a series of individual pages. These days, it’s all about abstracting these pages down to re-usable elements, modules and components which are then documented, designed and built as comprehensive pattern libraries. Pattern libraries can be used as an integral part of the UX, design and front-end development phases. But where should accessibility be included in these different types of pattern libraries? Come on a journey as we explore the pain and glory of baking accessibility into UX, design and front-end pattern libraries.
Building an accessible auto-complete - #ID24Russ Weakley
This presentation will take a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for A11yBytes Camp Sydney 2017 takes a deep dive into how to create an auto-complete search function that is accessible to a range of different users including keyboard-only and screen reader users. Along the way, we will explore important keystrokes and aria attributes that can be used enhance the experience for all users.
This presentation for Inclusive Design 24 (#ID24) explores how to create accessible, usable "floating" labels. Floating labels are where the label moves above form controls based on user interaction.
Creating a Simple, Accessible On/Off SwitchRuss Weakley
Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.
Accessible custom radio buttons and checkboxesRuss Weakley
Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
16. Almost four years later, RWD
has rapidly expanded. New
techniques and ideas are
appearing almost daily.
17. “Testing the top 10,000
websites for responsive
indicators showed roughly
12% of these sites were
responsive.”
http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/
26. “Progressive Enhancement is
the principle of starting with a
rock-solid foundation and then
adding enhancements if
you know user-agents can
handle the improved
experience.”
http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-
how-to-use-it/
27. Now let’s look at Adaptive
Web Design and how it relates
to Progressive Enhancement
30. “Adaptive web design is about
creating interfaces that adapt
to the user’s capabilities (in
terms of both form and
function)...
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
31. “Adaptive web design is just
another term for progressive
enhancement - it takes into
account varying levels of
markup, CSS, JavaScript and
assistive technology support.”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
32. Despite Aaron’s definition, if
you search for “Adaptive web
design” you will get all sorts of
different definitions.
33. One of the better definitions is
by Brad Frost, who described
adaptive as:
34. “Adaptive is creating a single
Web experience that modifies
based on the capabilities of the
device. It’s a singular
flexible experience built
using sound progressive
enhancement techniques.”
http://bradfrostweb.com/blog/post/the-many-faces-of-adaptive-design/
38. According to some, “Adaptive
layouts” are different. They use
a series of fixed-width layouts
that are designed specifically
for different screen sizes.
39. Progressive enhancement
Adaptive web design
Responsive Web design
Responsive layouts
(Fluid grids)
Adaptive layouts
(Fixed-width or semi-fixed
width grids)
48. Let’s use an example where
you want to use a different
navigation for mobile
devices. You might want it to
be simpler and position it in the
footer, rather than the header
of the site.
49. With RESS, we can do this by
providing two alternatives...
such as a wide screen and a
narrow screen header and
footer.
55. “On the new ND.edu we used a
combination of server-side
detection, media queries and
javascript to determine
content.”
http://weedygarden.net/2012/05/a-case-for-ress/
56. “This allowed us to drastically
reduce the amount of resources
that are initially downloaded
and the result is a very fast
mobile experience.”
74. “Mobile First” is about
planning and designing the
entire experience for small
screen devices before wide
screen devices.
75. “Mobile First forces you to
focus and prioritize your
products by embracing the
constraints inherent in mobile
design”.
http://mobilegovwiki.howto.gov/Mobile+First
77. For many Responsive Web
Design projects, I use a
variation on this approach
which is “all screens first”.
78. I try to get the team to focus
on a product that will work at
any screen size (phone, small
tablet, large tablet, desktop) -
not just wide or narrow.
79. The aim is to get teams to
move away from “wide screen
only” thinking.
80. It’s very easy for teams to
accidentally slide back to
“wide screen only” thinking
during a project.
81. For this reason, “Mobile First”
or “all screens first” should be
used through all phases of
the project, from initial
sketches, to wireframes,
prototypes, user-testing,
design and development.
83. In mid 2011, I worked on two
responsive web projects
back to back.
84. This gave me an opportunity to
observe and compare different
two RWD processes in action.
85. The first project was to design
and develop a complex
Responsive web application
for a large “Energy company”.
86. We used the “Mobile first”
approach throughout every
phase of the project.
87. Every decision was made
based on how the web
application would work on
small screens.
88. Because of restricted screen
real estate, the layout and
functionality was focused and
direct.
89. When it came time to work on
the wide screen variations
during each phase, it was
incredibly easy as each
screen had already been
optimised.
90. For the second project, I was
asked to do the front-end
development on a non-profit
Responsive website. When I
came on board, the team were
in the middle of the design
phase.
91. While the wireframe phase had
used “Mobile first”, the design
phase did not. The team spent
weeks focusing on the wide
screen designs only.
92. Once the wide screen designs
were fully signed-off, the team
then moved on to narrow
screen designs.
93. As you can imagine, many of
the decisions made for wide
screen did not work at small
screen.
94. Aspects of the wide screen
layout and functionality had to
either be heavily adjusted for
narrow screen, or revisited at
wide screen.
95. A lot of this pain could have
been avoided if they had
maintained a rigorous
“Mobile first” approach
throughout the design phase.
107. This is where you let the
navigation wrap as needed.
108. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
109. home about us services
portfolio contact us login
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse
molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait
nulla facilisi.
113. At small screen, the header
contains a simple link pointing
to the footer navigation. The
footer contains the
navigation.
114. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
115. home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
119. At small screen, the navigation
is hidden away and replaced
with a link, icon or both.
When users click on the link/
icon, the navigation slides
open, pushing the page
contents down.
120. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
121. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
122. home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
126. Similar to the toggle approach,
but the menu does not push
the page contents down.
Instead, the navigation sits
over the top of page content.
127. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
128. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
129. Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
home
about us
services
portfolio
contact us
login
Site navigation
133. Similar to the toggle approach,
but with additional ability to
open and close multiple levels
of navigation.
134. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
135. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
136. home
about us
services
portfolio
contact us
login
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Site navigation
137. home
about us
our history
our staff
contacting us
where to find us
services
portfolio
contact us
login
Site navigation
139. Pro: Keeps the navigation in
place, which is good for users.
Elegant.
Con: JS dependent. Some
options do not support
keyboard access. Can be
confusing for some users.
141. At small screen, the navigation
is converted into a select
menu.
142. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
143. Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Site navigation
147. At small screen, the navigation
is hidden away and replaced
with a link, icon or both. When
users click on the link/icon a
tray slides in from the left
and the main content is
pushed to the right.
148. Users can close the tray and
the content slides back over to
the left.
149. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
150. home
about us
services
portfolio
contact us
login
Close
Lorem ipsum
ut laoreet dolo
tation ullamco
iriure dolor in
facilisis at ver
delenit augue
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
154. In early 2013, I worked on a
client site where we wanted to
test three different navigation
methods to see which would
be most intuitive at small
screen.
155. The method we chose where:
The footer anchor
The toggle
The select menu
156. Key target audiences were
identified, and 30 users from
these target audiences were
chosen to take part in the
testing process.
157. These users did not know that
the primary purpose for the
test was to watch them
interact with the different
navigation methods.
158. Each user was asked to
perform a range of tasks on
three different sites. Each site
had a different menu pattern.
159. At the end of the process,
users were asked to rate the
difficulty of each navigation
method.
160. Based on our observations
and user ratings:
1. The footer anchor method
and select menu confused
many users
2. Most users preferred the
toggle menu
183. Despite our recommendations,
the client decided to go with
an icon only because it
“looked neater”, and “lots of
other sites use these icons
now”.
186. It allows us to build sites that
work across a wide range of
devices without a lot of the
cost or effort associated with
full mobile or RESS sites.
187. Just as with any website or
web application, with
Responsive solutions we have
to avoid making assumptions
about our users.