Sandvox 2 is an excellent visual website-design tool for individuals and businesses that need to create attractive sites without having to learn the HTML/CSS/JavaScript that goes into it.
Best Mac Website Design Programs Although WordPress is by far the leading platform for website development, there's a handful of native OSX web design apps worth noting. A crowded slate of Mac apps aim to make building a full-featured, modern website drag-and-drop simple. Many even support one of the most crucial new web trends: responsive design, which can.
Best web design software
Read on for our detailed analysis of each app
As with any great endeavor, web design is about both inspiration and perseverance. Back in the day, creating web pages was the sole province of hardcore coders, but that’s not the case anymore given that there are numerous tools to simplify the process. Some of these even have a visual interface, allowing you to drag and drop links, text and images as if you were designing a poster or presentation.
- Beewits has a nice line in tools to make the business side of web design easier, namely its the Web Design Quotation Generator and Hourly Rate Calculator. Now for 2018, it's brought out another superb free app: the self-explanatory Web Design Proposal Tool.
- Platform: Web browser; Price: $29 (standard) / $49 (professional) / $59 (business) per person per month Protoshare is an online tool with a focus on collaboration and sharing. It includes a library of drag-and-drop elements, a sitemap, and the ability to use custom CSS and insert your own elements.
- We have evaluated over 20 free HTML editors for Macintosh against over 40 different criteria relevant to professional web designers and developers. The following applications are the best free HTML editors for Macintosh, both WYSIWYG and text editors, rated.
Other web design tools are geared towards programmers, acting as advanced text editors, and allowing for building a website line-by-line. However, most web design tools exist somewhere between these two extremes.
In this guide we have focused on five of the very best tools currently available. When weighing up which to include, we have focused on ease of use, supported web languages, cost, and how easy the tools make it to upload the finished project once you are done.
If this is your first time building a website we recommend using a free tool such as Bluefish before spending any money. All premium tools covered in this guide offer a trial version, in any case, so you can get an idea of what they’re about before you commit.
If web design software is too complicated for you, then you might want to try online website builders that focus on simplicity and ease of use rather than on offering an extensive feature set.
- We’ve rounded up the best website hosting services
- Want your company or services to be added to this buyer’s guide? Please email your request to desire.athow@futurenet.com with the URL of the buying guide in the subject line.
1. Adobe Dreamweaver CC
Abode Dreamweaver CCAdobe Dreamweaver is a long-established app that allows you to code your website design directly, without having to know too much about programming. The software works through a mix of visual editing and HTML editing, which means it shouldn't have too steep a learning curve for most users.
Additionally, while coding your own website design requires you to put in more effort than simply using an existing readymade template, at least you have the chance to ensure you get the look you actually want, rather than trying to work around someone else's design specifications.
A particularly good feature of Dreamweaver is that it allows you to produce a responsive design, which means your website can be optimized to display on desktops as well as mobile devices, without limiting the user experience.
However, if you are a more advanced user you may be pleased to note that Dreamweaver provides multi-monitor support for Windows. It also supports the Chromium Embedded Framework (CEF) to work with HTML5 elements and CSS grids. Additionally, there's also support for Git to allow you to edit source code directly from within Dreamweaver.
Dreamweaver is available as part of Adobe's mid-range packaged app subscription service, Creative Cloud, which also includes Photoshop. The subscription costs from $20.99 a month if you pay annually, and also comes with a month's free access to Adobe Stock image. Alternatively, if you only wish to pay monthly, it costs $31.49 per month.
2. Bluefish
Lightweight and easy to use – a big fish in a small pond
Bluefish is amongst the smallest web design tools available today. The tiny installer weighs in at just under 53MB and setup takes only a few moments. While the interface is text-only, it's clearly designed with novices in mind as it employs clear-cut toolbars, user customizable menus and syntax highlighting.
While the main focus is on HTML, Bluefish supports a huge range of other languages including PHP, Java, JavaScript, SQL, XML and CSS. Unlike visual WYSIWYG web design tools, the text interface makes for much cleaner code.
Bluefish has an excellent search function, allowing you to find text across multiple projects. The tool also has no trouble juggling hundreds of documents at the same time. Although Bluefish supports working with remote files, the varied and useful dialogs and wizards don't currently support direct upload of web pages via FTP.
Despite the best efforts of the developers, Bluefish may take some time to get used to. The tool is available free of charge, however, so you have nothing to lose by giving it a try. During our test on a Windows 10 PC we found we had to install GTK+ 2.24.8 in order to run Bluefish. A download link for GTK is available via the Bluefish website.
3. Atom Text Editor
Atom is an open source editor for designing, developing, and editing code. It's very easy to use and there are developer tools to simplify the process. The integrated packet manager also means you can add additional features directly from Github, who developed Atom, and there's a drag-and-drop feature for moving files and folders around.
While a lot of people may be intimated by the idea of coding if they have no programming experience, at some point in the web design process it can be important to be able to edit code directly. This is particularly helpful if you want to customize code for existing software add-ons in order to get the features you want for your website.
Note that existing text editing apps are not good for working with code as they insert additional formatting that can render your code useless. Hence the need for a dedicated code editor.
However, Atom is free to download and use, and the extensive range of libraries available could be especially helpful. Furthermore, Atom's user interface can be tweaked and customized directly or via installing the third-party themes that help you work best, or the ones which simply make the program easier to use. Atom also comes with a very strong support community.
4. Google Web Designer
An excellent tool for creating interactive content
Google Web Designer is primarily for creating interactive content in HTML5, JavaScript and CSS. In plain English, this means its primary function is to build ads.
The good news is that this is done via an extremely simple to use GUI which incorporates point-and-click design tools covering text, basic shapes, 3D animations and much more. Any 3D features are shown on a timeline at the bottom of the window. The panels on the right-hand side of the interface allow you to fine-tune further options such as colors.
Google Web Designer also incorporates a handy library of extra components such as images, videos and other advertising tools.
Advanced users can toggle between the default 'design' view and 'code' view, which is why the tool can support creation of more advanced features besides ads – provided you have the knowledge and patience to program these yourself.
Google Web Designer is still in beta testing, so lacks certain features such as being able to open HTML files created outside the tool. Nevertheless, it does include a handy web preview option which will open your current project in your default browser. You can also automatically publish content. This Google offering is available free of charge for Windows, macOS and Linux.
5. Webflow
Cloud-based offering that needs no coding knowledge
Webflow is a cloud-based service which has been created specifically to allow people with no coding knowledge to get started with web design.
Aside from being truly cross-platform, as it's web-based, Webflow emphasizes the concept of 'smart codelessness'. In the first instance this means a crisp drag and drop interface allowing you to drop elements such as text and images seamlessly onto a page using one of the freely available templates.
Unlike many WYSIWYG editors, the code produced is very clean and well-written even if you choose the 'I have no coding experience' option during setup. Webflow's automation tool will create the necessary HTML/CSS code for you. You can make granular changes to individual elements using the panels on the right.
Webflow offers a free demonstration of its features via the website, and you can also subscribe for a free Starter package which allows you to create up to two projects. If you require more than this and/or need web hosting services too, prices start at $24 (£18, AUD$32) monthly. This is a little pricey compared to equivalent tools, mind you.
Webflow also has little support for e-commerce plugins or marketing tools. You can use a separate tool such as the aforementioned Google Web Designer to create interactive advertising content if you wish.
6. WordPress
Mac Tools Website
Building your website platform
WordPress is an alternative way to set up and design your website, being rather different to the other offerings we've highlighted here because it's actually a content management system (CMS). The power here is that it is a simple matter to set up a website in minutes. Indeed, many web hosting packages include a one-click install of WordPress from their Control Panel, but even without that, WordPress is relatively easy to install.
Once installed, the backend for administration and management is very user-friendly. You can use the existing WordPress design templates for your website, but more likely you will want to download and install an existing free or premium WordPress template – all of which can be done with just a few clicks.
Even if you would prefer to work with your own design, you can often do so using drag-and-drop functions, usually from a downloaded design with an in-built framework. This can allow you to create a professional-looking website without having to learn programming or coding at all.
Better still, there are so many free add-ons available to download and install, often requiring nothing more than a few clicks. This makes the whole process of customizing your website very simple, and it does not require any professional skills.
Overall, WordPress is a very easy CMS to use, and can provide a very quick way to get any form of website online fast. The huge variety of template designs and additional community supported features mean that getting something which is near the mark of what you want isn't hard at all. Just ensure that in the settings you select to turn off comments so as to avoid spam.
Other web design tools you might find useful
If you're involved in web design, the chances are you'll also need some graphic design skills and assets. Here we'll look at a couple of other resources and assets you'll properly need to help with your website design process:
1. Graphics program
You don't need anything too expensive or fancy unless you're chasing a career in graphic design or illustration. However, you'll probably find yourself wanting to create simple logos, headings, text features, as well as manipulate photos, all as part of your website design.
There are a lot of different packages out there, from GIMP which is a completely free software platform, to older software such as Jasc's Paint Shop Pro which remains a competent program that can be bought on the cheap at Amazon.
Alternatively, check out these other features for the latest in best, and sometimes free, software you might want to use:
2. Stock photos
On top of creating your own graphics, there's also a good chance you'll want to use stock photos to really give your website a professional look.
Stock photos are available on almost any subject matter, and on top of that there are also an increasing number of stock video websites, in case you want to add video media.
Even better is that there are a number of free stock image and video websites, but be advised that these tend to be much more limited than paid-for stock image sites.
Here you can check out some of our features on these, to help you choose the best ones:
You might also want to look at our many web hosting guides:
- Check out the best website hosting services
Today's Best Tech Deals
Best Website Design Tools For Mac
Picked by Macworld's Editors
Top Deals On Great Products
Picked by Techconnect's Editors
Softpress Systems Freeway Express 6
Read Macworld's reviewRiver SRL Sparkle
Read Macworld's reviewKarelia Software Sandvox 2
Read Macworld's reviewRealmac Software RapidWeaver 6
Read Macworld's reviewMacaw 1.5
Read Macworld's reviewRage Software EverWeb 1.8.2
Read Macworld's reviewCazoobi Blocs 1.3
Read Macworld's review
A crowded slate of Mac apps aim to make building a full-featured, modern website drag-and-drop simple. Many even support one of the most crucial new web trends: responsive design, which can automatically switch up your layout to look good on a widescreen monitor, a tiny smartphone, or anything in between.
While no single program currently offers all the power, flexibility, and simplicity I’d hoped for, I did find two particularly strong contenders that at least came within shouting distance of that ideal.
Top choice for complete beginners: Blocs
If you have no idea how to start building a site, start with Blocs (). At $70, it’s $10 cheaper than most of the other programs in this roundup. And thanks to its extensive library of well-crafted chunks of code, it makes assembling an impressively slick site almost as simple as snapping together a pile of Lego blocks.
Even before you begin, Blocs has done the hard work for you, building snippets of sample code that you can mix, match, customize, and stack. Just pick a clearly color-coded section of your design—header, body, or footer—and choose a chunk of layout to add, whether it’s a fancy screen-filling photo, a few columns of text, or a swath of smaller icons or images. Once it’s in place, you can tweak the template to suit your needs. At every turn, Blocs tries to sweat the small stuff so you don’t have to, including a navigation menu that’ll automatically update as you add new pages to your site.
Spartan but clear thumbnails help you choose which chunk to add next, and accurately represent what you’re getting. While you’re limited largely to that ready-made collection, Blocs offers a wide enough selection of appealing elements to build an appealing site. And since all the code’s prebuilt, every site you make in Blocs has responsive design support baked in, without any extra effort on your part. The sample site I built looked great on big and small computer screens, good on my iPad, and decent enough on my iPhone 5S.
Blocs’ balance between a sparse selection and effective results also applies to its feature set, including a limited but appealing roster of fonts, and its extremely basic control over text styling and padding. That deliberate simplicity helps keep new users from getting overwhelmed, and further flattens out the already gentle learning curve.
Blocs’ stark, dark design departs from Mac conventions, and some aspects take a little time to learn. Instead of bringing up contextual menus, right-clicking brings up a palette of individual page elements you can add to the existing code. Placing objects on the page can occasionally feel a tad squirrely, though it’s easy to undo mistakes or move a misplaced item.
Blocs is a work in progress, and its creator’s laid out an ambitious, intriguing slate of potential upgrades. For now, Blocs sets modest goals, but carries them out impressively well.
Top choice for everyone else: EverWeb
Deck Designer Tool For Mac
If you know just enough HTML and CSS to get yourself in trouble, trust EverWeb () to keep you out of it. It’s more flexible and freeform than Blocs’ do-it-for-me simplicity, and it’s full of thoughtful tricks to help users get around the program’s own limitations.
When creating a site, you can choose from an extensive slate of great-looking, up-to-date templates, or start from scratch. Like Pages, EverWeb lets you draw text and image boxes or other shapes directly onto your page, then position and style them as you wish. I liked the program’s clean design and well-crafted interface. It lacks a grid or guides to keep your page tidy, but EverWeb will automatically or manually align elements by their edges or centers. The layout engine sometimes had trouble accurately aligning full-width elements, but otherwise proved fun and responsive.
EverWeb offers more options for CSS styling than Blocs; it won’t give you precise control of every element, but it provides enough choices to make a nice-looking site. Top-notch prebuilt widgets, including image sliders, image galleries, navigation menus, and more, are easy to edit and customize, and they yield great results. I was particularly impressed with the PayPal widget, which lets you build a full-featured online store with minimal time and effort—an ability most rivals either don’t offer or charge extra for.
Rather than supporting responsive design, EverWeb provides mobile versions of many templates, and builds in an easy way to redirect mobile users to those pages from their desktop counterparts. That solution gobbles extra server space and bandwidth, but can also be less hassle than trying to reconfigure the same design to fit different-sized screens. Other clever workarounds let you expand EverWeb’s font roster with your own picks, a feature found in too few of its competitors.
The code EverWeb produced was somewhat messy in the version I tested, though by the time you read this, an update promising sleeker results may be available. Still, I enjoyed EverWeb’s terrific balance between friendly design and a robust feature set.
Mac Tools For Sale
Top contenders
Macaw
Macaw () talks a big game but doesn’t entirely deliver. Aimed at high-end pros, it offers more power and flexibility than any other program here. However, it’s also the most intimidating and frustrating app of the bunch, in part because it feels only half-finished.
Macaw excels at its finer points. You can tweak nearly every CSS style attribute via well-designed palettes, and build custom style classes to apply to any element on your page. Smart scripting support lets you drag in existing variables and color swatches as you write your code. And only Macaw offers pixel-precise control over responsive design, letting you set breakpoints at multiple screen widths, then rearrange your design to best fit each one.
But while it gets the little things right, Macaw seems to struggle with the big ones. I found layout exasperating, as if the program were always fighting me. The help files are sometimes confusing and often incomplete—bad news for a program as dense as this one. You can only add to its limited list of fonts by paying for a subscription to Adobe Typekit. And rather than focusing on fixing these gaps in the existing version, Macaw’s creators seem instead to be working on its new sibling, Macaw Scarlet, which promises even more sophisticated features.
RapidWeaver
If you just want to pour your content into a limited set of sharp-looking templates, with responsive design already built in, RapidWeaver () will work great. This powerfully extensible program can do far more than that, too‑but you’ll have to pay a good deal extra to unlock its full potential.
RapidWeaver’s by far the best choice here for building a blog or a podcast, with excellent, easy support for adding new entries and episodes. But I didn’t like how it forced me to flip back and forth between the raw content on my pages and a full preview of how they’d look online.
If you want to branch out beyond its small slate of templates, keep your wallet handy. The app’s online market of powerful plugins offers tons of new capabilities and professionally designed themes. But their considerable cost could quickly add up to more than you paid for RapidWeaver itself.
The rest of the pack
Sandvox
Sandvox () loses points for its limited customization and big but outdated selection of designs. However, it’s delightfully easy to use, including a super-simple integrated hosting service that seems fairly priced for what it offers. And changing the whole look of your site is as easy as choosing a new template. I think Sandvox would make a great choice for teachers and students, or for parents who want to help their kids build a fun, basic site.
Sparkle
Sparkle () is a perfectly respectable app that unfortunately gets outshined by EverWeb, which feels like Sparkle’s very similar-looking but ultimately superior cousin. I give Sparkle kudos for at least trying to make it easy to add third-party web fonts, even if the execution’s a little clunky. Its preset page sizes for responsive design also work better in concept than reality. Sparkle could become a real gem, but it needs more polish first.
Freeway Express
Living up to its name, Freeway Express () is free. And if you endure its labyrinthine help files, you can build some nifty things relatively quickly. But its cluttered interface can prove frustrating, and it renders pages with such sorely outdated techniques—years behind every other app here–that you’re probably better off avoiding it. A paid pro version offers a much more power and sophistication, but also costs a whopping $150.
Bottom line
Text editors are cheap or free, as are resources to teach yourself HTML, CSS, and jQuery—all more intuitive than they sound, even for non-geniuses. But that education demands dedication, time, and persistence, especially since today’s cutting-edge code quickly becomes tomorrow’s cobweb-covered embarrassment.
If you’d rather opt out of that Red Queen’s race, you’ll at least have a few good choices, whether you pick Blocs’ sleek simplicity or EverWeb’s user-friendly flexibility. I suspect Mac users will have even better, more complete options for building websites in a year or two. But for now, those two are the best of the bunch.
Best Web Design Software For Mac 2017
Softpress Systems Freeway Express 6
Read Macworld's reviewRiver SRL Sparkle
Read Macworld's reviewKarelia Software Sandvox 2
Read Macworld's reviewRealmac Software RapidWeaver 6
Read Macworld's reviewMacaw 1.5
Read Macworld's reviewRage Software EverWeb 1.8.2
Read Macworld's reviewCazoobi Blocs 1.3
Read Macworld's review