CSS Tags considerations

Descendant Combinator

In order to target specific tags , descendant combinators allow programmers to combine two selectors.  Lets take ‘Jump up with CSS’. There is a CSS code below that causes browser to to style a div class with the value of .box if it inside a container. If the box tag is positioned outside the container, then the browser will not style the box. Due to its function, it can code partly inflexible. 

Child Combinator

Child combinator has the same functions as descendant combinator. In terms of syntax, it features a greater sign. In order for the tag to meet the criteria, the targeted tag cannot be wrapped by another element. See the image below for example

Pseudo-class

Psueudo-class tag features a colon that informs the browser the state of the element. Navigation links consist of these tags in order for the links to change appearance when activated or hovered. Having a pseudo-tag that responds when the user interacts with the graphical elements are known as dynamic classes. Let’s take this example The hover pesudo-class tag has red in the colour property. When cursor interactive, the navigation link should turn red. 

http://www.w3schools.com/

Debugging your css

Ensuring the CSS code does not feature invalid tags and classes is one essential task to include in the production state. When there is one element with a syntax error, the browser will present the other element with wrong styling and in sometimes strange positions.

The syntax below has a invalid random name that is assigned to code that deals with box sizing. The incorrect syntax would cause the browser to disable the styling for the first rule . Applying braces next to an invalid div class causes the web browser ignores what is inside the empty bracket. It will only read the classes and the data within the next brackets

Using the source tools on Firefox and Chrome is another great tip the author of Jump Start CSS. The developers tools enables users to view the website’s  HTMl and CSS codes. When the designs sees the design on the browser, he or she can change the values to see what changed occurred. The values changed on the browser are not connected with the website files, 

Validating CSS

There are validators that enable designers to easily fix the syntax issues. There is W3 schools CSS validator but it does not recognise CSS3 attributes are not recogised. The designer can paste the code into the website or use the URL function that enables the validator to directly read the CSS.  With validators there are errors and warnings. Errors refer to the invalid syntax but warnings alerts designers that some of the code is not recogised. 

Although it is great for fixing solutions, the validator does not offer perfect results. Some errors presented  on the validator do not visibly effect the designer’s webpage. 

HTML tags considerations

Design problems with responsive websites

James Young is one of the authors writing articles for creative Bloq. His article offers advise on how to use design a responsive website. I explored his solutions to prevent the issues from occurring in the production state

Fledgling methodology

According to James, the traditional process of was quite linear. The designers were briefed and then given a wire framing and planning infrastructure to follow. The last part of the process was to develop simple pixel based mock ups at the presentation where the website would be signed off to complete.

However, the designing interface and the user experience for responsive websites is very complex. Responsive designs require more planning, therefore he recommends to use more wire framing, sketching and high fidelity documents to plan the website design and layout. Showing clients and peers with many versions of the websites, such as the wireframes, is very effective tool to get constructive feedback. 

Images

James states that working with images in responsive design is fragmented. W3 schools have not stated a specification, therefore it leaves designers with many personal options to improve the navigations usability by adding scripts. His main advise is to use vector based symbols in order to build a website suitable for future devises. James is using the quote ‘graphics on high-pixel-density devices don't look blurry is conveying that the imagery should be clearly seen when user views the website on a more sophisticated high quality device. 

Navigation

Many designers take navigation elements for granted.  Many navigation presented are usually positioned horizontally on the top of page. James argues that rather than downloading and then embedding it into the websites files, analyses the interactive element’s ability to offer efficient user experience. The designer also needs to bear in mind the website’s design, layout and architecture, including content. 

http://www.creativebloq.com/responsive-web-design/problems-8122790