Having a web page is increasingly important not only for companies and organizations, but more and more professionals are using a personal site as a means to build their own brand and to showcase their work.
Yet, as personal sites become increasingly common, users are increasing their expectations for every site they visit. Not only do they expect sites to be structured in a way that is intuitive and easy to navigate, they also demand great content that is error-free and puts your best foot forward. Finally, your web site has to be visually appealing!
When I was learning to code, I was confident that, by reading and analyzing the sites I admire, coupled with putting in hours of practice in writing, I could create good web content. Yet, is there a way for me to design a site myself, so that I won’t have to hire a web designer or ask a sighted friend how my site is looking every five minutes?
After experimenting with a number of resources, here are my top 3 strategies for designing responsive and attractive sites as a blind developer.
Download and use free CSS templates
A quick search on Google for “Free CSS templates” will bring up sites with hundreds of free CSS layouts you can use on your site. My personal favorite, by far, is free.css.com. This sites houses thousands of free or open-source CSS web sites, layouts, and menus. When you download one of these designs, you will get a zip folder containing a CSS stylesheet and the accompanying HTML file with the skeleton site. Many designs will also include supplemental folders with the images, icons, and even scripts to make the site more dynamic.
Since the authors have done most of the heavy-lifting in the design department, you can focus on creating great content and plugging them into the appropriate sections of the page. Otherwise, feel free to visit one of these folders and change the scripts, tweak the design, or add images to personalize your site even more!
Create a WordPress site and use a WordPress theme
WordPress is a free, open-source content management system, and this popular software powers over one-third of sites on the web today. Because it is so widely used by both programmers and nonprogrammers alike, many developers have created beautiful, responsive themes, or templates, for a variety of different sites. There are thousands of WordPress themes tailored to blogs, portfolio sites, landing pages for small businesses, and web sites for nonprofits, just to name a few. Many themes have supplemtal plugins, which are small web applications designed to increase the functionality of your site.
Unlike free web templates, which are created for single-page sites, WordPress themes are designed to adapt to sites with a range of different pages. So, if you need to find a design for your site with the Home, About, Contact, and Work pages, you bet there will be a collection of WordPress themes to meet your needs. Finally, each theme has a free demo site that you can download, view, and even import into your own site, so you can better determine if this is the right one for your site.
To set up your own WordPress site, first purchase a hosting plan from a web hosting provider. After the purchase is complete, your web hosting provider will give you a one-click install to set up WordPress software on your site. After installation finishes, you will be provided with a panel of free themes. You can either choose a theme from one of these, or purchase a premium theme from Marketplace. Premium themes usually feature higher-quality design and greater flexibility in customization. Just like with free CSS templates, you can choose to work with the current design and start adding content to your site, import content from the demo site and modify it, or tweak the design until you are satisfied.
Set up your site with a framework
A framework is a design structure for creating responsive web sites and apps. Like web site templates and themes, the generic functionality frameworks provide lets you launch a site quickly, while the ability to overwrite any function gives you the flexibility to customize your site. Because frameworks allow you to add Javascript plugins, you can easily spice up the user interface of your site even more!
In this article, I will briefly introduce two of the most popular frameworks, Bootstrap and React.
Bootstrap
Created at Twitter, this open-source library uses a 12-grid system with design templates for common components such as headings, dropdowns, buttons, and typography. The availability of more than a dozen jQuery plugins allow you to customize your site in ways that neither web design templates nor WordPress themes could. To learn more about how to use Bootstrap, see this tutorial from W3schools.
React
Created at Facebook, this Javascript framework aims to simplify front-end development by dividing user interface design into components. React.js powers the UI for major web applications online today, including Facebook, Instagram, and Kahn Academy. To learn more about how to use react, see The React Handbook.
Conclusion
Although web design can be tricky for blind developers looking to launch their sites, creating a responsive, beautiful site is no longer impossible. Thanks to the availability of design templates, themes, and frameworks, it is possible to build responsive sites to engage with your visitors–even if you are blind.
I hope this article gave you some ideas about how you might go about designing your site. Let me know what you think in the comments!