SlideShare a Scribd company logo

Secrets of responsive web design by Sameera Thilakasiri

Sameera Thilakasiri
Sameera Thilakasiri
Sameera ThilakasiriSenior Engineer - Specialist UI at Sameera Thilakasiri

How to calculate pixel in percentage for responsive web design.

Secrets of responsive web design by Sameera Thilakasiri

1 of 14
Download to read offline
Secrets of Responsive Web
Design
Formula for Fluid/ Responsive Layout




              by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   1
It can be any device.




                                                                   Picture from internet


             by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast              2
Introduction
• Still developing websites for the standard screen resolution
  (1024x768)? Stop that! It makes you look foolish in the
  changing world of the Web.
• Responsive Web Design is like a shiny new toy for designers
  and developers. It is difficult to overestimate the importance
  of sensible design, as it ensures that any website will look
  good on different screen resolutions. I think everyone will
  agree with me that the first thing every designer worth his
  salt should do is get familiar with web design response.




                        by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   3
Its called responsive design




                                                                   Picture from internet


             by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast              4
How to create a flexible grid
• Using a flexible, forget style fixed width and centered on the
  content. This means that all elements of our design is resized
  in correlation. The basic idea of a fluid grid to use this
  formula for the calculation of the percentage proportions of
  design.

target / context = result

.sidebar {
     width:31.5%;
}
                       by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   5
Pixel to EM
• The same formula works for fonts. We stop using pixel sizes
  based on the time we use em or percentages.

14 pixels - the body font size;
21 pixels - the H1 font size;
21 ⁄ 14 = 1.5
Your CSS will look like:
h1 {
        font-size:1.5em;
}

                         by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   6

Recommended

Optimize WordPress Like a Super Affiliate
Optimize WordPress Like a Super AffiliateOptimize WordPress Like a Super Affiliate
Optimize WordPress Like a Super AffiliateAffiliate Summit
 
10 golden rules for website design
10 golden rules for website design10 golden rules for website design
10 golden rules for website designHih7 Webtech Pvt Ltd
 
7 Tips to get more Traffic by Optimising your images for SEO
7 Tips to get more Traffic by Optimising your images for SEO7 Tips to get more Traffic by Optimising your images for SEO
7 Tips to get more Traffic by Optimising your images for SEOFirstWire Apps
 
Use Amazon.com personalization on your WooCommerce store.
Use Amazon.com personalization on your WooCommerce store.Use Amazon.com personalization on your WooCommerce store.
Use Amazon.com personalization on your WooCommerce store.WP Engine
 
Roger - Pet Care WordPress Theme
Roger - Pet Care WordPress ThemeRoger - Pet Care WordPress Theme
Roger - Pet Care WordPress Themezozothemes
 
Improve Your Site With A Real-time Core Web Vitals View
Improve Your Site With A Real-time Core Web Vitals ViewImprove Your Site With A Real-time Core Web Vitals View
Improve Your Site With A Real-time Core Web Vitals ViewWP Engine
 
Fit For the Future
Fit For the FutureFit For the Future
Fit For the FutureWP Engine
 

More Related Content

What's hot

Godfrey's propel one and capture
Godfrey's propel one and captureGodfrey's propel one and capture
Godfrey's propel one and capturevampmedia
 
WordPress SEO Essentials - by Peter Mead
WordPress SEO Essentials - by Peter MeadWordPress SEO Essentials - by Peter Mead
WordPress SEO Essentials - by Peter MeadPeter Mead
 
Webinar Using Google Analytics(tm) to Build Your Content Strategy
Webinar  Using Google Analytics(tm) to Build Your Content StrategyWebinar  Using Google Analytics(tm) to Build Your Content Strategy
Webinar Using Google Analytics(tm) to Build Your Content StrategyWP Engine
 
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...BarkWorld Expo
 
Blogger to WordPress Migration
Blogger to WordPress MigrationBlogger to WordPress Migration
Blogger to WordPress MigrationNew Tricks
 
Configuring WordPress - Dan Maby
Configuring WordPress - Dan MabyConfiguring WordPress - Dan Maby
Configuring WordPress - Dan MabyDan Maby
 
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme issuemagazineplus
 
Pagination and SEO - Making it Easy
Pagination and SEO - Making it EasyPagination and SEO - Making it Easy
Pagination and SEO - Making it EasyEric Enge
 
Plr high ticket
Plr high ticketPlr high ticket
Plr high ticketsholatasar
 
Keeping Google Happy - May 18, 2017 Meetup
Keeping Google Happy - May 18, 2017 MeetupKeeping Google Happy - May 18, 2017 Meetup
Keeping Google Happy - May 18, 2017 MeetupMickey Mellen
 

What's hot (13)

Godfrey's propel one and capture
Godfrey's propel one and captureGodfrey's propel one and capture
Godfrey's propel one and capture
 
WordPress SEO Essentials - by Peter Mead
WordPress SEO Essentials - by Peter MeadWordPress SEO Essentials - by Peter Mead
WordPress SEO Essentials - by Peter Mead
 
Webinar Using Google Analytics(tm) to Build Your Content Strategy
Webinar  Using Google Analytics(tm) to Build Your Content StrategyWebinar  Using Google Analytics(tm) to Build Your Content Strategy
Webinar Using Google Analytics(tm) to Build Your Content Strategy
 
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...
There's a Plugin for That: Benefits of Transitioning Your Blog or Site to Wor...
 
Blogger to WordPress Migration
Blogger to WordPress MigrationBlogger to WordPress Migration
Blogger to WordPress Migration
 
Proposal of iEnglish
Proposal of iEnglishProposal of iEnglish
Proposal of iEnglish
 
Configuring WordPress - Dan Maby
Configuring WordPress - Dan MabyConfiguring WordPress - Dan Maby
Configuring WordPress - Dan Maby
 
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme
Issuemagazineplus Launched Bloggie Pro Personal Wordpress Blog Theme
 
google amp pages
google amp pagesgoogle amp pages
google amp pages
 
Top reasons to design your website in word press | thoughtfulminds
Top reasons to design your website in word press | thoughtfulmindsTop reasons to design your website in word press | thoughtfulminds
Top reasons to design your website in word press | thoughtfulminds
 
Pagination and SEO - Making it Easy
Pagination and SEO - Making it EasyPagination and SEO - Making it Easy
Pagination and SEO - Making it Easy
 
Plr high ticket
Plr high ticketPlr high ticket
Plr high ticket
 
Keeping Google Happy - May 18, 2017 Meetup
Keeping Google Happy - May 18, 2017 MeetupKeeping Google Happy - May 18, 2017 Meetup
Keeping Google Happy - May 18, 2017 Meetup
 

Viewers also liked

Hottest trends to web design in 2013 by Sameera Thilakasiri
Hottest trends to web design in 2013 by Sameera ThilakasiriHottest trends to web design in 2013 by Sameera Thilakasiri
Hottest trends to web design in 2013 by Sameera ThilakasiriSameera Thilakasiri
 
jQuery performance best practices by Sameera Thilakasiri
jQuery performance best practices by Sameera ThilakasirijQuery performance best practices by Sameera Thilakasiri
jQuery performance best practices by Sameera ThilakasiriSameera Thilakasiri
 
Google authorship - picture in search results by Sameera Thilakasiri
Google authorship - picture in search results by Sameera ThilakasiriGoogle authorship - picture in search results by Sameera Thilakasiri
Google authorship - picture in search results by Sameera ThilakasiriSameera Thilakasiri
 
La investigación pura
La investigación puraLa investigación pura
La investigación puramaryperez1991
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShareSlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShareSlideShare
 

Viewers also liked (7)

Hottest trends to web design in 2013 by Sameera Thilakasiri
Hottest trends to web design in 2013 by Sameera ThilakasiriHottest trends to web design in 2013 by Sameera Thilakasiri
Hottest trends to web design in 2013 by Sameera Thilakasiri
 
Measuring and Improving Decision Quality
Measuring and Improving Decision QualityMeasuring and Improving Decision Quality
Measuring and Improving Decision Quality
 
jQuery performance best practices by Sameera Thilakasiri
jQuery performance best practices by Sameera ThilakasirijQuery performance best practices by Sameera Thilakasiri
jQuery performance best practices by Sameera Thilakasiri
 
Google authorship - picture in search results by Sameera Thilakasiri
Google authorship - picture in search results by Sameera ThilakasiriGoogle authorship - picture in search results by Sameera Thilakasiri
Google authorship - picture in search results by Sameera Thilakasiri
 
La investigación pura
La investigación puraLa investigación pura
La investigación pura
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 

Similar to Secrets of responsive web design by Sameera Thilakasiri

Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 
Responsive Web design Zambig
Responsive Web design ZambigResponsive Web design Zambig
Responsive Web design ZambigTribune Media
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design Mindy McAdams
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignChiheb Chebbi
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsiveOmkarsoft Bangalore
 
Responsive Design in iMIS Part 2
Responsive Design in iMIS Part 2Responsive Design in iMIS Part 2
Responsive Design in iMIS Part 2Andrea Robertson
 

Similar to Secrets of responsive web design by Sameera Thilakasiri (20)

Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Design responsively
Design responsivelyDesign responsively
Design responsively
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
Responsive Web design Zambig
Responsive Web design ZambigResponsive Web design Zambig
Responsive Web design Zambig
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Aaug sample slides
Aaug sample slidesAaug sample slides
Aaug sample slides
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
Why should we build our website responsive
Why should we build our website responsiveWhy should we build our website responsive
Why should we build our website responsive
 
Responsive Design in iMIS Part 2
Responsive Design in iMIS Part 2Responsive Design in iMIS Part 2
Responsive Design in iMIS Part 2
 

Recently uploaded

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfDomotica daVinci
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEandreiandasan
 
From eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingFrom eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingSoracom Global, Inc.
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Memory Fabric Forum
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxBrandon Minnick, MBA
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfDomotica daVinci
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfIsidro Navarro
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxKyle Willson
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 

Recently uploaded (20)

zigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdfzigbee motion sensor user manual NAS-PD07B2.pdf
zigbee motion sensor user manual NAS-PD07B2.pdf
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
 
From eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the ManufacturingFrom eSIMs to iSIMs: It’s Inside the Manufacturing
From eSIMs to iSIMs: It’s Inside the Manufacturing
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptx
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdf
 
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptxEvolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
Evolution of Chatbots: From Custom AI Chatbots and AI Chatbots for Websites.pptx
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 

Secrets of responsive web design by Sameera Thilakasiri

  • 1. Secrets of Responsive Web Design Formula for Fluid/ Responsive Layout by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  • 2. It can be any device. Picture from internet by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2
  • 3. Introduction • Still developing websites for the standard screen resolution (1024x768)? Stop that! It makes you look foolish in the changing world of the Web. • Responsive Web Design is like a shiny new toy for designers and developers. It is difficult to overestimate the importance of sensible design, as it ensures that any website will look good on different screen resolutions. I think everyone will agree with me that the first thing every designer worth his salt should do is get familiar with web design response. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
  • 4. Its called responsive design Picture from internet by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 4
  • 5. How to create a flexible grid • Using a flexible, forget style fixed width and centered on the content. This means that all elements of our design is resized in correlation. The basic idea of a fluid grid to use this formula for the calculation of the percentage proportions of design. target / context = result .sidebar { width:31.5%; } by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 5
  • 6. Pixel to EM • The same formula works for fonts. We stop using pixel sizes based on the time we use em or percentages. 14 pixels - the body font size; 21 pixels - the H1 font size; 21 ⁄ 14 = 1.5 Your CSS will look like: h1 { font-size:1.5em; } by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6
  • 7. Fluid images • Using images of fluids causes the block size setting father. The main idea is to use unobvious properties {max-width: 100%}. An image with img {max-width: 100%} will never get out of your head unit. If the die block is less than the size of img then the image is reduced proportionally. This principle applies to images, objects and video. • The usage of fluid images causes the adjustment of the size to the parent block. The main idea is in the unobvious usage of the properties of {max-width: 100%}. An image with img {max-width: 100%} will never come out from its parent unit. If the parent block is smaller than the size of img then the image is reduced proportionally. This principle applies to images,objects and video. Inaddition to that {display: block;} is used to avoid parent float issues. Keep in mind media query can be excuted only at latest browsers as it is part of CSS3. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 7
  • 8. Flexible images • A better solution is to use context-aware image sizing. This technique basically consists of having different sizes of an image, and displaying only the size adapted to the device. Quick example: <img src="image.jpg" data-src-600px="image- 600px.jpg" data-src-800px="image-800px.jpg" alt=""> And the related CSS: @media (min-device-width:600px) { img[data-src- 600px] { content: attr(data-src-600px, url); } } by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
  • 9. Should know about Media Queries • Media inquiries are necessary in order to show the optimized layout for the very resolution, which at the time was surfed the site. It is a part of the CSS standard, which allows to apply styles based on information about the device resolution. @media screen and (mas-width:980px){ /*styles*/ } by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 9
  • 10. Widespread pixel width • The most widespread pixel widths are: 320px(iPhone portrait, default), 480px (iPhone landscape), 600px, 768px(iPad portrait), 900px, 1024px (iPad landscape). • I strongly recommend to consider all these screen resolutions if you want to make your design a responsive one. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 10
  • 11. How does it look in practice? • The first step we should do is to include a meta tag "viewport" into <head> to tell the browser that this webpage is optimized for mobile. <meta name="viewport" content="width=device- width, initial-scale=1.0"> by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 11
  • 12. jQuery is your friend • jQuery is definitely a super useful tool when it comes to web development. Lots of jQuery plugins can help you to create better responsive websites. A quick round up of my personal favorites: • FitText: A plugin that makes font-sizes flexible. • Elastislide: A responsive jQuery carousel plugin. • Supersized: A full screen background slideshow plugin. • FitVids: A lightweight, easy-to-use jQuery plugin for fluid width video embeds. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
  • 13. Thank you by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13
  • 14. Author Sameera Thilakasiri is a website designer based in Colombo. Specialist in UI, UX, SEO, IA, IxD, RWD. He is blogging technical areas while is leisure. He can be reached by http://www.sameerast.com by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14