Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing.

Could you please advise me on which codes to use for implementing responsive design?

I am aware that using percentage values for width and height can be beneficial. However, I am not entirely sure how to properly incorporate % values. Are there any other steps I should take?

htmlcsslaravel-5responsive-design

Answer №1

I prefer utilizing "rem" units to prevent any issues, especially when it comes to the max/min widths of media.

Assuming 1rem = 16px for your desktop design, in almost all cases things will work smoothly even on lesser-known devices.

https://www.w3.org/TR/css-values-3/#font-relative-lengths

EDIT: (due to the comment)

There are a couple of key points. 1.- Utilize "rem" for sizing elements (like font-size: 0.875rem rather than font-size:14px) to maintain proper proportions relative to pixel size, 2.- Employ @media queries to adjust layout based on screen width, incorporating rem sizing as well, where min-width 20rem equates to approximately the width of 20 "M" letters (not entirely accurate, but close).

For example, imagine you have a 24-inch screen with 1480px resolution, and your friend also has 1480px but on a 6-inch screen. If you set the font size to 12px, it may look good to you, but small to your friend. Device/browser developers may establish different rem sizes based on the physical size of the device (e.g., 24px), so your 0.875rem will translate to 21 pixels on their screen (more comfortably legible).

The adaptation of layout for narrow screens can also involve these rems, providing a more user-friendly experience for both scenarios. While you have a screen width of 92.5 rems at 1480px, your friend would have 74 rems due to the smaller display size.

Answer №2

If you're looking to create a sidebar that takes up 1/4th of your website, using percentage values can make it simple:

.container { 
   width: 75% 
}
.sidebar { 
   width: 25% 
}

By setting the container to 75% width, you leave 25% space which can neatly accommodate a sidebar next to it (don't forget to add float:left to both elements).

But what about mobile view where you want both the container and sidebar to be 100% width? You can achieve this with media queries:

//medium phone size
@media screen (max-width: 425px) {
   .container {
      width: 100%
   }
   .sidebar {
      width: 100%
   }
}

Answer №3

Here are a few options for addressing this issue:

  • Implement media queries in your pages to make them responsive.
  • Utilize a CSS grid along with media queries.
  • Consider using Flexbox in combination with media queries.
  • Explore other CSS frameworks that include a built-in grid system.

Answer №4

One way to create a responsive website is by utilizing Bootstrap. This framework not only ensures responsiveness but also offers a wide range of pre-designed styles for elements like buttons, fonts, and tables, making it easier to implement with just a few classes.

If Bootstrap seems daunting, consider following the advice from @Damian Makkink and @Marc_DNL that has been shared in previous responses.

In my opinion, developing a custom CSS for a responsive site and design yields better results. Personally, I started with Bootstrap for my hobby project, but eventually transitioned away from it altogether.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reposition picture "overlays" additional HTML components

I am struggling with rotating an image by clicking on a button as the image overlaps the buttons. Can anyone provide guidance on how to achieve this without overlapping? For reference, here is my code and an example: here (http://jsfiddle.net/jj03b17n/5/) ...

javascriptjqueryhtmlcssrotatetransform

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

javascripthtmlcssvue.jsrangy

Can the information from a form be automatically submitted to the server upon selection?

<div class="modal-body modal-body-step-2"> <form action="prenotazioni.php" method="post"> <div class="input-group"> <input type="radio" name="spettacolo" value="Lo Schiaccianoci">Lo Schiaccianoci<br> ...

htmlajaxforms

Error: The PHP contact form is displaying field names instead of the actual values being entered

I am completely new to this and would appreciate some guidance. I have set up a contact form on a website, but I seem to be encountering some errors. Here is the email content I receive from the contact form: <p>$usersname has contacted you from you ...

javascriptphphtmlajaxforms

Optical imaging-guided Page Division

Looking for guidance on implementing a program that can perform "Vision-based Page Segmentation" with practical information rather than just theoretical knowledge. I prefer using JS (jQuery) and PHP for this project. After reading the article on VIPS: a ...

phpjqueryhtmlalgorithmimage-segmentation

Tips for aligning images directly alongside text without any separation

I'm currently learning html and facing some challenges with coding my own blog page. My main issue is trying to design a section that leads to the latest post, but I can't seem to get the layout right. I envision having the text and image neatl ...

htmlcssimagecss-float

Menu toggle vanishes suddenly

Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be gr ...

javascripthtmlcssbootstrap-4

Extract HTML href links that correspond to a specific string from a given list of strings using Beautiful Soup

I am currently working on extracting specific URLs from a webpage that contains a list of various links. My goal is to only retrieve the URLs that match certain strings in a predetermined list. These strings are a subset of the text found within the links ...

pythonhtmlweb-scrapingbeautifulsoup

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

javascripthtml

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

htmlcssasp.netvb.netasp.net-webcontrol

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

htmlcsscss-position

Creating a complete webpage using HTML

Is there a method to load an HTML file and execute the embedded javascript to create a complete HTML page programmatically similar to how browsers do? Edit 1 - I am working on an application where I need to extract data from an HTML page on a remote websi ...

javascripthtml

I'm having trouble getting my HTML button to redirect to a PHP link

I'm attempting to call a PHP script from my HTML file. Here's the snippet of my HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

phphtmlweb

Unable to retrieve custom CSS and JS files hosted on the server

Encountering Server Issue My server is returning a 404 NOT FOUND error when trying to access my static files: css and js. In IntelliJ IDEA, the path appears correct as shown in the image https://i.stack.imgur.com/nTFv9.png. However, upon accessing the pa ...

javascriptjavahtmlcsstomcat

Transforming a Java Array or Collection into a JSON array

After running my Java code, the returned Collection (ArrayList) produces JSON through JAXB that looks like: {"todo":[{"name":"CAMPBELL","sales":"3","time":"1331662363931"}, {"name":"FRESNO","sales":"2","time":"1331662363931"}]} However, I am wondering if ...

htmlajaxjson

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

htmlcssmacosbootstrap-4navbar

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

javascripthtmlcssbootstrap-modalbootstrap-5

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

csshtmlinternet-explorerinternet-explorer-8

Is it possible to link click and onchange events?

My code includes a function that updates an empty array and displays content in two separate HTML elements each time a radio button is selected from a select list. The content is displayed in a div and a ul element. Additionally, I want to display more rad ...

javascriptjqueryhtml

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

javascriptcssexpressaxios