Designing in the browser – How does it work?
Designing in the browser as opposed to designing using Photoshop is a concept that hit the spotlight a few years ago and since responsive, flexible width web design became a necessity in the past year, it seems to have taken off once again. In April last year Google announced that in order to be ranked highly in the SEO stakes, you needed to be mobile-friendly. The infamous release of the mobile friendliness algorithm caused a bit of a digital frenzy causing a lot of online businesses (particularly e-shops) to panic about re-designs and upgrades right up until the back end of last year.
Why is designing in the browser necessary?
That announcement was not only necessary but rather obvious as the shape of our digital world has accelerated dramatically particularly in the past 5 years and is continuing to grow and evolve daily. This is one reason why ‘Designing in the browser’ is really becoming a ‘thing’ now. It isn’t quite a trend, but more so a flexible and efficient concept that makes it much simpler to churn out pretty standard but very clever intuitive websites.
The release of that particular pro-responsive algorithm meant that web designers and web developers had a period of time where demand was even higher than usual. This is a point where designing in the browser took precedence as a necessity rather than a choice, it meant that developers were able to quickly update websites and make design changes.
So essentially by designing in the browser you are selecting HTML and CSS as your primary tools for the build. By using coding language and powerful tools like Bootstrap as your start point, you are effectively cutting out the middle-man (PhotoShop, Illustrator etc) and creating a working prototype that exists directly in the browser. This prototype is live and developed with navigational capabilities built in. So unlike a Photoshop clickable layer, websites designed within the browser are interactive and online right from the word go.
What do the experts think?
“If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach.”
Matt Griffin – Designer
“Creativity is tool independent. Working directly in the browser confronts you immediately with possible limitations and helps you evolve your design. However, in my experience it’s no substitute for an early cut in UxPin and Adobe Photoshop. These approaches aren’t mutually exclusive either. I use Adobe Photoshop a lot, even when designing in browser. These days it also has some great extensions to help you code much more efficiently.”
Joel Diaz, Designer
“Design is an iterative process, one that is made more difficult by working for clients. It’s hard sometimes for clients to picture exactly what you are describing; designing in the browser can get them involved throughout the process rather than just the design phase.”
Daniel Kling, Web Designer Depot
Designing in the browser can be a bit slower if you’re not confident at coding.
Joel Diaz, Designer
“As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.”
Andy Budd, Designer
“While it’s important to think about more than just visual style when designing a website and knowing the limitations of the web is essential, starting a design in HTML and CSS can be a tedious and stifling experience.”
Ian @ webwisecreative
Why you might consider designing in the browser?
In order for web designers to remain ahead creating effective and efficient designs, they must be flexible to changes and updates in the capabilities of web development processes.
Although designing in the browser as a concept isn’t new, it is one that been the subject of many arguments in the past couple of years. However it seems that the ease of use of some HTML based tools such as Sublime Text (Free) and DreamWeaver are managing to alter some of these perceptions.
It seems that any web designer or web developer who can work with HTLM/CSS could potentially begin designing in the browser and in terms of pace and efficiency of workflow, it could really revolutionise the way they work.
It is not only speed and efficiency that makes designing in the browser first a viable option. See below six other reasons why DITB could work for you:
- Designing in the browser considers UX from the off
User experience is extremely important and should be one of the first things you address when meeting with a web designer and a web developer. Designing in the browser allows you to consider the user straight away as you are able to navigate through the design sourcing the glitches as you move through. It seems that this can sometimes be a secondary though when you begin designing offline. The UX is also easy to ‘guess’ when you are working offline which means that you sometimes promise advanced capabilities that are actually not possible once the design is online.
- Pages are interactive and not static files
As soon as you being designing in the browser you are creating interactive files online that can be accessed by your client as you proceed. This means that you can show the client exactly what the pages can do, rather then attempting to show what something looks like in hover state or on click.
- Offline design tools work with fixed widths, where as all browsers need flexible width
If you are designing using an offline tool you may find that you are not able to design fully with the responsive website in mind. Unless you design a desktop version and a mobile version then your client will not always be able to envisage how the website will work. However when designing using the browser you can show a demo version to the client from the very early stages.
- Quick set up of frame-works using bootstrap or Foundation
Wireframes are where a web designer usually starts his/her design journey, however by starting using HTML and CSS frameworks in BootStrap or Foundation the initial set-up process is cut dramatically. HTML frameworks are easy to edit and adapt quickly and they can work responsively so you do not have to consider that as a complication within the initial design process. This means that you can work with fluid grids, so responsiveness isn’t just an afterthought.
- Quick changes can be made,to colour, typeface and layout by editing the code
When designing in the browser you are able to quickly change all elements of the design very quickly. This means if you have a client who makes lots of changes during the design, you do not have to continuously update the psd layers.
- Allows for cross-browser compatibility testing
With so many browsers hitting the web, it’s important to consider how a design might be rendered differently across browsers. Often, a web designer specifies a design in a design tool while neglecting to consider if the designed feature is compatible with current web browsers.
Let reactive design your website for you!
Whether you are considering mobile first, in the browser design as a way forward for your next project or if you like the traditional ‘let’s get the ideas down with a pen and paper in hand’ sort of approach then Reactive are here for you.
We have experience working with a range of customers and clients across various sectors and we can work to fit your brief. We pride ourselves on working within the latest and most creative realms of web design and development soaking up each and every technological advancement as it comes.
We are here to help you! So if you need any advice, a free quote or just want us to get started on your website asap, we do have availability so please just get in touch.
If you have any comments regarding this, or any other of our blogs then please comment below.
