#RWD To the future

•

0 recomendaciones•948 vistas

Davorin Pavlica

#RWD To the future

Tecnología

#RWD
REWIND TO THE FUTURE

Davorin Pavlica - Klika d.o.o.

PREDSTAVITEV

• Klika d.o.o.
• Ustanovljena leta 2003
•~ 60 razvijalcev, 4 oblikovalci, 2 fuzbal mizi in 2 psa čuvaja
• Davorin Pavlica / davorin.pavlica@klika.si / @DavorinPavlica
• Spletni oblikovalec

PLAN
• Kaj je RWD
• Mobile ﬁrst, progressive enhancement
Predavanje • Adaptive vs. Responsive
45min
• Pasti
• Tehnike

• Skupine po 4-5 oseb
Delavnica • Ena tema, en fokus
90min
• Rezultat je responsive ali adaptive spletna stran

Predstavitev • Vsaka skupina predstavi svojo rešitev
45min

CITAT

“It is not the strongest species
that survive, nor the most
intelligent, but the ones most
responsive to change.”
Charles Darwin

Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

THE RISE AND FALL OF PC

Avtor in vir: Horace Dediu - The rise and fall of personal computing - http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

#RWD!

Povezava: www.smashingmagazine.com

OSNOVE

• Fluid grid
• Flexible images
• Media queries

Avtor in vir: Ethan Marcotte - Responsive Web Design - http://www.alistapart.com/articles/responsive-web-design/

FLUID GIRDS

• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil
takisti Ethan Marcotte!

Avtor in vir: Ethan Marcotte - Fluid Grids - http://www.alistapart.com/articles/ﬂuidgrids/

Flurid grid - http://kﬂorence.github.com/ﬂurid/

FLEXIBLE / FLUID IMGS

• Termin, ki si ga je leto preden je “izumil” #RWD, izmislil
takisti Ethan Marcotte!

Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/ﬂuid-images

Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/ﬂuid-images

FLEXIBLE / FLUID IMGS

1.img,
2.object {
3. max-width: 100%;
4.}

MEDIA QUERIES

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

MEDIA QUERIES

• Breakpoints: at 320px, 768px, 1024px, 1440px, 1680px
or not?
• Device != Context

Avtor in vir: Marko Mrdjenović - Deﬁning Breakpoints https://speakerdeck.com/friedcell/deﬁning-breakpoints

TEHNIKE

• Mobile First
• Progressive Enhancement VS Graceful Degradation
• Responsive VS Adaptive layouts

MOBILE FIRST

Avtor in vir: Luke Wroblewski - Mobile ﬁrst - http://www.lukew.com/ff/entry.asp?933

PROGRESSIVE
ENHANCEMENT
VS

GRACEFUL
DEGRADATION

PASTI
• Navigacija / meni
Responsive Navigation Patterns (by Brad Frost)

Complex Navigation Patterns for Responsive Design (by Brad Frost)

Multi-Device Layout Patterns (by Luke Wroblewski)

• Page loading
Performance Implications of Responsive Web Design (by Jason Grigsby)

• Images
Responsive Images: How they Almost Worked and What We Need (by Mat Marqis)

The road to responsive images (by Anselm Hannemann)

adaptive-images.com | ﬁlamentgroup.com/examples/responsive-images | codevisually.com/responsive-img/

• IE :)
modernizr.com | more ...

DELAVNICO IMA

• Skupine po 4-5 ljudi
• Ena tema, en fokus
• Rezultat je responsive / adaptive spletna stran

DELAVNICO IMA
1.http://www.24ur.com/
2.http://www.najdi.si/
3.http://www.siol.net/
4.http://www.bolha.com/
5.http://www.rtvslo.si/
6.http://www.avto.net/
7.http://www.itis.si/

HVALA
@davorinpavlica
davorin.pavlica@klika.si

Más contenido relacionado

Similar a #RWD To the future

No one sets out to create crufty code, but too often the pressure to "push it out the door and we'll fix it later" gets the best of us all. Before you know it, it's three projects later, the sun is still shining and you're still getting a paycheck. So where is the incentive to go back and clean under the rug? Poor core quality isn't just a developer problem, either. It bleeds into team moral, deters decision agility, and ultimately prevents team members from getting into flow. Quality code isn't something that requires a complete rewrite either (which is likely impossible), but can be accomplished with style guides, code reviews and a devotion to team investment time. The pressure to ship will always be there, but starting (or maintaining) projects with an agreed upon foundation alleviates developers and designers from making potentially hundreds of decisions each day. This leaves room for the decisions that actually matter. Learn how to transform your team, regardless of your position, into a lean, mean standards machine. Develop a multi-tier style guide, workflow and practices that focus on knowledge and consensus building. Eliminate the mundane decisions and allow the team to focus on its craft.

What is quality code? From cruft to craft

Nick DeNardis

Let's unRiddle jsFiddle

rhoward_blk

Responsive Web Design_2013

Achieve Internet

Tænk tilgængelighed og brugervenlighed ind i dine sites

Karen Mardahl

Responsive Design Essentials

Clarissa Peterson

Presentation slides from Dustin Tauer's 2014 MIMA Session: What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design. This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.

MIMA 2014 - Changing your Responsive Design Workflow

easelsolutions

Responsive Design for Non-Techies

Malcolm Jones

Forum One Responsive Design UXCampDC 2013

Forum One

The Age of Responsive Design

Denise Jacobs

Responsive Design

Markus Tripp

Responsive Web Design & the state of the Web

Yiannis Konstantakopoulos

Responsive Design

Clarissa Peterson

Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.

So…What Do I Make? (Dan Mall)

Future Insights

Module 08: Responsive Web Design

Daniel Drew Turner

Why Can't We All Just Get Along?

judybpresenting

Overboard.js - where are we going with with jsconfasia / devfestasia

Christian Heilmann

The Rise Of Tablets: Responsive Web Design is in your future

Rick Wilson

Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future. Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.

The rise of tablets how responsive web design is in your future

Internet Merchants Association

Your typical medium sized international enterprise will typically outsource to smaller agencies that specialize in Internet marketing, design, and development. By bringing that type of talent in-house, an enterprise can communicate their marketing strategies and messages with greater speed to market and more collective creative control. While the initial capital investment may be greater than simply outsourcing, the long-term benefit of having immediate and direct contact with an in-house team will lead to a greater understanding of company culture and values reflected within the framework of your digital properties.

How to Act Like an Agency within a Company: UX for the Enterprise

FlashGuy13

Introduction to Responsive Web Design

Clarissa Peterson

Similar a #RWD To the future (20)

What is quality code? From cruft to craft

Let's unRiddle jsFiddle

Responsive Web Design_2013

Tænk tilgængelighed og brugervenlighed ind i dine sites

Responsive Design Essentials

MIMA 2014 - Changing your Responsive Design Workflow

Responsive Design for Non-Techies

Forum One Responsive Design UXCampDC 2013

The Age of Responsive Design

Responsive Design

Responsive Web Design & the state of the Web

Responsive Design

So…What Do I Make? (Dan Mall)

Module 08: Responsive Web Design

Why Can't We All Just Get Along?

Overboard.js - where are we going with with jsconfasia / devfestasia

The Rise Of Tablets: Responsive Web Design is in your future

The rise of tablets how responsive web design is in your future

How to Act Like an Agency within a Company: UX for the Enterprise

Introduction to Responsive Web Design

Último

FWD Group - Insurer Innovation Award 2024

The Digital Insurer

ICT role in 21st century education and its challenges

rafiqahmad00786416

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Zilliz

Six Myths about Ontologies: The Basics of Formal Ontology

johnbeverley2021

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

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

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

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

Architecting Cloud Native Applications

WSO2

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

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

WSO2

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the deployment of external web forms using Jotform for Bonterra Impact Management. This solution can be customized to your organization’s needs and deployed to support the common use cases below: - Intake and consent - Assessments - Surveys - Applications - Program registration Interested in deploying web form automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Jeffrey Haguewood

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults 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 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg 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 value of a flexible API Management solution for O...

apidays

Discover the innovative features and strategic vision that keep WSO2 an industry leader. Explore the exciting 2024 roadmap of WSO2 API management, showcasing innovations, unified APIM/APK control plane, natural language API interaction, and cloud native agility. Discover how open source solutions, microservices architecture, and cloud native technologies unlock seamless API management in today's dynamic landscapes. Leave with a clear blueprint to revolutionize your API journey and achieve industry success!

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

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

Zilliz

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

#RWD To the future

1. #RWD REWIND TO THE FUTURE Davorin Pavlica - Klika d.o.o.

2. PREDSTAVITEV • Klika d.o.o. • Ustanovljena leta 2003 •~ 60 razvijalcev, 4 oblikovalci, 2 fuzbal mizi in 2 psa čuvaja • Davorin Pavlica / davorin.pavlica@klika.si / @DavorinPavlica • Spletni oblikovalec

3. PLAN • Kaj je RWD • Mobile ﬁrst, progressive enhancement Predavanje • Adaptive vs. Responsive 45min • Pasti • Tehnike • Skupine po 4-5 oseb Delavnica • Ena tema, en fokus 90min • Rezultat je responsive ali adaptive spletna stran Predstavitev • Vsaka skupina predstavi svojo rešitev 45min

4. CITAT “It is not the strongest species that survive, nor the most intelligent, but the ones most responsive to change.” Charles Darwin

5. 25. MAJ 2010

6. 25. MAJ 2010 DAN MLADOSTI?

7. 25. MAJ 2010 DAN BRISAČE?

8. 25. MAJ 2010 GEEK PRIDE DAY?

9. 25. MAJ 2010 DAN #RWD!?

10. 25. MAJ 2010

11. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

12. Avtor in vir: Brad Frost - For a Future-Friendly Web - http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

13. THE RISE AND FALL OF PC Avtor in vir: Horace Dediu - The rise and fall of personal computing - http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

14. KAJ JE #RWD?

15. #RWD? Foto: lyzadanger / Flickr

16. #RWD? Foto: lyzadanger / Flickr

17. #RWD! Foto: Antoine Lefeuvre / Flickr

18. #RWD! Povezava: rsd.joshemerson.co.uk

19. #RWD! Povezava: mediaqueri.es

20. #RWD! Povezava: www.smashingmagazine.com

21. #RWD! Povezava: stuffandnonsense.co.uk

22. #RWD! Povezava: www.kiwibank.co.nz

23. #RWD OR MOBILE!?

24. OSNOVE

25. OSNOVE • Fluid grid • Flexible images • Media queries Avtor in vir: Ethan Marcotte - Responsive Web Design - http://www.alistapart.com/articles/responsive-web-design/

26. FLUID GIRDS • Termin, ki si ga je leto preden je “izumil” #RWD, izmislil takisti Ethan Marcotte! Avtor in vir: Ethan Marcotte - Fluid Grids - http://www.alistapart.com/articles/ﬂuidgrids/

27. Flurid grid - http://kﬂorence.github.com/ﬂurid/

28. FLEXIBLE / FLUID IMGS • Termin, ki si ga je leto preden je “izumil” #RWD, izmislil takisti Ethan Marcotte! Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/ﬂuid-images

29. Avtor in vir: Ethan Marcotte - Fluid images - http://unstoppablerobotninja.com/entry/ﬂuid-images

30. FLEXIBLE / FLUID IMGS 1.img, 2.object { 3. max-width: 100%; 4.}

31. MEDIA QUERIES http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

32. MEDIA QUERIES • Breakpoints: at 320px, 768px, 1024px, 1440px, 1680px or not? • Device != Context Avtor in vir: Marko Mrdjenović - Deﬁning Breakpoints https://speakerdeck.com/friedcell/deﬁning-breakpoints

33. MEDIA QUERIES

34. TEHNIKE

35. TEHNIKE • Mobile First • Progressive Enhancement VS Graceful Degradation • Responsive VS Adaptive layouts

36. MOBILE FIRST Avtor in vir: Luke Wroblewski - Mobile ﬁrst - http://www.lukew.com/ff/entry.asp?933

37. PROGRESSIVE ENHANCEMENT VS GRACEFUL DEGRADATION

38. RESPONSIVE VS ADAPTIVE

39. PASTI

40. PASTI • Navigacija / meni Responsive Navigation Patterns (by Brad Frost) Complex Navigation Patterns for Responsive Design (by Brad Frost) Multi-Device Layout Patterns (by Luke Wroblewski) • Page loading Performance Implications of Responsive Web Design (by Jason Grigsby) • Images Responsive Images: How they Almost Worked and What We Need (by Mat Marqis) The road to responsive images (by Anselm Hannemann) adaptive-images.com | ﬁlamentgroup.com/examples/responsive-images | codevisually.com/responsive-img/ • IE :) modernizr.com | more ...

41. DELAVNICO IMA

42. DELAVNICO IMA • Skupine po 4-5 ljudi • Ena tema, en fokus • Rezultat je responsive / adaptive spletna stran

43. DELAVNICO IMA 1.http://www.24ur.com/ 2.http://www.najdi.si/ 3.http://www.siol.net/ 4.http://www.bolha.com/ 5.http://www.rtvslo.si/ 6.http://www.avto.net/ 7.http://www.itis.si/

44. WHO IS RESPONSIVE (TO CHANGE)?

45. HVALA @davorinpavlica davorin.pavlica@klika.si

#RWD To the future

Recomendados

Recomendados

Más contenido relacionado

Similar a #RWD To the future

Similar a #RWD To the future (20)

Último

Último (20)

#RWD To the future