SlideShare a Scribd company logo
1 of 14
HOW TO BUILD 
YOUR WEB 
PAGE MOBILE 
FRIENDLY
HOW TO BUILD YOUR WEB PAGE 
MOBILE FRIENDLY 
 If you view this website on 
your phone, you will notice 
all the content displays 
perfectly in one column, but 
if you view it on a desktop 
computer, you will see 2 
columns. 
 This is an example of a 
receptive website design. It's 
a trend that people are 
utilizing now to make their 
websites more mobile warm 
and friendly.
WHY RESPONSIVE WEBSITE DESIGN? 
 The goal with responsive web designing company 
Bangalore is to have one site with numerous 
elements that will respond effectively on unique 
sizes of devices. No need to make several versions 
of the site anymore. 
 Remember, most users do not take pleasure in any 
site that causes them to take supplemental steps to 
use it. Also having an effect on the problem is the 
fact that many smartphones on the market and 
tablets can be used either in landscape or portrait 
position.
WHY RESPONSIVE WEBSITE DESIGN? 
 Smartphone users may be able to run over their 
screens to view all the columns, but it's best to make 
sure they don't have to. Images should instantly resize, 
so they won’t appear distorted.
HOW TO CREATE A WEBSITE RESPONSIVE 
 How to Create a Website Responsive 
 What method you choose is going to depend on the time you're 
willing to invest and amount of money you want to devote. 
Here are a couple of options you can consider... 
 Get a Responsive WordPress Style 
 This is the simplest solution for most people and since more 
and more people use WordPress to create websites, it's 
becoming a more well-known choice. A reactive theme already 
has the code in place out of the box. So as soon as you install 
it, you're done! 
 So if you created your site with WordPress, just search for a 
theme that is already reactive .I use the Prose theme and love 
it. I am also using that same theme for this site even though it's 
static.
MAKING USE OF MEDIA QUERIES (CSS3) 
 If you don't have a responsive theme or you have an 
HTML / static website, you can add media queries to 
your established web designing companies 
Bangalore. Sounds challenging, but that just means 
you have code in a style sheet that tells the browser 
how to display your website in different answers. 
@media screen and (max-width: 480px) { 
#sidebar {display: none ;} 
} 
If you use WordPress, you can find your style sheet 
under Physical appearance >> Editor.
DEALING WITH IMAGE-BASED HEADERS 
 The Responsive Images Wordpress blogs plugin will 
allow you to create different sized headers that will load 
depending on the size of the mobile device. If less 
competent mobile devices are being used, this will allow 
them to download smaller image files.
ENTRUSTING YOUR MOBILE RESPONSIVE DESIGN 
 If you'd instead not fuss with any of this, you 
can always hire someone to do the job. 
 Sites like Elance and oDesk help you find 
experienced people. Plus, you can preview their 
work history and feedback. 
 In fact, if your established mobile responsive 
design is quite complex, it might be better to 
use outsourcing for the task to prevent you from 
pulling your hair out. 
 Just remember to choose your developer wisely.
ENTRUSTING YOUR MOBILE RESPONSIVE DESIGN 
Avoid the urge to save money in development, 
since you don’t usually get more than what 
you paid for. 
Good developers are worth the selling prices 
they charge. Be open to working together with 
them, and be ready to discuss any details they 
may have to show you. 
 As soon as you post your job, freelancers can 
begin making use of. Many will only reply with 
a stock message and their resume/experience 
affixed.
FACTORS TO AVOID WITH RESPONSIVE PATTERNS 
1. Slow loading websites. 
 If you want to deliver a full-size practical experience even on 
mobile devices, you’ll want to make sure that mobile users 
will essentially wait for the page to load. 
 Many mobile users actually leave after waiting only five 
seconds for a page to be loaded. 
2. Hiding important content. 
 website designing companies in Bangalore have the 
ability to hide any element of the website. For example, you 
can opt to hide your sidebar on very small devices. 
 Make sure this makes sense for your website. The goal is not 
to penalize mobile users for the devices they have chosen. 
Make sure that the most important functions of your website 
can still be accessed.
FACTORS TO AVOID WITH RESPONSIVE PATTERNS 
3. Thinking that one-size-fits-all will work 
 Mobile devices mean more than just smaller screen 
sizes. There needs to be more effective use of 
responsive design than on the site layout alone. 
4. Disregarding context 
 Each system has its own interfaces, chances and 
constraints. Keep all those variables in mind when you 
strive to create a user experience that will feel natural. 
 Think about the icons that people use, and how they 
orient their devices. Responsive sites should go outside 
the browser box and reach out to the user.
HOW ARE MENUS HANDLED? 
 Not all navigations 
look great "as is" 
when sites become 
responsive. 
 If you don’t handle 
this appropriately, the 
nav can break in 
unusual places on 
mobile screens. Think 
about the small 
screens when you are 
working on planning 
your site.
FOR MORE INFORMATION VISIT US : 
 web designing company 
 Mobile No: +91-9591505948, 8880102111 
 Address 
No:43, Siddappa Building, 
10th Cross, St Antonys School Main Road, 
Ramamurthy Nagar, 
Bangalore – 560016 
 Mail id : contact@quadraincorp.com 
 Website: 
http://www.webdesigncompanybangalore.co.in/
Thank You

More Related Content

Recently uploaded

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

Recently uploaded (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 

Featured (20)

Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 

How to build your web page mobile friendly

  • 1. HOW TO BUILD YOUR WEB PAGE MOBILE FRIENDLY
  • 2. HOW TO BUILD YOUR WEB PAGE MOBILE FRIENDLY  If you view this website on your phone, you will notice all the content displays perfectly in one column, but if you view it on a desktop computer, you will see 2 columns.  This is an example of a receptive website design. It's a trend that people are utilizing now to make their websites more mobile warm and friendly.
  • 3. WHY RESPONSIVE WEBSITE DESIGN?  The goal with responsive web designing company Bangalore is to have one site with numerous elements that will respond effectively on unique sizes of devices. No need to make several versions of the site anymore.  Remember, most users do not take pleasure in any site that causes them to take supplemental steps to use it. Also having an effect on the problem is the fact that many smartphones on the market and tablets can be used either in landscape or portrait position.
  • 4. WHY RESPONSIVE WEBSITE DESIGN?  Smartphone users may be able to run over their screens to view all the columns, but it's best to make sure they don't have to. Images should instantly resize, so they won’t appear distorted.
  • 5. HOW TO CREATE A WEBSITE RESPONSIVE  How to Create a Website Responsive  What method you choose is going to depend on the time you're willing to invest and amount of money you want to devote. Here are a couple of options you can consider...  Get a Responsive WordPress Style  This is the simplest solution for most people and since more and more people use WordPress to create websites, it's becoming a more well-known choice. A reactive theme already has the code in place out of the box. So as soon as you install it, you're done!  So if you created your site with WordPress, just search for a theme that is already reactive .I use the Prose theme and love it. I am also using that same theme for this site even though it's static.
  • 6. MAKING USE OF MEDIA QUERIES (CSS3)  If you don't have a responsive theme or you have an HTML / static website, you can add media queries to your established web designing companies Bangalore. Sounds challenging, but that just means you have code in a style sheet that tells the browser how to display your website in different answers. @media screen and (max-width: 480px) { #sidebar {display: none ;} } If you use WordPress, you can find your style sheet under Physical appearance >> Editor.
  • 7. DEALING WITH IMAGE-BASED HEADERS  The Responsive Images Wordpress blogs plugin will allow you to create different sized headers that will load depending on the size of the mobile device. If less competent mobile devices are being used, this will allow them to download smaller image files.
  • 8. ENTRUSTING YOUR MOBILE RESPONSIVE DESIGN  If you'd instead not fuss with any of this, you can always hire someone to do the job.  Sites like Elance and oDesk help you find experienced people. Plus, you can preview their work history and feedback.  In fact, if your established mobile responsive design is quite complex, it might be better to use outsourcing for the task to prevent you from pulling your hair out.  Just remember to choose your developer wisely.
  • 9. ENTRUSTING YOUR MOBILE RESPONSIVE DESIGN Avoid the urge to save money in development, since you don’t usually get more than what you paid for. Good developers are worth the selling prices they charge. Be open to working together with them, and be ready to discuss any details they may have to show you.  As soon as you post your job, freelancers can begin making use of. Many will only reply with a stock message and their resume/experience affixed.
  • 10. FACTORS TO AVOID WITH RESPONSIVE PATTERNS 1. Slow loading websites.  If you want to deliver a full-size practical experience even on mobile devices, you’ll want to make sure that mobile users will essentially wait for the page to load.  Many mobile users actually leave after waiting only five seconds for a page to be loaded. 2. Hiding important content.  website designing companies in Bangalore have the ability to hide any element of the website. For example, you can opt to hide your sidebar on very small devices.  Make sure this makes sense for your website. The goal is not to penalize mobile users for the devices they have chosen. Make sure that the most important functions of your website can still be accessed.
  • 11. FACTORS TO AVOID WITH RESPONSIVE PATTERNS 3. Thinking that one-size-fits-all will work  Mobile devices mean more than just smaller screen sizes. There needs to be more effective use of responsive design than on the site layout alone. 4. Disregarding context  Each system has its own interfaces, chances and constraints. Keep all those variables in mind when you strive to create a user experience that will feel natural.  Think about the icons that people use, and how they orient their devices. Responsive sites should go outside the browser box and reach out to the user.
  • 12. HOW ARE MENUS HANDLED?  Not all navigations look great "as is" when sites become responsive.  If you don’t handle this appropriately, the nav can break in unusual places on mobile screens. Think about the small screens when you are working on planning your site.
  • 13. FOR MORE INFORMATION VISIT US :  web designing company  Mobile No: +91-9591505948, 8880102111  Address No:43, Siddappa Building, 10th Cross, St Antonys School Main Road, Ramamurthy Nagar, Bangalore – 560016  Mail id : contact@quadraincorp.com  Website: http://www.webdesigncompanybangalore.co.in/