Adaptive HTML

You may have had to retrofit responsive on an
existing website, or perhaps tried your hand at a
mobile-first approach on a new build. Either way it is
very likely that your HTML structure, no matter how
concise or semantic just doesn’t suit all screen sizes. You
can duplicate components with slightly different
structures, and use CSS to hide and show them.
Alternatively, you can use JavaScript to modify the
HTML using the match Media method. Both of these
approaches can help you achieve a responsive solution
but come with their own problems.
If you can identify these problem areas and plan for
them, you can use a combination of both techniques
and adapt the HTML when necessary. Create alternative
HTML snippets for the relevant components and use
JavaScript to render them in the page at the right points
using the match Media method in JavaScript. Some CMS
platforms and responsive frameworks have started to
introduce this adaptive approach to their toolsets. Check
out Foundation’s current solution Interchange
html) which combines this approach with data attributes.
Images are well known to be the largest cause of slow
load speeds, being able to show the ideal size image
based on the screen size, pixel density and connection
speed has always been difficult. Adaptive techniques can
be used to do exactly this and in JavaScript it is easy
enough to check every variable we need. You will need
to answer some key points for each project like, which
size image do you load as default and if you you rely
completely on JavaScript to render any images.
There are some new approaches in HTML that are in
current development, though not yet available across
browsers. The first is the picture element, this HTML tag
lets you nest image sources with media queries applied
directly to them as attributes. The second is src set which
again leverages attributes to switch image sources based
on media queries. Once these approaches are available,
the current reliance on JavaScript can be reduced,
increasing page performance.
Navigation menus are particularly tricky to build the
same across devices – the way users interact across
devices differs, and on a small screen a complex
navigation is difficult to consolidate. You could try to
make the navigation on larger screens match the mobile
experience closer, but this always feel forced.
To solve this you will again need to use alternative
HTML snippets, but plan these out and try to avoid
changing the HTML too often. Another big problem in
this area is that duplicating links to other site pages in
close proximity can have a detrimental effect on a
website’s search rankings. A workaround for this is to
only render the href attributes on one version and use
data attributes on the duplicate versions. You can then
use JavaScript to switch the navigation markup and
toggle data attributes to be href attributes when needed.
An extra enhancement when building multilevel
navigation is to consider using touch start events to bind
showing and hiding menu options. When using a
smartphone this can feel really slick, but be careful not to
overuse it though as you don’t want too much animation
happening when users don’t expect it.
It seems that most websites feature a slider or carousel
of some kind. A common approach to adapting them is
to disable the functionality altogether and only display
the first item on small screens. There is a better solution.
Firstly, if your slider automatically rotates then disable
this on smaller screens as this can be very distracting on
a smartphone. Then consider the size of any controls or
buttons that switch between the slider items. On a touch
screen these need to be larger than on a desktop
computer. Just detect for touch input methods and
adjust accordingly with CSS. Knowing that touch inputs
are available lets you make your slider draggable, users
on touch screen devices expect this functionality.
A gotcha that is often overlooked with the sliders is
what happens to these elements when a user switches a
tablet from landscape to portrait and vice versa. Make
sure that the slider is reset to the first item and that the
animations in progress will not cause unexpected UI
behaviours and states.

Google Chrome inspiring web projects

Google Chrome: pushing boundaries
Six years in the making, Google Experiments hits the 1000th
experiment mark showing why Google Chrome is top dog
Browsers, why don’t they
all render the same? It’s
a valid question, but the
simple fact is that
currently they don’t.
Each vendor has an
agenda, or a way of
working that they think
works best. We won’t dwell on it too long but
Internet Explorer was a fine example for
forgetting web standards, pushing their own
standard into the DOM and making the
masses work the way they want them to – of
course that didn’t work out so well.
Back when IE was king there were very
few viable alternatives, but its empire quickly
started to crumble when Mozilla brought
Firefox to the market. But, one alternative was
never going to be enough and who was
looking to take over from Microsoft as world
leaders? Google of course, and Google
Chrome was born. Back in 2010 Google
Chrome only had 6 per cent of the
worldwide browser market, while Firefox was
hovering around 31 per cent and IE 54 per
cent. Five years later and those figures have
changed radically. Chrome is now streets
ahead with nearly 50 per cent of the market.
Both IE and Firefox are on a downward spiral
with both hovering around the 18 per cent
mark. That’s a drop of 36 per cent for IE and
13 per cent for FF.
Chrome’s impressive rise can be pinned
on a number of factors, but its desire to
adopt web standards and push forward
rather than shoehorn in its own is definitely a
major factor in its success.
A browser should enable designers and
developers to be creative and experimental, a
concept perfectly demonstrated by Google
Experiments. Launched in 2009 its goal was
to showcase the work of coders who were
pushing the boundaries, pushing the very
limits of HTML5 and JavaScript.
From humble beginnings of just 19
experiments, the site recently unveiled its
1000th experiment. To celebrate Google has
created “a special Experiment #1000 (1000. that visualises
every other experiment on the site”.
The concept really took when Web GL was
added to Chrome back in 2011. Check out the
first WebGL experiment by Gregg Tavares
html). Imagine how this worked four years
ago. There have been some truly stunning
and amazing additions to Google
Experiments. Remember 100,00 Stars? It’s a
big favourite at Web Designer, and we’ve
included a few others below.
Adding a little extra icing to the
Experiments cake, Google has engaged
another of its newcomers Polymer. The new
designed site is mobile-friendly and adopts
the core design principles.
Here’s to the next six years of
experimentation and imagination. Wondering
what Google Experiments will look like in
2021?Well we can’t wait to find out.

Web Agency

Freelancer Or A Web Design Agency?

When you are looking for someone to build a website for you, you have many different options. One of the first things you will have to do is decide is whether you want to use a freelancer or a web design agency to design your website for you. Each option has its own unique set of pros and cons that need to be carefully considered so that you get the web design professional that meets your specific wants and needs.

Freelancers can be a great option. One of the great things about a freelancer is that they have more freedom and flexibility to take on a variety of projects. Some of the most creative people in web design work strictly on a contract or freelance basis. Another great thing about using a freelance web designer is that you may be able to negotiate a great deal. Freelancers often work from their homes, so there are myriad expenses that are spared. While it is true that freelancing has its own expenses associated with it, freelancers certainly have a greater range to negotiate a price. Lastly, you may find a great talent at a bargain. Many new freelncers are eager for work and sites that they can use in their portfolio to command higher-paying jobs. These people are very talented; they are just not as experienced. If you can find one of these gems, and don’t mind being a bit patient while they get the hang of freelance work, you can get a great deal on top of the line web design service and also help a deserving person launch his or her career.

Although there are many good reasons to go with a freelancer, there are some drawbacks. If a freelancer gets in over his or her head, it might be hard for him or her to find someone to help him out. Also, there is a great potential for miscommunication and other project-killing incidents to happen with a freelancer. Lastly, with a freelancer, the price may be more variable. You may not know exactly how much the project will cost until it is already over.

If the drawbacks of hiring a freelance professional for your web design project outweigh the benefits, you may want to consider using a web design agency. Web design agencies are usually more established. It is easier to get references as well as a look at portfolio material. Furthermore, a web design agency will have a wide variety of people to work on a project, so that if there is a function that you want, there will be someone in the agency who knows how to do it. Web design agencies also have the benefit of experience. They can accurately estimate the cost of a job, so there are no surprises for you. Finally, most web design agencies are members of their local commerce chambers or some other authoritative organization. If you have a hard time with a freelancer, you don’t have very many avenues for recourse. However, with a web design agency, you are more likely to have any dispute you may have resolved to your satisfaction.

Web design agencies and freelance web design professionals both have solid good points and a couple bad points. In order to figure out which is right for you, you need to do an honest assessment of what you are looking for and what risk you are willing to tolerate for what benefits. Each project has its own needs and at any given time a freelancer might be more desirable than a web design agency or vice versa.

Related Videos

web design agency, promoting best web design process – mediatopia
Mediatopia is a web design agency that create professional websites for small and medium sized business. Ever wondered how a great website gets made?
Avavo Web Agency
Presentazione nuovo sito Pagano case in legno.
DiGiness Web Agency
DiGiness e’ una web agency di Padova che si occupa della creazione di siti internet ed e-commerce, di soluzione informatiche e web marketing.
Brooco – Web Agency (Acquaviva delle Fonti)
Panoramica dei nostri servizi: • Realizzazione di sito web • eCommerce • Strategia di social media Marketing • Strategia S.E.O. • Logo • Brochure • Bigliettini da …
Chris Coyier: A Modern Web Designer’s Workflow
More and more is expected from today’s web designers. Visual design is just one small part of the job. Those designs also need interaction. They need to work …