We code all our new web sites to be fully responsive and here’s why…
What is a responsive website and how do you design one?
A responsive design website is one that automatically adjusts to the screen size or device that someone is viewing your website. In the very early days of website design, websites were coded via “html table design”. This method effectively created a grid based website that was then delivered to your computer. This was initially a good way to ensure your website looked the same on different computers and browsers in the 90’s.
From table based design grew pure “html and css” based styling. This removed the clunky chunks of code for specific table cells/regions, instead providing styling information based on either inline styling or via a separate “style sheet” – css stands for cascading style sheets and is an additional file that helps an internet browser render a web page.
Ex table based coders used to code elements in HTML and CSS rather like they used to with tables. This led to very rigid designs. As different screen sizes became popular, and mobile and tablets became available this led to websites that needed to be scrolled in all directions to be seen – or ones that were automatically shrunk so small so as to fit on a screens width.
Again, certain web companies entrenched in the old table based designs then started developing specific alternative websites for different devices such as mobile or tablet. In the very early days this worked to an extent, if you ignored the duplicate content issues with the SEO factor, however the sheer number of devices and screen sizes grew to the point this just wasn’t an option anymore.
↑ Responsive Website Design Example
Here at degal, even from the earliest days we coded for flexible divisions, that enabled websites to naturally expand and adapt to the screen size – in fact we were creating responsive designs before the term was even coined! One of the reasons for this was a series of excellent tutorials by Adobe, that taught the basics of designing via percentages as opposed to fixed terms – Steven Galton our founder has an interest in maths and this percentage approach “just made sense”.
Even now some so called “fully responsive websites” actually have fixed font sizes and bloated inline styles added, rather than adaptive flexible style classes. If you set a font size at say 20px – you are defining a set size for that text display on all devices. If you set the font size to 1.25em however you are setting a relative value based on the default text size for the device or browser you are on. What this does is enable your text to expand or contract in relation to the relative default value of text sizing.