Building your website doesn’t necessarily mean hours upon hours of coding. And protecting it shouldn't take a cybersecurity expert. With WordPress Build and Host Bundle, the entire process is made easy with Dragify and SSDPage. Get a lifetime subscription to this can't-miss bundle, on sale now for 96% off the retail price!
While it's good to know how to code and work with programming languages, developing a professional website doesn’t always require specialised expertise. Dragify offers 44 prebuilt elements you can move around freely, enabling you to create the perfect setup in no time. Once your site is ready to go live, you can host it with SSDPage's Anti-Hacker Web Hosting, which provides enterprise-level security to your site to keep it safe.
A lifetime subscription to the services in the WordPress Build and Host Bundle usually costs $1,344.40, but you can save 96% off the retail price. That's a huge saving for two essential tools for any web designer, so grab this deal today!
Layout for the web has always been limited, there really has never been anything truly dedicated to making content easy to display in a format that makes sense.
Back in the '90s when the web first took hold, designers who were used to laying out content on a grid, found the only way to get the same result in the browser was to use the table. Merging cells led to complex website layouts, but this played havoc with accessibility and SEO. Fast forward and today there are all manner of ways to place content with floats, flexible boxes and so on.
CSS3 has really pushed the capabilities of the web forward and since 2014 there has been CSS Grid Layout. This currently has 75 per cent browser support, so it’s getting to the point when it’s time to give it serious consideration. Zurb’s Foundation 6 framework has got on board and is using that to power its grid.
This tutorial will focus on creating a magazine-style feature that will show you how to perfect responsive web design for medium and small screen sizes.
Download the tutorial files here
01. Get started
Open the file ‘grid1.html’ from the start folder in the project files. The HTML layout for this has five div tags, simply named item1–5 as CSS classes. These will be the content placed into the grid. The container wrapping this will define the grid, which will have four columns.
02. Check CSS for the grid
Looking in the head section you can see that the 'container' has been told to be laid out as a grid, with auto height for the rows, while the columns are to be set to four with each set to 25 per cent of the browser. Check this in the browser and you will see that each item is automatically assigned the next available grid position.
03. Define grid positions
Now take a look at the 'grid2.html' file. It's the same as the first file, except 'item1' and 'item2' are given specific positions. The first is positioned in row 1 and ends before row 2. The column starts at 1 and ends at 3 so it spans two columns. The second starts at column 3 and takes the next two columns. The remaining items fill the next available grid slots.
04. Use a grid template
Open 'grid3.html' and look at the body of the HTML. You'll see that there is a layout with a header, sidebar, main content section and a footer. You can add more text into the content to see what happens when this is placed in. The grid will use a template feature to make these sections into a layout.
05. Define the template
Look at the CSS for the container. It is again defined as a grid. The top row will be 200px high, the middle will be auto-sized and the last row will be 100px high. The columns are set to be 33 per cent wide and to autofill the rest. The template states the header will fill both columns. The next row will be the sidebar in the first column and the content in the next. The footer goes across both.
06. Link the template to the class
To link up the class to the template, the code shown here defines this. Each grid area is named and the link is created. The content isn't shown here, but it's in the 'grid3.html' document. Look at this in the browser to see the layout of the grid. Because two columns are defined, the template needs two areas in each of the inverted commas.
07. Make it responsive
To make 'grid3.html' responsive, a media query is inserted and the top row is kept at 200 per cent, while the remaining rows will automatically be sized. There is only one column, the full width, so the template has one word in each inverted comma to define the layout. These can easily be reordered without shifting any of the HTML.
08. Work on a real layout
Now open 'index.html' – all of the HTML for the content has already been created, as has some of the CSS for the design elements. Add this grid to the style tags in the head section. Doing so creates a three-column grid with the template for each section. Note the full-stop for the empty grid sections.
09. Link up the template
As with the previous step, this links the header with the template. The header is told to span all three columns of the grid, then the standfirst is set to take two columns and have an empty column on the left. If you check the browser, that column is filled because the remaining content autofills the next available space – it won't do this when it's all set up, however.
10. Add the next areas
Now the first article, the pull quote and the focus image are placed into the design. The pull quote and image are side by side on the same row. At this stage, article2 hasn't been placed so it's taking the first available space on the grid which is next to the standfirst.
11. Finish the first grid
Adding the second article's CSS enables all of the first grid to be placed correctly. Looking at this in the browser will show that the layout works with the background image and creates the kind of layout seen in magazines, where the designer works around a large background image.
12. Add a white background
Before starting the second grid, you may wonder why there is a need for two grids. The reason being is that this grid is going to have a white full width background so this CSS will wrap the second grid. This is to give this section the feeling of a second page in the design.
13. Make a second grid
The second grid is simpler than the first. There are three columns, with an automatic height on the rows. The content is going to fill a column each so there is no need to define the template areas. However, when the tablet design is added, this needs to switch to two columns, so a reflow is required and the names will be important.
14. Add the columns
Each of the CSS classes in the second grid is told to link up with the relevant column, as defined in the grid template. The article text colour is changed just to make it stand out against the lighter background of this section. With only the footer to complete, the design of the magazine-style layout is almost in place.
15. Perfect the foot of the page
Finishing off the page will place a full width div across the screen, which will be filled with a black colour and the text is just centred. This completes the desktop version of the design, but move the screen down below 1200px wide and the site starts to break.
16. Adjust for medium screen design
A media query is inserted here to look after the design when the width of the browser is less than 1200px. The code for Steps 17 and 18 will be placed inside the brackets where the comment is. This will be a case of changing both of the grids' layout structure.
17. Reflow the first grid
The first grid is set to now fill the full width of the browser with just two columns instead of three. The order of the sections is placed into the template, with the articles switching sides, since this fits in better with the background image at this screen size.
18. Test your layout
The second grid is also resized to take the full width of the browser and two columns added. The images are placed side by side on the row above the text so that it fits neatly onto the display. You can test this layout in the browser by resizing your browser below 1200px width.
19. Tweak design for mobile
Any browser that has a width of less than 769px will get the code that is added in the final steps. All we need to do here is ensure that each of the grids has a single column layout so that the content can be viewed properly within the smaller space.
20. Check single column grid
Now the first grid is set to a single column of 100 per cent of the browser's width and the order of the sections is added in the template areas. Check to see how the first part of the page is working on mobile screens.
21. Finish the layout
Here, the second grid is also made to fill a single column and the layout of sections is defined. Now save the finished design and view it across different-sized screens to see the full layout capability of the CSS Grid and how easy it was to just reorder the content for different widths.
This article was originally published in creative web design magazine Web Designer. Buyissue 271orsubscribe.
In the mid-2000s, virtual agents and customer service chatbots received a lot of adulation, even though they were not very conversational, and under the hood they were merely composed of data exchanges with web servers.
Nowadays, even though a huge number of examples of ‘weak AI’ exist (including Siri, Alexa, web search engines, automated translators and facial recognition) and other topics such as responsive web design are hogging the limelight, chatbots are still causing a stir. With major investment from big companies, there remain plenty of opportunities to hack the conversational interfaces of the future.
How to design a chatbot experience
Sometimes they get a bad reputation, but chatbots can be useful. They don’t need to feel like a basic replacement for a standard web form, where the user fills in input fields and waits for validation – they can provide a conversational experience.
Essentially we’re enhancing the user experience to feel more natural, like conversing with an expert or a friend, instead of web browser point-and-clicks or mobile gestures. The aim is that by providing empathetic, contextual responses, this technology will become embedded directly in people’s lives.
Watch the video below or read on to discover a practical way to design and build a chatbot, based on a real project-intake application in a service design practice.
01. Set a personality
As this practice serves over 110,000 members globally, the goal was to provide a quick, convenient and natural interface through which internal stakeholders could request effective digital services, instead of having to fill out confusing forms.
The first step was to establish the chatbot’s personality, as this would represent the voice of the service design team to its stakeholders. We built on Aarron Walter’s seminal work on design personas. This greatly helped our team develop the bot’s personality traits, which then determined the messages for greetings, errors and user feedback.
This is a delicate stage, as it affects how the organisation is perceived. To make sure we had as much information as possible, we immediately set up stakeholder workshops to nail the appropriate personality, colour, typography, imagery and user’s flow when engaging with the bot.
After we had gained all the necessary approvals – including seeking legal counsel – we set out to convert archaic request forms into a series of back- and-forth questions that mimicked a conversation between the stakeholders and a representative of our design services team.
02. Use RiveScript
We knew we didn’t want to get too deep into AI markup language for the processing part – we just needed enough to jump-start the experience.
RiveScript is a simple chatbot API that is easy enough to learn and sufficed for our needs. Within a few days we had the logic down to intake a project request from the bot, and parse it with enough business logic to validate and categorise it so it could be sent it through JSON REST services to the appropriate internal project tasking queue.
To get this basic chatbot working, head to the RiveScript repo, clone it and install all the standard Node dependencies. In the repo you can also gain a taste of the interactions you can add with the various example snippets.
Next, run the web-client folder, which turns the bot into a web page by running a basic Grunt server. At this point you can enhance the experience to suit your needs.
03. Generate your bot's brain
The next step is to generate the ‘brain’ of our bot. This is specified in files with the .RIVE extension, and thankfully RiveScript already comes with basic interactions out of the box (for example, questions such as ‘What is your name?’, ‘How old are you?’ and ‘What is your favourite colour?’).
When you initiate the web-client app using the proper Node command, the HTML file is instructed to load these .RIVE files.
Next we need to generate the part of our chatbot’s brain that will deal with project requests. Our main goal is to convert a selection of project tasking intake questions into a regular conversation.
So, for example:
Hello, how can we help?
Great, how soon do we need to start?
Can you give me a rough idea of your budget?
Tell me more about your project…
How did you hear about us?
A typical accessible web form would look like this:
With web forms, we’re very familiar with certain patterns: you click the Submit button, all form data is sent to another page where the request is processed, and then most likely a cheeky Thank you page pops up.
With chatbots, we’re able to take the interaction of submitting a request, and make it more meaningful.
04. Design a voice
To convert this form to a conversational user interface served in RiveScript’s chatbot web client, we need to convert the information architecture from rigid to fluid; or field labels into UI strings.
Let’s consider some accessible field labels, and their related question tone:
Request: How can we help? Not sure? Do you mind if I ask a few questions?
Timeline: How soon do we need to get started?
Budget information: Can you give me a rough idea of your budget?
Project description: OK, can you tell me a summary of the problem to be solved?
Reference: Also, who referred you to us?
Next we need to convert the web form’s code into AI script, following RiveScript’s very learnable processing logic for two-way conversations:
05. Request submission
As opposed to standard form variables being sent to another page or service to process, chatbots can validate and submit information entered by the user in a chat window (or spoken) immediately, which means users can also revisit previously entered values easily.
We needed to send the user’s request entered in the chatbot UI via the JSON REST API to an external project tasking server.
In RiveScript-js we are free to make use of an XMLHttpRequest object to submit the request almost simultaneously, as the data is entered by the user:
06. Do not fear the chatbot
Soon, current ways of interacting with computers to obtain information will give in to AI-based technology like chatbots, where people just make simple voice commands, like we've seen with tech such as Amazon Echo and Google Home.
The web design community need not fear – we should all be embracing the added value of this new technology.
It could be a game-changer for the companies it works for, offering fully scalable customer service and improved customer intelligence.
This article was originally featured innet magazine, the world's best-selling magazine for web designers and developers. Subscribe here.
How chatbots are learning – interview with Giles Colborne
How the intelligent web will change our interactions
How conversational interfaces are innovating banking