65 WEB DESIGN AND MOBILE LAYOUT Cross-device compatibility means a website or application functions well on various devices like desktops, tablets, and smart phones, ensuring a consistent and usable experience. Key elements of web design Web design refers to the design of websites, with a focus on user experience and visual aesthetics rather than software development. A truly effective website, in fact, blends visual and functional elements. The visual elements (which include fonts, colours, shapes, layout, icons, logos, images, and videos) work together to create its overall look and feel; functional elements include navigation, ease of access, user interaction (avoiding needless pops-up , auto-play videos, or overload of information), speed, a clear systematic structure that is easy to navigate both for visitors and the web crawler , and cross-device compatibility . See unit 5.4 for more information. Approaches to creating websites Websites may be created with different programs and in different ways by: What is a pop-up? A web crawler is an automated program that systematically browses the World Wide Web. Its primary purpose is to discover and collect information from web pages. What is the most used layout? backend: visibile solo da lato amministratore web crawler: indicizzatore di pagine web to customise: personalizzare template: modello 152 layout hand-coding pages, as with HTML (Hypertext Mark-up Language) or CSS (Cascading Style Sheets); using a WYSIWYG (What You See Is What You Get) editor (like Adobe Dreamweaver), which provides a GUI with familiar tools, similar to those found in a word processor; using a Content Management System, a software application that allows for the creation, management, and modification of website content without needing extensive coding knowledge. It provides a backend interface where you can write text, upload images, organise pages, and choose designs through given templates, like Word Press or Joomla; using a website builder, i.e. platforms (Wix or Weebly) which provide a highly visual, drag-and-drop interface that allows even beginners to choose a template, drag elements (text boxes, images, buttons) onto the page, and customise them directly. Mobile layout A mobile-friendly web design is created in order to make browsing smooth and pleasant on a mobile device: sites must be lighter and have content that can be read without zooming in and out or having to scroll left or right, and moving from one content to another must be simple and intuitive. Different mobile layouts The traditional static layout of web pages has to be adapted and can be: liquid, when a page layout re-sizes as the window size changes. This is possible thanks to a definition of the areas of the page which uses percentages instead of fixed pixel widths; adaptive, when a page layout adapts its structure and content according to the user interaction, with the objective of becoming more and more user friendly and optimising future interactions; responsive, when the page layout recognises the device the user is browsing on and adapts its templates, structure, and functions according to the display.