Responsive web design

•

2 gostaram•758 visualizações

Matt Herzberger

This is a presentation about creating sites using responsive web design

Tecnologia Design

Responsive web design
Design once and done

Matt Herzberger
FIU Web Communications

In the long long ago... 1990s

Best viewed in Internet
Explorer
800 X 600

Now we have to deal with
this

http://bradfrostweb.com

The post PC era

http://www.ﬂickr.com/photos/adactio/6152947625/

Here’s what we want

http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/

How?
Not an app, not a mobile site

RESPONSIVE
WEB DESIGN
(RWD)
AKA somewhat interchangeable (NOT REALLY) = Adaptive, Future Friendly,
Responsible, Progressive enhancement, Mobile First

What is RWD?
Websites and apps that are sustainable and future
friendly
We can’t design a new site for each new device,
we should build a ﬂexible adaptive site that can
work on each new device
1.Flexible grid layout
2.Flexible images and media
3.Media Queries

How do we do RWD?

Start with the main layouts (Desktop, tablet, mobile -
breakpoints)
Be more ﬂexible about your design, it’s about
proportions not pixels
Design, code, repeat... your plans may not work out in
the browser

Quickstarts aka frameworks

Twitter bootstrap
Zurb Foundation
Skeleton, Less, 320 and up, Frameless, Gridless, and
many more

Content is no longer king,
it’s King, Queen and Prince

More relevant than ever

http://xkcd.com/773/

Content for RWD
Rethink (headers, navigation, search bar, call to action)
Eliminate unnecessary things
Make structured content, not a big dumb WYSIWYG
think XML
Content should be ﬂuid
Content should be consistent across all devices
Create once, publish everywhere

Gotchas / issues
Images
Videos
Typography
Content
Menus / navigation
RESS / server = performance
3rd party content / widgets

Higher ed examples

Higher ED RWD
Directory
http://go.ﬁu.edu/eb2
Mobile in Higher Ed
http://go.ﬁu.edu/eb3

Mais conteúdo relacionado

Destaque

FIU Web Content Management System (CMS)

Web Communications at Florida International University

Do you have lots of web people on your campus? Feel like there are no cohesive bonds? Even in our siloed higher ed culture, it just takes a small dedicated group to rally the troops. We will explore how to build community on a campus through various different approaches including creating a university web group to provide leadership, idea exchange and learning opportunities for web professionals and others around campus. Work to create collaborative web policies that will enable people to do things following best practices. Create a culture of open data so people will embrace the use of central tools. Blog about the state of web on campus and keep an open and continued dialogue. Provide campus thought leadership and advise executives on major decisions. Create collaborative spaces where people from different teams can work to solve common problems on campus. Build campus wide tools that leverage and produce open source software and have open planning sessions with community members. Have coffee talks with community members to provide advice, be an advocate or simply lend a friendly ear. Do work pro-bono to help people with their goals that will also advance campus goals. Look outside of campus to leverage local tech and entrepreneurship. And last but not least look to the national communities UwebD, BlogHighEd, HigherEDLive, eduStyle etc. and our friendly peer institutions to provide solutions and best practices for campus. We must recognize that no one person is able to accomplish a better web on campus or community, therefore we must be open to a plan that encourages networking, cooperative relationships with others outside the campus, and implementation of practices that may reach our goal of a simple “better web on campus.”

Campus change agent - building a campus web community where there is none

Matt Herzberger

FIU Web Communications

Web Communications at Florida International University

Why you need a CMS

Matt Herzberger

Hands on higher ed google analytics

Matt Herzberger

What's in a brand

Matt Herzberger

How to Plan For and Manage a Successful Web Redesign Project

Matt Herzberger

SEO for writers

Matt Herzberger

Destaque (8)

FIU Web Content Management System (CMS)

Campus change agent - building a campus web community where there is none

FIU Web Communications

Why you need a CMS

Hands on higher ed google analytics

What's in a brand

How to Plan For and Manage a Successful Web Redesign Project

SEO for writers

Semelhante a Responsive web design

Stocktwits & Responsive Web Design, social network meets flexible framework

John Strott

Responsive web design

Gopinath Ambothi

Responsive Design and Joomla!

JoomlaChicago - Loop

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

MeetMagentoNY2014

The best practice for responsive design is to design the mobile version first and progressively enhance the content for tablet and desktop screens. In reality, we usually have thousands of pages of documentation that has already been designed for desktop or even print display. So, we can't follow a "mobile first" approach. In this workshop, I present best practices and real-world examples for redesigning tables, images, lists, and other types on content for mobile display. I also share best practices for rewriting content for mobile devices. http://www.clickstart.net

Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart

Scott DeLoach

Theming for mobile devices recent

Artem Shymko

Responsive Web Design & the Library

ariannaschlegel

Getting Down & Dirty with Responsive Web Design

martinridgway

Responsivedesign 7-3-2012

Thomas Carney

Responsive Web Design - more than just a buzzword

Russ Weakley

Responsive Web Design_2013

Achieve Internet

Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...

UX Riga

Proactive Responsive Design

Nathan Smith

We’ve entered a new era where an increasing number of devices with wildly divergent features— including phones, tablets, game consoles, and TVs—are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate. This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet an unpredictable future. Responsive web design means changing how we plan and evaluate performance. Dave Olsen and Doug Gapinski share and examine examples to help institutions rethink and adjust for the future-friendly web. Presenters Dave Olsen Professional Technologist, West Virginia University Doug Gapinski Strategist, mStoner

Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...

Doug Gapinski

We’re entering a new era where an increasing number of devices with wildly divergent features -- including phones, tablets, game consoles, and TVs -- are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate. This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet this increasingly unpredictable future. Dave Olsen and Doug Gapinski will share and examine examples that show how responsive design will help institutions rethink and adjust for the future-friendly web. Primary topics that are covered are: understanding the reality of web development today, example RWD design patterns, and understanding how to test and optimize the performance of your RWD website.

Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...

Dave Olsen

Responsive web design with various grids and frameworks comparison

DhrubaJyoti Dey

Responsive Web Design: How the mobile web has changed the way we think and work

vq20

Responsive Web Design (HeadStart TechTalks)

Tirthesh Ganatra

Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...

Jeremy Johnson

Responsive web design & mobile web development - a technical and business app...

Atos_Worldline

Semelhante a Responsive web design (20)

Stocktwits & Responsive Web Design, social network meets flexible framework

Responsive web design

Responsive Design and Joomla!

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

Adapting Content for Mobile Devices - tcworld 2017, Scott DeLoach, ClickStart

Theming for mobile devices recent

Responsive Web Design & the Library

Getting Down & Dirty with Responsive Web Design

Responsivedesign 7-3-2012

Responsive Web Design - more than just a buzzword

Responsive Web Design_2013

Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...

Proactive Responsive Design

Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...

Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...

Responsive web design with various grids and frameworks comparison

Responsive Web Design: How the mobile web has changed the way we think and work

Responsive Web Design (HeadStart TechTalks)

Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...

Responsive web design & mobile web development - a technical and business app...

Último

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Vector Search -An Introduction in Oracle Database 23ai.pptx

Remote DBA Services

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

Angeliki Cooney has spent over twenty years at the forefront of the life sciences industry, working out of Wynantskill, NY. She is highly regarded for her dedication to advancing the development and accessibility of innovative treatments for chronic diseases, rare disorders, and cancer. Her professional journey has centered on strategic consulting for biopharmaceutical companies, facilitating digital transformation, enhancing omnichannel engagement, and refining strategic commercial practices. Angeliki's innovative contributions include pioneering several software-as-a-service (SaaS) products for the life sciences sector, earning her three patents. As the Senior Vice President of Life Sciences at Avenga, Angeliki orchestrated the firm's strategic entry into the U.S. market. Avenga, a renowned digital engineering and consulting firm, partners with significant entities in the pharmaceutical and biotechnology fields. Her leadership was instrumental in expanding Avenga's client base and establishing its presence in the competitive U.S. market.

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Angeliki Cooney

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Zilliz

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

Dubai, known for its towering skyscrapers, luxurious lifestyle, and relentless pursuit of innovation, often finds itself in the global spotlight. However, amidst the glitz and glamour, the emirate faces its own set of challenges, including the occasional threat of flooding. In recent years, Dubai has experienced sporadic but significant floods, disrupting normalcy and posing unique challenges to its infrastructure. Among the critical nodes in this bustling metropolis is the Dubai International Airport, a vital hub connecting the world. This article delves into the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Orbitshub

ICT role in 21st century education and its challenges

rafiqahmad00786416

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

DBX First Quarter 2024 Investor Presentation

Dropbox

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

Responsive web design

1. Responsive web design Design once and done Matt Herzberger FIU Web Communications

2. In the long long ago... 1990s Best viewed in Internet Explorer 800 X 600

3. This used to be the web

4. Now we have to deal with this http://bradfrostweb.com

5. The post PC era http://www.ﬂickr.com/photos/adactio/6152947625/

6. Here’s what we want http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/

7. How? Not an app, not a mobile site RESPONSIVE WEB DESIGN (RWD) AKA somewhat interchangeable (NOT REALLY) = Adaptive, Future Friendly, Responsible, Progressive enhancement, Mobile First

8. What is RWD? Websites and apps that are sustainable and future friendly We can’t design a new site for each new device, we should build a ﬂexible adaptive site that can work on each new device 1.Flexible grid layout 2.Flexible images and media 3.Media Queries

9. How do we do RWD? Start with the main layouts (Desktop, tablet, mobile - breakpoints) Be more ﬂexible about your design, it’s about proportions not pixels Design, code, repeat... your plans may not work out in the browser

10. Quickstarts aka frameworks Twitter bootstrap Zurb Foundation Skeleton, Less, 320 and up, Frameless, Gridless, and many more

11. Content is no longer king, it’s King, Queen and Prince

12. More relevant than ever http://xkcd.com/773/

13. Content for RWD Rethink (headers, navigation, search bar, call to action) Eliminate unnecessary things Make structured content, not a big dumb WYSIWYG think XML Content should be ﬂuid Content should be consistent across all devices Create once, publish everywhere

14. Gotchas / issues Images Videos Typography Content Menus / navigation RESS / server = performance 3rd party content / widgets

15. Higher ed examples Higher ED RWD Directory http://go.ﬁu.edu/eb2 Mobile in Higher Ed http://go.ﬁu.edu/eb3

16. Questions? mherzber@ﬁu.edu 7-0094

Responsive web design

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (8)

Semelhante a Responsive web design

Semelhante a Responsive web design (20)

Último

Último (20)

Responsive web design

Notas do Editor