(WI2012) Lucijan Blagonic - Responsive web design

•

1 like•462 views

Web::INDUSTRIJA

Education Business Technology

“We should embrace the fact that the
web doesn’t have the same constraints,
and design for this ﬂexibility.”
John Allsopp, “A Dao of Web Design”

www.alistapart.com/articles/dao/

Responsive Web Design
Novi naziv za staru tehnologiju

Responsive Web Design
“Fluid grids, ﬂexible images, and media
queries are the three technical
ingredients for responsive web design,
but it also requires a different way of
thinking.”
Ethan Marcotte, “Responsive Web Design”

www.alistapart.com/articles/responsive-web-design/

Sadržaj
...u kontekstu uređaja i rezolucija,
prikazan na pristupačan i jednostavan način.

Timeline

Eksplozija
pametnih telefona
i tableta

05
2010

Responsive Web
Design

Timeline

Eksplozija
pametnih telefona
i tableta
Manje stranice

05
2010

Responsive Web
Design

Timeline

Eksplozija
pametnih telefona
i tableta
Manje stranice

05 11
2010 2011

Responsive Web
Design BostonGlobe.com

Timeline

Eksplozija
pametnih telefona
i tableta
Manje stranice Trend

05 11
2010 2011

Responsive Web
Design BostonGlobe.com

Timeline

Eksplozija
pametnih telefona
i tableta
Manje stranice Trend

05 11 05
2010 2011 2012

Responsive Web
Design BostonGlobe.com Vaš sljedeći site?

Razmišljati responzivno
...i dizajnirati!

Fluid Grid Fixed Grid

% px
Prilagodljivost. Jednostavnost.

Sve se deﬁnira u Brži i jednostavniji
postotcima. izračun.

Target ÷ Context width:220px;
/* 220 / 940 */
23.404255319149% Međurezolucije?

Tipograﬁja
Prilagoditi tipograﬁju rezoluciji.
Font size, line height, margin, padding...

/* CSS */
@media screen and (max-width:1024px) {
#header { color:red; }
}
@media screen and (max-width:800px) { ... }
@media screen and (max-width:480px) { ... }

<!-- Inside <head> -->
<link rel="stylesheet" media="screen and
(max-width: 1024px)" href="desktop.css" />

<link rel="stylesheet" media="screen and
(max-width: 800px) href="medium.css">

<link rel="stylesheet" media="screen and
(max-width: 480px)" href="mobile.css"/>

JS
Cross browser support.
Images & media.

/* CSS
Media Queries
Works in IE6-8, yay! */

@media screen and (max-width:1024px) {
#header { color:red; }
}
@media screen and (max-width:800px) { ... }
@media screen and (max-width:480px) { ... }

<!-- Inside <head> -->
<script type="text/javascript"
src="respond.js"></script>

github.com/scottjehl/Respond

imgSize.js
Image resizing
unstoppablerobotninja.com/entry/ﬂuid-images/

Responsive Images
<img src="small.jpg?full=large.jpg" />
github.com/ﬁlamentgroup/Responsive-Images

ﬁtvids.js
Fluid width video embeds
ﬁtvidsjs.com

Koncept i priprema Brief, wireframes, mockups...

Dizajn & UI Izrada predložaka

Rezanje HTML & CSS

Development PHP, ASP...

Testiranje i isporuka Sadržaj

Koncept i priprema Dizajn & UI

Rezanje Development

Testiranje
Mobitel, Tablet, Desktop...

Isporuka

Korisni savjeti
Što trebate pripaziti...

Navigacija
Oduzima prostor no bitna za dobar UX

creativenights.com informationarchitects.jp blagonic.com (soon)

Forme
Funkcionalno i na malom ekranu.
Koliko je to moguće.

ﬁlamentgroup.com/examples/rwd-table-patterns/

Primjeri
+ demo na vašem mobitelu, tabletu...

Blogovi, osobni siteovi...
hicksdesign.co.uk, jasonsantamaria.com,
trentwalton.com...

Iskustvo
Fleksibilni grid, navigacija, forme...

Budućnost
Cross browser support.
Media scaling.
Tableti i mobiteli.

Hvala
Lucijan Blagonic
Blagonic Brothers

www.blagonic.com
@lucijanblagonic
lucijan@blagonic.com

What's hot

Responsive Web Design - more than just a buzzwordRuss Weakley

Responsive Web Design for Universal Access 2016Kate Walser

Responsive web designChristian Glover Wilson

Let's get accessible!Tady Walsh

Responsive UI using CSS Media QueryNeev Technologies

Responsive webdesignBart De Waele

Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General...General Assembly

Class 4: Introduction to web technology entrepreneurshipallanchao

A Web for Everyonejameswillweb

Using Responsive Web Design To Make Your Web Work Everywhere Chris Love

Optimizing for a faster user experience Pt 2: How-to.James Christie

RESS: An Evolution of Responsive Web DesignDave Olsen

WordPress for mobilerachel_mccollin

Responsive Design Tools & ResourcesClarissa Peterson

Mobile First Responsive DesignJason Grigsby

Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby

Introduction to Responsive Web DesignClarissa Peterson

Responsive Design Clarissa Peterson

Checklistux interaction flowandusabilityRick Boardman

The future of BYU web designNate Walton

What's hot (20)

Responsive Web Design - more than just a buzzword

Responsive Web Design for Universal Access 2016

Responsive web design

Let's get accessible!

Responsive UI using CSS Media Query

Responsive webdesign

Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General...

Class 4: Introduction to web technology entrepreneurship

A Web for Everyone

Using Responsive Web Design To Make Your Web Work Everywhere

Optimizing for a faster user experience Pt 2: How-to.

RESS: An Evolution of Responsive Web Design

WordPress for mobile

Responsive Design Tools & Resources

Mobile First Responsive Design

Mobile First Responsive Web Design — BD Conf Oct 2013

Introduction to Responsive Web Design

Responsive Design

Checklistux interaction flowandusability

The future of BYU web design

Viewers also liked

Towards quality in e learning quality assurance - epprobate international cou...Marjan Milošević

International conference in textile industry DTM 2016dr Gordana Colovic

Kontakti za prigovore na previsoke račune za strujugordana comic

CV Danijela Jelesijevic englishDanijela Jelesijević

CV Lidija CupicLidija Cupic

Social, Digital & Mobile Around The World (January 2014)We Are Social Singapore

Viewers also liked (6)

Towards quality in e learning quality assurance - epprobate international cou...

International conference in textile industry DTM 2016

Kontakti za prigovore na previsoke račune za struju

CV Danijela Jelesijevic english

CV Lidija Cupic

Social, Digital & Mobile Around The World (January 2014)

Similar to (WI2012) Lucijan Blagonic - Responsive web design

The state of front end architecture_in_2015Aidan Foster

Responsive Web Designs.pdfJiniya Bipasha

Introduction to Web DesignVictor M. Ortiz

Module 08: Responsive Web DesignDaniel Drew Turner

Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott

Top Trend To Design in Website Development and Designengineermaste solution

RESPONSIVE WEB DESIGNNAWAZ KHAN

Responsive Design and Joomla!JoomlaChicago - Loop

BootstrapFajar Baskoro

Responsive Web Design - Why and HowJudi Wunderlich

5 Reasons to go ResponsiveTier10

MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions

Web design and development trendsCool Sky

2 bootstrap-3-m1-slidesMasterCode.vn

CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb

Responsive DesignMarkus Tripp

Responsive Design Heaven & HellClarissa Peterson

RWD - BootstrapJasvinder Singh

Why Go MobileLllyppsNRzrblds

There Is No Mobile: An Introduction To Responsive Web DesignChris Love

Similar to (WI2012) Lucijan Blagonic - Responsive web design (20)

The state of front end architecture_in_2015

Responsive Web Designs.pdf

Introduction to Web Design

Module 08: Responsive Web Design

Stocktwits & Responsive Web Design, social network meets flexible framework

Top Trend To Design in Website Development and Design

RESPONSIVE WEB DESIGN

Responsive Design and Joomla!

Bootstrap

Responsive Web Design - Why and How

5 Reasons to go Responsive

MIMA 2014 - Changing your Responsive Design Workflow

Web design and development trends

2 bootstrap-3-m1-slides

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

Responsive Design

Responsive Design Heaven & Hell

RWD - Bootstrap

Why Go Mobile

There Is No Mobile: An Introduction To Responsive Web Design

Recently uploaded

Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417

Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K

Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid

Unit-V; Pricing (Pharma Marketing Management).pptxVishalSingh1417

The basics of sentences session 2pptx copy.pptxheathfieldcps1

Making and Justifying Mathematical Decisions.pdfChris Hunter

Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George

Código Creativo y Arte de Software | Unidad 1Maestría en Comunicación Digital Interactiva - UNR

How to Give a Domain for a Field in Odoo 17Celine George

fourth grading exam for kindergarten in writingTeacherCyreneCayanan

SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood

Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University of Engineering & Technology, Jamshoro

Gardella_PRCampaignConclusion Pitch LetterMateoGardella

PROCESS RECORDING FORMAT.docxPoojaSen20

This PowerPoint helps students to consider the concept of infinity.christianmathematics

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82

Gardella_Mateo_IntellectualProperty.pdf.MateoGardella

Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB

Activity 01 - Artificial Culture (1).pdfciinovamais

1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh

Recently uploaded (20)

Unit-IV; Professional Sales Representative (PSR).pptx

Measures of Dispersion and Variability: Range, QD, AD and SD

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx

Unit-V; Pricing (Pharma Marketing Management).pptx

The basics of sentences session 2pptx copy.pptx

Making and Justifying Mathematical Decisions.pdf

Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes

Código Creativo y Arte de Software | Unidad 1

How to Give a Domain for a Field in Odoo 17

fourth grading exam for kindergarten in writing

SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx

Mehran University Newsletter Vol-X, Issue-I, 2024

Gardella_PRCampaignConclusion Pitch Letter

PROCESS RECORDING FORMAT.docx

This PowerPoint helps students to consider the concept of infinity.

Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi

Gardella_Mateo_IntellectualProperty.pdf.

Beyond the EU: DORA and NIS 2 Directive's Global Impact

Activity 01 - Artificial Culture (1).pdf

1029 - Danh muc Sach Giao Khoa 10 . pdf

(WI2012) Lucijan Blagonic - Responsive web design

1. Responsive Web Design Lucijan Blagoni! Web Industrija

2. Print

4. “We should embrace the fact that the web doesn’t have the same constraints, and design for this ﬂexibility.” John Allsopp, “A Dao of Web Design” www.alistapart.com/articles/dao/

5. Web

7. Above the fold?

8. Responsive Web Design Novi naziv za staru tehnologiju

9. Responsive Web Design “Fluid grids, ﬂexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” Ethan Marcotte, “Responsive Web Design” www.alistapart.com/articles/responsive-web-design/

10. Sadržaj ...u kontekstu uređaja i rezolucija, prikazan na pristupačan i jednostavan način.

11. Timeline Eksplozija pametnih telefona i tableta 05 2010 Responsive Web Design

12. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 2010 Responsive Web Design

13. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com

14. bostonglobe.com

15. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com

16. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 05 2010 2011 2012 Responsive Web Design BostonGlobe.com Vaš sljedeći site?

17. Razmišljati responzivno ...i dizajnirati!

18. Fluid Grid Fixed Grid % px Prilagodljivost. Jednostavnost. Sve se deﬁnira u Brži i jednostavniji postotcima. izračun. Target ÷ Context width:220px; /* 220 / 940 */ 23.404255319149% Međurezolucije?

19. Tipograﬁja Prilagoditi tipograﬁju rezoluciji. Font size, line height, margin, padding...

20. Tehnologija HTML5, CSS3, JS...

21. CSS3 Media Query

22. /* CSS */ @media screen and (max-width:1024px) { #header { color:red; } } @media screen and (max-width:800px) { ... } @media screen and (max-width:480px) { ... }  <link rel="stylesheet" media="screen and (max-width: 1024px)" href="desktop.css" /> <link rel="stylesheet" media="screen and (max-width: 800px) href="medium.css"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css"/>

23. JS Cross browser support. Images & media.

24. /* CSS Media Queries Works in IE6-8, yay! */ @media screen and (max-width:1024px) { #header { color:red; } } @media screen and (max-width:800px) { ... } @media screen and (max-width:480px) { ... }  <script type="text/javascript" src="respond.js"></script> github.com/scottjehl/Respond

25. imgSize.js Image resizing unstoppablerobotninja.com/entry/fluid-images/ Responsive Images <img src="small.jpg?full=large.jpg" /> github.com/filamentgroup/Responsive-Images fitvids.js Fluid width video embeds fitvidsjs.com

26. Proces izrade 1-2-3-4-5

27. Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predložaka Rezanje HTML & CSS Development PHP, ASP... Testiranje i isporuka Sadržaj

28. Koncept i priprema Dizajn & UI Rezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka

29. Korisni savjeti Što trebate pripaziti...

30. Navigacija Oduzima prostor no bitna za dobar UX

31. creativenights.com informationarchitects.jp blagonic.com (soon)

32. Slideri Touch friendly

33. woothemes.com/ﬂexslider/

34. Forme Funkcionalno i na malom ekranu. Koliko je to moguće.

35. Tablice Responsive tables.

36. ﬁlamentgroup.com/examples/rwd-table-patterns/

37. Primjeri + demo na vašem mobitelu, tabletu...

38. Portali... bostonglobe.com

39. bostoglobe.com