RTL Layout - The right to left (RTL) layout must not only accommodate the language reading from RTL but also the images, menus, etc. Basically, the entire page has to be flipped horizontally. This article addresses some of the technical aspects of working with HTML and CSS for RTL sites.
Drupal was suggested as a helpful platform because it has in-built features that allow for internationalisation. There is also a layout switcher that can switch the layout from RTL to LTR while keeping shared content.
Images - Since the entire site will be read RTL, different images will be needed to make sure the site looks right. The author explains that simply flipping the images will not be sufficient and that alternate images would often be needed. Additionally, iconography assumptions must be checked because some may not translate well.
Text and font considerations -
Besides directionality, there are other considerations related to the language and the characters. Arabic characters are shorter and wider than Latin characters, giving the text a different overall appearance. One source suggested using a minimum font size of 16px to account for this.
Translations, linguistic and cultural - Translations must not only be checked carefully, but may influence the layout for buttons and other small elements. multiple sources suggested there are times when a sentence is required to convey the concept held in a short English word.
Additionally, there is a wide dialectical range across Arabic speakers so pages should use the Modern Standard Arabic (MSA), which is widely understood, while remembering to include dialectical differences when setting up SEO.
Design elements as fundamental as colour have differing meanings across cultures. Further, all content (text, images, etc.) should be checked for elements that may be seen as culturally sensitive or even inappropriate. Importantly, Simonsen points out that cultural standards vary widely across the Arabic speaking world.
Arabic website - design for right to left languages
Cultural Considerations for Global Websites
Right-To-Left Text in Markup Languages
Showcase Of Web Design In The Arab World
The Insider Secrets To Creating Compelling Arabic Websites
What's Different about Arabic web Design?
Metaphor in web design
Metaphors use real life associations and meanings in design to speed up recognition and understanding of concepts and to facilitate navigation. Examples include:
Buttons and navigation tabs: In web design these items behave as they do in real life. Click the button to start some action or to turn on a feature. Select a tab and get access to the information inside.
Icons are less literally associated with their intended meanings, but only by a step. Choose the house icon to go to the home page; Click the magnifying glass to search for something; Select the envelope to see what new email has arrived.
Metaphor is used in conceptual design as well. An example discussed in lecture is the visual metaphor of a bookstore used in the Book Depository website. iBooks and Kindle use a similar device. Using the image of a garden or tree to invoke the idea of growth is another example.
Here is a selection of examples from my reading (citations below)
5 Reasons Why Metaphors Can Improve the User Experience
Inspiring Examples of Symbol and Metaphor Use in Web Design
Master the Metaphor
Using metaphors in web design (the Sheep)
Using Metaphors in Web design (tuts+)
Skeuomorphisom - what is it and how does it relate to flat design?
Skeuomorphism is similar to realistic design in that it is intended to resemble something we are familiar with. Sven Lenaerts cautions that skeuomorphism is distinct from realistic design in that it needn't look realistic, just that it includes elements of the real item. Flat design takes another step away from realism by stripping away the dimensional aspect of design to give the 'flat' effect.
He uses these images to make the point:
Flat design has been growing in popularity over the past years, and may have hit a plateau. From reading a range of articles on the topic, here are a few pros and cons to the trend:
- Popular design trend
- Modern appearance is appealing to users
- Streamlined, straightforward style
- Faster load times due to more 'lightweight' images
- Useful where illustrations don't need to be realistic
- Makes the content the focus, rather than the imagery
- Though popular now, it is a trend, and several writers suggest it will ebb with time
- Very different from 'real life' and the types of images people are used to
- Can be hard to tell what is clickable and what isn't
- Difficult to clearly represent real items
- Not appropriate for all projects