Web design

Website design & accessibility

Main problem that occurs is that designers focuses mainly on designing the website so it looks great. But lot of times they ignore about the user experience for people with disabilities and also people with age related impairments. There are many simple solutions for the problems: ● Lighthouse ○ Google supported tool ○ Creates html report ● ARC Toolkit ○ In browser extension ○ Lists all violated accessibility test ● NoCoffee -Vision Simulator

This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.

First register your site in Google Search Console. Then create a sitemap and submit your site to search engines such as Google Webmaster tools. Sitemap help you to ensure that your pages are indexed by all search engines. You can also create a small tool (e.g. with Node.js) which creates XML sitemaps collecting all URLs on your site and adding automatically keywords and modification time for them. This is for creating and submitting sitemaps more frequently and ensuring that all your sites URLs are listed correctly so that google web crawler can faster index your site. This improves your site visibility in google search engine.



Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.

<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>



A well tested solution is to paste the text into the address bar of your web browser and it will remove the formatting, so you can then directly copy and paste it into your document.
Currently the most popular web browsers remove the formatting for internal use and appealing UI.

There are many solutions for this:

1. add this to the child (note: a width needs to be specified):

margin-left: auto;
margin-right: auto;

2. use text-align: center

3. use flexbox

Using flexboxes for this purpose is a good solution, however, further css must be implemented in order for the content to be responsive.
An alternative would be to use a wrapper containing both items, and giving it a "position:relative". Then using "position: absolute" in both of your divs (assuming you've got one for the bar on top and anotherone for the content). You would also need to restrict the heights of the top-bar component.


position: relative;
#top-bar, #content{
position: absolute;
height: 50px;
width: 100%;

Firstly I made the root div fit the screen by giving it the attribute "height: 100vh;". I then used flexbox to make the root div show the items in a colum by adding "display: flex; flex-direction:column;". The last thing I added was "flex: 1;" to the content div which is equivalent to "flex: 1 1 0;" This means "flex-grow : 1; flex-shrink : 1; flex-basis : 0;". Grow and shrink make the div grow and shrink in same proportion as the window-size. Basis makes the div take up screen as per the screen size available. For example if there are 4 divs with this they will all take up 25% of the available space.

Trying to fit the screen in CSS

In a web application I am developing, I had a CSS design problem. I had a title bar on top and underneath I had the content. I needed to get the content to spread itself to fit the whole screen instead of squeezing itself to the top.
Subscribe to Web design