Responsive Sites
The term "responsive website" has become very popular lately. In short, for those who are unfamiliar with the term, a responsive website is one that adapts its contents according to the dimensions of the screen on the device which you are using. The display will always be of the most convenient size to use on any device and any screen size (desktop computers, notebooks, tablets and smartphones). Other solutions that were the accepted norm in the past, such as a separate version of the website for mobile phones, are no longer relevant. The right kind of solution for building an advanced, modern website in today’s market is a responsive site.
We built our first responsive website in 2012 for the Weizmann Institute's human resource website. Since then, we have built dozens of unique responsive sites and have accumulated vast experience in the varied and complex aspects of the field, and in the challenges involved in building a good and professional responsive site.
Responsive design makes the process of building a site much more complex. There are pre-designed kits such as Bootstrap, which are easy to use and which allow rapid development for a low budget, but the main problem with using this type of sets – (as with using templates in general) is that it makes all the sites that utilize it look the same.
We are not the only ones who think so. See this article on the Webydo website, or this article in TheNextWeb, and this one the Friday site. And finally, do not miss this comic website which satires bootstrap websites.
So how do we work?
Just as any self-respecting chef does not use soup mix, but goes to the trouble of preparing a slow simmering bouillon for many long hours, thus we relate to the code with which our sites are built. Gourmet code. We always start with a blank page and we program the design settings individually, by hand, pixel by pixel, because this is the only way to execute the unique design of your site in an exact fashion - one that will always work on any mobile device, tablet or 50-inch computer screen.
Besides the perfect compatibility of the site to its design, another important advantage is achieved: the site's code is written optimally for design purposes, and is therefore "thin", efficient, focused and easy to maintain, and does not include unnecessary code that no one uses. This results in a very fast loading and fast operating site.
Additional characteristics of our responsive programming design:
- We write the most meticulous, fast, accurate and high-quality code, semantic, efficient and free of tables (we write code by hand, each line is checked, by automated tools as well).
- We are very proud of our strict adherence to the standards of The World Wide Web Consortium (W3C). All the pages in each site we build achieve 100% validation at the stage when the site is delivered to the customer. Read more about this topic on the search engine optimization page »
- We take into consideration organic promotion aspects at every stage of site development. When the website is launched, it does not have to be adjusted. Everything is ready, already works and is accessible to all the search engines. Google already falls in love with the site on its next visit. Read more about this topic on the search engine optimization page »
- We carefully separate design and content, which enables better browsing speed and allows any future changes that are made to the site to be completed with minimal effort. This is an important value when building professional sites (Separation of Presentation and Content). For further reading »
- We will almost never tell the designer "It's impossible." If there is no existing solution for the particular behavior that the site needs to include - we will develop it. We really like to write JavaScript.
- When we write the basic code we already take into account compliance with the law of accessibility. This kind of meticulous work ensures the site's optimal accessibility and helps people with disabilities use the site comfortably. Read more about this topic on the Site Accessibility page »
- We check our sites on the latest versions of all popular browsers, as well as on those that are less popular: Chrome, Firefox, Safari, Opera and even Internet Explorer (version 10 or higher). Our sites are also tested on smartphones (iPhone and Android) and various tablets.
- We pay a lot of attention to smart and correct handling of the images that are uploaded to the site. Many sites display images exactly as they were uploaded. Sometimes these are files of several megabytes, which take long seconds to load. The problem becomes even worse when you browse the site on a smartphone, where browsing speed is always slower. On our websites, the images are processed and adapted to the needs of the site as soon as they are uploaded, maintaining a balance between image quality and file size. Sometimes we will create two versions of the same image, one designed for small screens and one for regular screens. This adds a lot of work, but ensures that your site will be fast and dynamic.
- Breakpoints - as many as necessary: a responsive site should adjust itself to the screen on which it is displayed, ranging from 320 pixels (screen of iPhone 4 and other small cellphones) up to a width of 2000 pixels or more (large computer screens). Many web designers still design for only three responsive modes (known as breakpoints): Mobile (320 pixels), Tablet (768 pixels), and Desktop (1024 pixels or higher).
This was the accepted approach up until a few years ago, because these were the measurements of the devices available on the market, but since then countless new models of smartphones and tablets in different screen sizes have appeared on the market, as well as monstrous computer screens with huge resolution sizes. Sites tested only at the three breakpoints will not always function properly on devices of non-standard size. Thus, you could be browsing on your smartphone and find images that go beyond the screen, or see large holes that are obviously not part of the design.
Our sites are tested across the spectrum, from 320 pixels or more. We are not afraid of adding breakpoints when necessary, so as to match the look of the site perfectly on any screen.