• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Web Design Cookbook: Design Challenges

By Abhishek Ghosh February 28, 2023 5:32 pm Updated on February 28, 2023

Web Design Cookbook: Design Challenges

Advertisement

The medium of the web behaves quite differently than, for example, paper or film. It works frameless, it adapts. In principle, it is available on any device and in any operating system. It is neutral, does not want anything, and does not pretend anything. The structure you need to give your website and code is only for the rendering software, the browser. The browser has become the most important and widely used software on all devices and systems. For this reason, it also offers its user a myriad of extension modules, all of which can adapt the presentation of your website to the needs of the user. The web is an extremely flexible medium. If you find the web, you will also find:

  • Various output devices
  • Different browsers with a different display of the same websites
  • Different screen sizes and resolutions
  • Hard-to-control font size
  • Various add-ons and plugins

An output device for the web is any device that has an Internet connection. These are no longer just computers and notebooks, but also smartphones, tablets and even TVs, projectors and game consoles. The same website works for each of these devices. Since the share of mobile devices in the number of views for websites, in general, is steadily increasing, the focus today is on responsive design, a form of web design that adapts to the user’s device.

Different browsers and versions often display the same website slightly differently. Because these browsers are written by different teams of programmers. Most browsers today are open source and are developed by a large community. So-called bug bounties, the bounty hunt for bugs sponsored by well-known and large companies such as Google, make the browsers more secure for the end user. Not particularly popular is Internet Explorer, which even in its latest version deliberately ignores standards and is a thorn in the side of every web designer. While all popular browsers are available for every popular operating system, Internet Explorer is still only available for Windows. There aren’t many users who regret this, but for web designers, it means getting a Windows license or a PC running Windows to test a website.

Advertisement

---

Web Design Cookbook Design Challenges

 

Screen sizes, resolutions and fonts

 

Different devices offer different resolutions. The web designer usually does not know the screen sizes with which users will visit the site. Through so-called device tracking, he can find out which devices users have used to visit the site. Since screen sizes vary greatly, responsive design is popular today for websites that support a wide range of computers and smartphones at the same time. The measurement of a screen can be done with CSS Media Queries, or less often with JavaScript.

From this information about the resolution and the size of the available area, which is to be regarded as gross resolution, the space for the window frame of the browser, scroll bars, toolbars, and possibly displayed favourites bars must now be subtracted to get to the remaining space for the design. Modern browsers are increasingly reducing the space they require to have more space for websites. But on the other hand, there are extensions of the browsers, which can take up the created space again.

The same fonts are not available everywhere on different devices. The fonts depend on the one hand on the operating system (Windows, Apple, Linux), on the other hand on the installed programs. As a designer, you may have installed extra font packs. If so, then you have a computer that is quite atypical. Most other users only have standard fonts on their computers.

If you specify Proxima Nova as the font, and then view your page on a computer that does not have that font, the font that developers and users have defined as the default font for the browser will be used instead. On Windows, it is traditionally the serif font Times, on Linux and in exotic browsers, other fonts may be set by default. It therefore make sense not to require a specific font, but to specify a list of fonts: if the first font on the list is not installed, the second is used, then the third :

Vim
1
2
3
Verdana, Tahoma, Arial, Helvetica, sans-serif;
"Times New Roman", Georgia, Times, serif;
"Courier New", Courier, monospace;

However, there are methods to use custom fonts on web pages, even if the user has not installed them. To use a font in this way, you need a license, sometimes for a fee, because fonts are protected by copyright. This is no joke – even if it’s just the alphabet, it’s still designed in a specific, appealing way by a graphic designer. Font designers, or in the language of Internet font designers, spend many hours full of detailed work on the design of a font because errors in the design can be seen in the typeface. Prices for a font range from free to several thousand dollars. Free fonts can be found, for example, on Fontsquirrel.com or in Google Web Fonts, where you can try out the fonts and also learn how you can use them on your website.

Even though CSS allows you to determine the sizes and ratios of fonts and other elements, it is ultimately the user who decides how large the appearance of the website is. People with low vision can make the font larger or zoom in on the website to view the website. For this reason, it is better to leave the line break to the browser. Depending on the font size and available space in the browser window, the browser will wrap the paragraphs into lines appropriately.

 

Additional programs, foreign formats and plugins

 

Any browser can render HTML and “plain text.” If the browser can display images, then images in the formats GIF and JPEG, some also PNG. The HTML5 standard also allows the display of SVG, a vector graphics format. SVG is an example of a file format that originally required a plugin to be loaded to render it. Over time, all popular browsers got SVG support and the plugin became obsolete.

Other formats (Microsoft Word, OpenOffice, CAD, 3D graphics, audio and video files, Flash, PDF, …) can also be integrated into a website. The browser can start additional programs to display these formats or has already integrated support for these formats. This is technically possible, although there are many arguments against embedding files.

To display file formats that the browser itself does not support, you must have software installed on your computer that can handle the format. This software may need to have a plugin installed for the browser. A website usually does not deliver both. OpenOffice, for example, is over 200 MB in size, which is also a lot for broadband DSL and is disproportionate to the presentation of a document. Also, plugins are notorious for having vulnerabilities offered along with a compromised file by malicious operators. Meanwhile, plugins for the Internet are losing importance. Google removed the Netscape Plugin API interface, which is used to operate plugins in the Chrome browser, from the browser some time ago. A serious security vulnerability, which allows taking control of the user’s computer, Adobe has closed their plugin Adobe Flash only after a few weeks. For smartphones and mobile devices, the most popular of all plugins are no longer supported.

If you consider all this and then come to the conclusion that it makes sense in a specific case, e.g. to integrate an Excel document into your website, then it is technically very simple: You set a link to the Excel file. If Excel is installed, the user may be offered to open the file. Otherwise, what’s going to happen won’t be any different from a simple download.

A special case of add-ons for web browsers is plugins. These take over the representation of a rectangular area within a web page. The most popular example is Adobe Flash mentioned above.

 

To Summarize

 

The output medium for a website cannot be generalized, fixed, or controlled. A few possible scenarios:

  1. Private users in the First World, who have a lot of money and always afford the latest hardware for the fun of the computer, always have the best possible Internet connection, and always use the latest software.
  2. Trend-conscious city dwellers who are on the move and surfing with notebooks and smartphones.
  3. Home theatre owners with a smart TV operated with a remote control or finger.
  4. Enterprise users who have to make do with what IT leaves them after firewalls and security restrictions.
  5. Customers of Internet cafes somewhere on this earth that own neither software nor hardware. What they find is perhaps a seven-year-old computer with equally old software and a CRT screen.
  6. Blind people who surf the web with a text-to-speech program or a Braille output line.
  7. People with red-green visual impairment who see the text and the images, but cannot distinguish between certain colours.
  8. People with limited fine motor skills who find it difficult to handle a mouse or people who generally appreciate the advantages of the keyboard and shortcuts.

As a web designer, not every group can be taken into consideration. However, a web designer must familiarize himself with the technological basis of the target group.

This Article Has Been Shared 882 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Web Design Cookbook: Design Challenges

  • Responsive Web Design, Grid System and Mobile Website

    Responsive Web Design, Grid System and Mobile Website are used for making a website easily viewable on any mobile devices including Tablets. Here is a guide.

  • Google Plus Interactive Posts : Tips and Tricks

    Google Plus Interactive Posts can target your call-to-action button label from a large list of options programatically. It actually does not require any Plugin.

  • HTML5 : Vocabulary and Interfaces

    HTML5 can be difficult to understand at high end usage. Basic usage of HTML5 is otherwise easy. Here is a list of Vocabulary and Interfaces for HTML5.

  • Twitter Bootstrap Guide For Newbies

    Twitter Bootstrap guide is written in a way, so that the basic users can use Free Twitter Bootstrap Source Code and use customize for own website design.

  • Add a Print Button in Genesis Powered WordPress Website

    Add a Print Button in Genesis powered WordPress website in just few steps. You really need not to be a coding expert – its amazingly easy than you can think.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • Is it Good to Run Apache Web server and MySQL Database on Separate Cloud Servers? March 27, 2023
  • Advantages of Cloud Server Over Dedicated Server for Hosting WordPress March 26, 2023
  • Get Audiophile-Grade Music on Your Smartphone March 25, 2023
  • Simple Windows Security and Privacy Checklist for 2023 March 24, 2023
  • 7 Best Artificial Intelligence (AI) Software March 24, 2023

About This Article

Cite this article as: Abhishek Ghosh, "Web Design Cookbook: Design Challenges," in The Customize Windows, February 28, 2023, March 28, 2023, https://thecustomizewindows.com/2023/02/web-design-cookbook-design-challenges/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT