3 Reasons To Wireframe in HTML
Most ideas for websites and apps first materialize as a hand drawn sketch. Next, they typically progress to a wireframe, a visual representation or mockup of the layout on a page, created in some type of graphics or wireframing specific software. If your workflow follows this pattern, consider changing things up and mocking up your site or app in the browser. No coding experience? No problem. The simplistic and minimal nature of wireframes make them a great way to start coding. Here are three reasons why you should consider ditching the middle-man software and start coding sooner by wireframing with HTML and CSS.
Simplify Your Workflow
There are several tools that are great products and well suited for the job of wireframing a design concept. But, why add a tool that only serves one purpose if you don’t have to? If that purpose can be served using a tool that you or your team will undoubtedly use later in the process of your workflow, why not use that tool? Eliminating tools that are not absolutely necessary or do not bring significant value to the team and client simplifies your workflow.
If your team is using the PSD to HTML process, using Photoshop to wireframe obviously won’t add any additional tools to your workflow. But, PSD to HTML is arguably becoming a thing of the past. At some point in the future, your team will likely transition away from PSD mockups to using the HTML and CSS for those tasks.
Save Time
The time it takes to complete your overall workflow will be reduced if you wireframe in the browser instead of Photoshop or other software. This is true even if you aren’t as fast in HTML and CSS as you are in your mockup software of choice. The time spent writing code now reduces the amount of time it takes for you, or someone on your team, to write code later. It gets you coding and the design into its final medium, the browser, sooner. This makes the overall process of designing and developing a great product for your client more efficient.
Experience Browser Behavior
Wireframes in HTML and CSS can be made responsive. This allows for prototyping the experience on mobile devices, desktops and everything in between. Breakpoints and other responsive design considerations can be determined and tested earlier as the mockup is viewed on various screen sizes or emulated on a single screen. These types of wireframes are also clickable by utilizing the same mark up and code that the production site will use. Clients and others viewing the mockup can click on links and buttons and experience the behavior and navigation of the site that they can expect with the finished product.
If you haven’t tried using HTML and CSS for wireframing, consider it for an upcoming project. Take a close look at the project and decide if it’s right for you, your team and your client.You may find you like it for the reasons described above or new ones you discover. While it may not suit every project or every team right away, it is worth considering as an improvement to the traditional workflow.