Best Sets of Ultra

UMF MIAMI
21.03.2018
TOP 10 SETS OF ULTRA MIAMI
CHRISTIAN OTT
AUTHOR
This year marks the 20th birthday of Ultra Music Festival Miami, which is one of the biggest EDM festivals around the world. The special thing about Ultra is, that it is every year in March and therefore kicks off the festival season. Most DJs seize this opportunity to present new sets and their latest music, on which they have been working on for the past months. Fortunately for all fans around the world, the whole weekend is live streamed, and a lot of sets can be found on Youtube after the festival. Since I like to listen to these mixes, I have compiled a list of my personal Top 10 sets of the last five Ultra Music Festivals in Miami.

Honorable mentions
Before we start with the Top 10, some honorable mentions. Nervo at Ultra 2014 and Krewella at Ultra 2013 would have been strong contestants for this list, if there were high quality videos of their sets available. The sets by Tchami (Ultra 2017), Alesso (Ultra 2015), Blasterjaxx (Ultra 2014) and Fedde le Grand (2015) were also pretty good but didn’t make it into the list.

No. 10: Tommy Trash – Ultra 2015
So without further ado, let us start with number 10, Tommy Trash at Ultra 2015. The man with probably the best headbanging skills in the scene definitely took out the trash with that set. Highlights: Mixing ‘Kernkraft 400’ with ‘Check My Swagger’ from 15:17 – 16:16 and dropping ‘Pyramids’ at 17:59 and ‘Straight Up’ at 28:33. Biggest drop of the set: ‘L’Enfant’ by Bottai starting at 48:37.

Full Set on YouTube: Tommy Trash – Ultra 2015

No. 9: Steve Aoki – Ultra 2013
Bass, bass and bass! Watch this set with caution, because it might blow your ears off. Steve Aoki’s sets might be pre-mixed, but if you have ever seen him live, you may know, how he energizes the crowd with his sets and this one is no different. I mean, look at the whole mainstage crowd jumping up and down to the drop at 22:52 (also at 24:34). It’s a very entertaining set. And give Steve credit, the cake at 49:38 was on point.

Full Set on YouTube: Steve Aoki – Ultra 2013

No. 8: Tiesto – Ultra 2017
Tiesto is called a legend in the EDM scene for a reason. His sets are always great, so it is tough to choose the best one. While I liked Tiesto’s set at Ultra 2015 pretty much and his set at Ultra 2016 might go down in history as the set with most guest appearances, I think his 2017 set is the best. From ‘Infinity’ (30:13) to ‘Party Till The Daylight’ (52:10) to the ‘Red Lights’ drop (1:04:54), Tiesto absolutely lived up to the expectations.

Full Set on YouTube: Tiesto – Ultra 2017

No. 7: W & W – Ultra 2016
W & W rocked at Ultra 2016. We are used to their sets having the biggest drops, but this set had even more energy. To just name a few examples: ‘Get Down’, ‘How Many’ and ‘Bigfoot’. They also brought the Chainsmokers on stage, who had a sick set at Ultra 2016 as well, which is featured at number 6 on my list. But first, check out W & W:

Full Set on YouTube: W & W – Ultra 2016

No. 6: The Chainsmokers – Ultra 2016
Say what you want about the Chainsmokers, but that set at Ultra 2016 was lit. The energy that the two guys brought in was something else. From the ‘Propaganda’ drop at 07:36 to the ‘Roses’ remix at 22:44, to that monstrous ‘Bodies’/’Prison Riot’ mashup at 51:00, they absolutely tore the worldwide stage apart!

Full Set on YouTube: The Chainsmokers – Ultra 2016

No. 5: Hardwell – Ultra 2013
It is not a coincidence, that Hardwell became the number #1 in DJ Mag’s TOP 100 at the end of 2013. Just listen to this set! Opening it up with ‘Spaceman’, playing ‘Apollo’ (which was brand new back then), dropping ‘How We Do’, blending from ‘Numb’ to ‘Cannonball’ and bringing Lil Jon to the stage to hype the crowd even more, Hardwell turned it up with this set. By the way, with 33 million views, this set is still his most viewed live set. Tells you how good it is.

Full Set on YouTube: Hardwell – Ultra 2013

No. 4: Knife Party – Ultra 2015
Besides the reunion with Pendulum on stage, Knife Party’s set at Ultra 2015 might have been the most essential reason for them becoming headliners at Ultra 2016. Just to name a few highlights of this killer set: Parliament Funk, Plur Police and Internet Friends, and that acapella of Ghosts n’ Stuff fitted in perfectly. Check it out:

Full Set on YouTube: Knife Party – Ultra 2015

No. 3: Kaskade – Ultra 2016
The opening of Kaskade’s set was absolutely phenomenal and it might be the best opening I have ever seen. His whole set had an amazing flow and I enjoy listening to it. The music paired together with this fantastic light- and fireshow rank this set at number #3 of my all-time favorites.

Full Set on YouTube: Kaskade – Ultra 2016

No. 2: KSHMR – Ultra 2017
KSHMR tried something different with his set at Ultra 2017 and it worked tremendously. He built his set around the story of a falsely expelled prince, who comes back to reclaim his throne. Every story scene is ended with multiple songs under the help of live musicians. Wow, just wow! If you have not seen this set already, it is a must to check it out:

Full Set on YouTube: KSHMR – Ultra 2017

No. 1: Laidback Luke – Ultra 2013
You know that a set is amazing, if you have returned to it frequently over the past five years. I don’t know how often I have listened to Laidback Luke’s set of UMF 2013, but it is just great. Luke’s live mixing is (as always) on another level, the dancers and kryomen were on point and Majestic was a great MC in the middle of the set. The crowd loved it and so did I. My number 1 set of UMF Miami.

Full Set on YouTube: Laidback Luke – Ultra 2013

Sixers Rotation at Center in Oct/Nov

ROTATION AT C
13.07.2017
PREDICTION OF THE SIXERS ROTATION IN OCTOBER/NOVEMBER
CHRISTIAN OTT
AUTHOR
The last part of the 5-day article series on the Sixers’ rotation is about the center position. This has been the most discussed position in the past among Sixers media and fans. The Sixers have stacked up talent at Center, with the draft pick of Nerlens Noel in 2013, Joel Embiid in 2014 and Jahlil Okafor in 2015. Although the three were injured a lot, there was a point were all three of them were healthy last season and it was a difficult choice how much playing time each of them should deserve. Well, than Nerlens got traded and Joel Embiid and Jahlil Okafor got injured which led to Richaun Holmes showing decent skills at playing the center position. The trio should be available as well for this season, so let us have a look at how the minutes among them should be distributed:
Joel Embiid
Although playing only a total of 31 games over the last 3 seasons, “The process” is the face of the franchise right now, which has several reasons. First and most important, he played incredibly in these 31 games. He had 20.2 points, 7.8 rebounds and 2.5 blocks in just 25 minutes per game. In addition to that, Embiid improved the Sixers’ defense greatly while being on the court and surprised with a pretty accurate three-point shot. Second, he is an entertainer on and off the court. From his last season appearances, I remember him dancing with the cheerleaders, encouraging the fans to chant while he shot free throws and having a lot of fun on the court with some of the NBA’s biggest names. He is very present on Social Media as well, with his tweets generally receiving a lot of attention. Third, he identifies with the Sixers. Not only is the famous quote of former Sixers’ GM Sam Hinkie “Trust the process” all over his social media accounts, the Sixers chose him to represent the organization at the 2017 NBA Draft Lottery and right now he seems to establish a rivalry between the Lakers and the Sixers by talking trash over the media with the Ball-family. All this makes him a pivotal piece of the team, so why did I just predict 24 minutes for him for the beginning of the season? Well, the reason is simply his health. He came into last season with a 24-minute-restriction per game due to the organization being very cautious with him to prevent another injury. In addition to that, he was just allowed to participate in nine road games. The minute-restriction went up to 28 minutes at one point, but sadly, Embiid got injured again. Therefore, I expect that minute-restriction again and probably the Sixers will stay even longer with the 24-minute-restriction. The biggest goal for Embiid for the next season will be to stay healthy and we do not know if he can reach that goal or not.

Richaun Holmes
A pleasant surprise from last season has been Richaun Holmes. Playing for the Delaware 87ers at one point because there was simply no space on the roster for another center alongside Embiid, Noel and Okafor, he became a reliable option again from February on. When he joined the team off the bench, he played mostly in 5-minute-sprints where he impacted the game with a lot of energy. His last-season stats on the offense are comparable to the ones of Jahlil Okafor while he played even better on defense, which moved him from the fourth option to the second position at center. After the all-star break, he put up 13.6 points, 6.9 rebounds, 1 steal and 1.2 blocks in 27 minutes per game while shooting 58% from the floor. Pretty impressive numbers to me and I definitely want to see more slam dunks and alley-oop finishes by Richaun, therefore I think he will be the second option at Center. With Embiid’s playing time being limited to 24 minutes, I see Richaun at 24 minutes per game as well.

Jahlil Okafor
But wait, there is still Jahlil Okafor, he needs playing time as well. That is right and I would have definitely planned him as a part of the regular rotation, but Brett Brown showed last season that he might think otherwise. At some point, Okafor was not coming off the bench anymore, he played as a starter instead when Embiid was prevented from playing. I can see that happen very well in the next season as nobody can predict, in how many games Embiid will be able to play. If Embiid can play in 50 games, which would be a high number of games in regard to his last three seasons, you still need another starting center in 32 games. On the offensive side, Jahlil should be perfectly capable of being a starter. He scored 13.4 points while shooting 52.4% from the field in 24.2 minutes per game as a starter last season. He possesses a lot of post moves to score in a variety of ways. In contrast to his offense however, he is often criticized for his defense. He just grabbed 3.4 defensive rebounds per game as a starter and was the worst (!) player in last NBA season regarding his plus-minus rating among 445 NBA players with at least 10 games played. The good thing is however, that he is still 21 years young and can only get better. He already showed some improvement last season by lifting his free-throw shooting to 86.5% after the all-star break and I like the thought, that the Sixers keep him as a backup for next season, if Embiid will not be able to play a lot of games.

Future perspective
With that being said, the 5-day-article-series on the Sixers rotation at the beginning of season 17/18 is over! I hope you enjoyed it and you are very welcome to leave a comment on Twitter if you agree or disagree with my thoughts. Generally said, I really like the high amount of statistics being offered around the NBA and I see basketball as a role model for football in that regard. Although the majority of articles on Footballelixir will be about football obviously, this will be definitely not the last article on the Sixers, as I will certainly watch a lot of their games again next season.

Sixers Rotation at PF in Oct/Nov

ROTATION AT PF
12.07.2017
PREDICTION OF THE SIXERS ROTATION IN OCTOBER/NOVEMBER
CHRISTIAN OTT
AUTHOR
Part 4 of the 5-day article series on the Sixers rotation is about the power forward position. A position, where the Sixers have actually gained some depth with last year’s “Rookie of the Year”-candidate Dario Saric, the acquisition of free agent Amir Johnson and this year’s second-round draft pick Jonah Bolden. It is tough to distribute the minutes among them, but I tried it nevertheless. Check it out:
Dario Saric
I see Dario Saric as a starter at the power forward position. Dario showed his competitiveness last season. First of all, he made 81 games with 26.7 minutes per game which is pretty unique among Sixers’ rookies in the last years, since the majority of them could not stay healthy in their first season. Second, he contributed to the team’s success being the first NBA player to ever achieve more than a combined 1000 points, 500 rebounds, 150 assists and 100 threes in his rookie season. Third, he improved radically. Before the all-star break, he achieved 10.8 points while shooting 39.7% from the field alongside 1.8 assists and 5.9 rebounds. After the all-star break however, he increased his stats up to 17.3 points per game with a field-goal percentage of 43.2% combined with 7.3 rebounds and 3.4 assists. All these improved numbers were just coming with 6 minutes of more playing time per game and I think that Dario can still improve. International players often describe their first year in the NBA as the toughest because of difficulties with the language, a ton of games to play during a season and getting used to a new country in general. Since Dario goes into his second year now, I think we will see him playing even better.

Amir Johnson
With a lot of cap space available for the Sixers, the organization brought in Amir Johnson in the free agency, who played last season with the Celtics. Johnson is a 30-year old power forward with a lot of NBA experience and will increase the depth at this position. Similar to Saric, he is very reliable with only missing 18 games overall in the last 5 seasons. In addition to that, he showed a very good shot selection throughout his career with a field goal percentage above 57%. His overall numbers from last season are not that impressive though, in 20 minutes per game he scored 6.5 points and grabbed 4.6 rebounds. These are solid numbers but they clearly show, that he should be second choice behind Saric. The fact that the Sixers only gave him a one-year-contract underlines, that they like his veteran leadership to support all the young players on the Sixers’ roster, but it displays as well, that they see other players on this position in the future. One of these players will be Dario, the second one just arrived at the team through this year’s draft.

Jonah Bolden
Boy, I am impressed by Jonah Bolden. Being drafted at the 36th position in the 2017 draft, he looks like a steal and could have been a first-round selection. He just played six Summer League matches, which is certainly a small sample-size, but the numbers give you the impression that he deserves a roster spot this year. In 23.3 minutes per night he did not only reach 10.1 points per game with his shooting improving with more games played, he also showed his defensive prowess with 6.3 rebounds, 1.8 steals and 1.5 blocks per game. I can very well imagine the duo of Saric and Bolden sharing the playing time at the power forward position next season. For the beginning of this season however, I think Johnson will receive more playing time than Bolden, but Bolden will be a part of the regular rotation. I see him at 10 minutes per night, Johnson at 15 minutes and Dario at 23 minutes. There is still an unlikely chance however, that Jonah will start playing for the Sixers initially in season 2018/19 and spent this season with Red Star Belgrade. If that happens, I would separate the minutes by giving Dario 28 and Amir 20, but I hope Jonah will stay with the Sixers this season.

Sixers Rotation at SF in Oct/Nov

ROTATION AT SF
11.07.2017
PREDICTION OF THE SIXERS ROTATION IN OCTOBER/NOVEMBER
CHRISTIAN OTT
AUTHOR
Part 3 of the 5-day article series on the Sixers rotation is about the small forward position. In contrast to the shooting guard position, the available candidates to play at small forward already played for the Sixers in last season, although there might be some people out there who think that Ben Simmons will play as a small forward. I do not agree with this opinion obviously, since I stated before, that Simmons will play as a point guard. To me, the players that will play as small forwards are Robert Covington, Timothee Luwawu and Justin Anderson. Check out how I distributed the minutes among them:
Robert Covington
In 38 games played from January on, Robert Covington showed fantastic performances. In this time frame he led the NBA in deflections and steals per game paired with 7.2 rebounds and 1.2 blocks to prove his elite defensive skills. He also improved his three-point shooting up to 36.5% during this period and scored 15 points per game. These numbers show that he is the one of the best defenders in the league and the best player on the small forward position for the Sixers. The team’s defensive performance also decreased radically, when Covington was not able to play the last matches of the season. As he played more than 30 minutes per game last season, I think he will play around 30 minutes per game again next season.

Timothee Luwawu
As second player on this position, I would like to see Timothee Luwawu. The French-born player has made a tremendous progress in the last season. With each new month, coach Brett Brown gave him extended playing time. Starting with 6 minutes per game in October, Timmy had 15 minutes per game in January and finished the season on an average of 26 minutes per game in March and nearly 34 minutes in April. While this increased playing time came among many injured players on the Sixers’ roster, he certainly showed strong performances. Especially in April, he was playing very good with a scoring average of 18 points per game while shooting 45% from the field alongside 3.3 rebounds, 2.3 assists and 1.8 steals per game. Probably he will be a starter in a regular rotation someday, but right now, I see him behind Covington on the second spot at the small forward position, where he will provide the Sixers with quality minutes of the bench.

Justin Anderson
Honestly, I was not a big fan of the Nerlens Noel trade in the mid of the season that brought in Justin Anderson to Philly and I had not heard a lot before about him, but after I have seen him on the court, I started to enjoy his energetic style of playing. This energy brought him at least 5 times on the NBA’s nightly Top Ten plays last season with an emphatic jam, a powerful block, two strong put-back slams and a reverse-alley-oop (!) dished by TJ McConnell. Although some of his plays are spectacular to watch and can energize a crowd, I cannot imagine why he should get a lot of minutes. In general, he has a lower three-point percentage, collects less steals and has a worse plus/minus-ratio than both Covington and Luwawu. I cannot see him taking minutes away from Robert Covington, because Covington is better than Anderson in a lot of aspects. If he wants to be in the regular rotation, he needs to compete with Luwawu for playing time in the second unit. However, it is tough to predict how good Timmy will become after he improved so rapidly in the last season and I think the Sixers’ organization wants to develop him further and give him as much playing time as possible. For that reasons, I see Anderson only playing in case of the combination of Covington or Luwawu not being able to play on the small forward position in a game.

Sixers Rotation at SG in Oct/Nov

ROTATION AT SG
10.07.2017
PREDICTION OF THE SIXERS ROTATION IN OCTOBER/NOVEMBER
CHRISTIAN OTT
AUTHOR
Part 2 of the 5-day article series on the Sixers rotation will be about the shooting guard position. This position did not have a lot of depth on the team in last season, which is why the Sixers drafted number 1 pick Markelle Fultz and signed a veteran player in JJ Redick for this position. This makes a prediction of the rotation on this position challenging, since both are very good players and new additions to the team, so that we can only guess how Brett Brown will divide the minutes on this position. I imagine the distribution of minutes as follows:
First of all, it is good news to hear that the injury of Markelle Fultz in the summer league match against the Golden State Warriors is not that serious and he will be only out of play for the Summer League but fine again when the season starts. The first games that he played in the Summer League really displayed his talent. After scoring his first bucket for the Sixers with a nice up-and-under move, Fultz showed many different ways to finish. He hit contested three-point-shots, sinked step-back jumpers, scored a floater and drove to the rim with ease while even making a couple of and-one plays. He averaged 16 points in just 21 minutes per game in his first three summer league matches. Frankly: Fultz is too talented not to be a starter for the Sixers. He will be a cornerstone for the franchise in the upcoming years and he needs playing time. He will probably play 30-32 minutes a night in the future but I think the Sixers will be very cautious with him not to overpace in his first month in the NBA. That is one reason why the organization brought in JJ Redick. Redick is an experienced shooter that will give the Sixers quality minutes and improve the team’s three-point-shooting. He will also help Fultz to lift his game up. However, in contradiction to most people I think that Redick will be coming off the bench and provide the second unit of the Sixers with elite three-point shooting. We should not forget that the Sixers signed Redick only to a one-year-contract. They know, that Fultz will receive close to 30 minutes in the future on the shooting guard position. It is a smart decision however to accompany him with a superb shooter like Redick for his first season. As a conclusion from these thoughts, I see Fultz starting with 26 minutes per game and Redick as his substitute with 22 minutes per game. As a reason deriving from these two players being so good, there will be approximately no space for a third player in the rotation on the shooting guard position. Jerryd Bayless will most certainly be the third choice at this position, but will probably only be needed if injuries or foul trouble prevent Markelle and JJ from playing.

Sixers Rotation at PG in Oct/Nov

ROTATION AT PG
09.07.2017
PREDICTION OF THE SIXERS ROTATION IN OCTOBER/NOVEMBER
CHRISTIAN OTT
AUTHOR
Has Footballelixir now transformed to Basketballelixir? Well, I have to admit, that alongside football I have been interested in the NBA and especially the Philadelphia 76ers from a very young age on. I became a fan of the Sixers when Allen Iverson was in his prime around 2001 and I still have a jersey of AI from the year 2002. Even my first website back in the year 2004 was about the Sixers. Even though the interest in the Sixers faded a bit after Iverson left to Denver in 2006 and I looked at news around the NBA less in the following years, it somehow came back when I started to watch NBA games again in 2015. The Sixers had such a young squad which was very entertaining to watch and I have been watching games and following news around the team ever since. I am very excited about the Sixers in the upcoming season 2017/18 and cannot wait to see all the players on the court. As exciting as the addition of draft picks and signed free agents is, there has been a lot of discussion about player’s minutes and their positions in the next season. Therefore, I will present to you my idea of the Sixers rotation for the beginning of season 2017/18 in this 5-day article series starting with the point guard position:
Coach Brett Brown has stated numerous times, that Ben Simmons will be the primary ball handler and play at the point guard position. His passing skills and floor vision are exceptional and predestine him for this role on the offensive. In the defense however, I do not expect Ben to guard the opponent’s point guard all the time, the matchups will dynamically adjust depending on the opponent. I expect him to be much closer to the rim on defense as well, so that the Sixers can benefit from his excellent rebounding skills. However, for the first month in the NBA after his season-ending injury last season, I expect the Sixers front office to put him on a minute-restriction as they did with Joel Embiid last season. I do not think it will be 24 minutes as seen for Embiid, but it will be probably at around 28 minutes. Primary replacement for Ben should be TJ McConnell. He really convinced me last season after he became the starting point guard by averaging nearly 8 assists and 2 steals per game from January on while playing close to 30 minutes every night. In addition to that, he showed that he can hit clutch shots in the 4th quarter as well, his brilliant buzzer-beater against the Knicks remains certainly unforgotten. The duo of Ben and TJ will be accompanied by Nik Stauskas. While the former point guard of the Sixers Sergio Rodriguez was injured last season, Brett Brown played Nik at the point as a replacement for TJ and he showed some decent passing skills. I do not think that Nik will be part of the regular rotation, but when the combination of Ben or TJ cannot play because of injuries or foul trouble, Nik will be needed as the third point guard on the team.

Responsive Web Design

WEB DESIGN
11.06.2017
CREATING A RESPONSIVE WEB DESIGN
CHRISTIAN OTT
AUTHOR
Designing a website in the year 2017 is a challenging task. People access a website via multiple display resolutions, starting with small screens on mobile devices, going to medium screens on tablets and ending with large screens on desktop computers. As a web designer, you are facing the challenge, to make your website look magnificent on each of these devices. But how can you achieve that? With a fixed width of your website? No! With three different apps, each designed for a specific device? No! By deleting your website and publishing a book instead? Definitely not! The catchphrase is “responsive web design” and I am going to show you, how I set up the responsive web design for christianott.co.

State of the art
Beginning with an overview of the current state of the art it is surprising, that a certain amount of websites do not use a responsive design. Some websites still use a fixed width and therefore force mobile users to zoom in and out, even though these website designs have decreased in the last years. Other websites have an additional version for mobile devices to their website with a fixed width (or an app for mobile phones). However, the majority of websites that do use a responsive design, stop at a certain width of display resolutions, mostly at around 1600 pixel, probably 2000 pixel. Using an Ultra HD display myself, I found that only a few websites (even if they have a responsive design) make use of the space of a resolution this high.
Definition and challenges
Before we dive deeper into the creation of the design of this site, a little recap on what a responsive design is: It is a design approach, which is about the automatic adaption of your website to the screen resolution by using the available space optimally. Concisely, it makes your website look great on every screen resolution. However, imagine the challenge to display the content of your website in a screen width of 300 pixel up to a screen width of 4000 pixel. That is 13 times wider! Though more space is great, you do not want to cut any relevant information on a mobile device that you show on the big screen, whereas you also do not want to leave a lot of blank space on a high resolution.
Adjust the font size!
Some basic adjustments can be made in any responsive web design, which are mainly to show the content smaller on a small device and larger on a large device. To give you an example: A font size of 14 pixel can be easily read on a mobile device with your eyes usually not too far away from the display. However, if you sit half a meter away from your 28-inch-display with 4k resolution, this font size is quite hard to read. Therefore, I adapted the font size depending on the screen-size. The smallest font size being used is 16 Pixel and is usually seen on mobile devices. The largest font-size is way higher than that and stands at 27 pixel. It is used starting at a screen-width of 1600px. In between these two, the font size increases with an increasing screen width and should always be very well readable in dependence of the screen width.
Some basic adjustments can be made in anyresponsive webdesign and that is mainly to show thecontent smaller on a small device and larger on alarge device. To give you an example: A font size of 14pixel can be easily read on a mobile device with youreyes usually not far away from the display. But if yousit half a meter away from your 28-inch-display with4k resolution, this font size is quite hard to read.Therefore, I adapted the font size for Footballelixirdepending on the screen-size. The smallest font sizebeing used is 16 Pixel, usually seen on mobile devicesor very small two-column-layouts of the site. With anincreasing screen width, the font size increases aswell, rising to 17-18 pixel per column very quickly andending with a very well readable 20 pixel.Adjust the font size!Some basic adjustments can be made in anyresponsive webdesign and that is mainly to show thecontent smaller on a small device and larger on alarge device. To give you an example: A font size of 14pixel can be easily read on a mobile device with youreyes usually not far away from the display. But if yousit half a meter away from your 28-inch-display with4k resolution, this font size is quite hard to read.Therefore, I adapted the font size for Footballelixirdepending on the screen-size. The smallest font sizebeing used is 16 Pixel, usually seen on mobile devicesor very small two-column-layouts of the site. With anincreasing screen width, the font size increases aswell, rising to 17-18 pixel per column very quickly andending with a very well readable 20 pixel.Adjust the font size!Adjust the font size!Some basic adjustments canbe made in any responsiveweb design and that ismainly to show the contentsmaller on a small deviceand larger on a largedevice. To give you anexample: A font size of 14pixel can be easily readon a mobile device withyour eyes usually not faraway from the display. Butif you sit half a meteraway from your 28-inch-display with 4k resolution,this font size is quitehard to read. Therefore, Iadapted the font size forFootballelixir depending
Adjust the image size!
In addition to the font size, the size of images can be increased as well. Whereas you are bound to small, low-quality images on mobile devices due to small resolutions and slow mobile internet connections, you certainly do not have these boundaries on desktop computers. A solution might be, to have the same picture available twice on your webpage, loading the small, low-quality version on small screen resolutions and the large, high-quality version on high screen resolutions. Unfortunately, this can cause a lot of effort and you have to live with the fact, that each time a user downsizes his browser window to a mobile phone size, every picture needs to load again (as far as you did not come up with a smart solution to prevent this scenario).
Vector graphics
To tackle the challenge of scalability and file size concerning images, I prefer to use vector graphics over pixel graphics. Vector graphics are awesome, because they are scalable without losing quality while their file size is dramatically low, sometimes just being a few kilobytes. The start was difficult, however. Despite having a lot of experience in Photoshop, I could never get into Adobe Illustrator to create vector graphics. It was a game-changer when I found out about Affinity Designer, which helped me to create vector graphics very easily. Getting into vector graphics was definitely worth it, nearly every image I use in my posts are vector graphics. The difference between pixel and vector graphics can be seen in the attached image, showing a zoom in on the Footballelixir logo as a vector and as a pixel graphic.
Show additional content
Ok, so you made fonts and images larger in your responsive theme, but unfortunately there is still a lot of blank space left on a 4k resolution. What are the possibilities to use this space? The first one I identified is the possibility to show additional content on bigger screens that is not shown on small resolutions. That should certainly not be any important content since you do not want people to miss anything, but you can certainly fill the blank space with nice-looking, but not value-adding illustrations. In the former web design of Footballelixir.com, I did this with the introduction- and wrap-up-section of each article, making you see the logo in addition to the text in a high resolution window, whereas you only saw the text without the logo on a small device. You can still see this approach in the picture below. However, as I renewed the design of the site, it turned out to be slightly boring to show the same picture on every site, because it made the introduction of every article look the same. I still like this idea though, I will probably try to design an interesting additional background that is shown on the sides in huge resolutions, to not make the space look too blank.
Responsive web design Designing a website in the year 2017 is a challenging task. People access a website via multiple display resolutions, starting with small screens on mobile devices, going to medium screens on tablets and ending with large screens on desktop computers. As a web designer, you are therefore facing the challenge, to make your website look magnificent on each of these devices. But how can you achive that? With a fixed width of your website? No! With 3 different apps, each designed for a specific device? No! By deleting your website and publishing a book instead? Definitely not! The Designing a website in the year 2017 is a challenging task. People access a website via multiple display resolutions, starting with small screens on mobile devices, going to medium screens on tablets and ending with large screens on desktop computers. As a web designer, you are therefore facing the challenge, to make your website look magnificent on each of these devices. But how can you achive that? With a fixed width of your website? No! With 3 different apps, each designed for a specific device? No! By deleting your website and publishing a book instead? Definitely not! The catchphrase is “responsive web design” and I am going to show you, how I set up the responsive web design for Footballelixir. Responsive web design Responsive web design Designing a website in the year 2017 is a challenging task. People access a website via multiple display resolutions, starting with small screens on mobile devices, going to medium screens on tablets and ending with large screens on desktop computers. As a web designer, you are therefore facing the challenge, to make your website look magnificent on each of these devices. But how can you achive that? With a fixed width of your website? No! With 3 different apps, each designed for a specific device? No! By deleting your website and publishing a book instead? Definitely not! The catchphrase is responsive
Basic box-design
The second possibility available is what I call a basic box-design. By basic boxes I mean single content boxes, that all have the same size, contain only few elements and are placed next to each other. You might have seen it at the front page: The links to the different sections are displayed in boxes of the same size being placed right next to each other, just consisting of text and an icon. As another example, take Instagram’s overview page of the pictures on a profile. These types of objects are perfectly scalable, you can just place as many boxes in a row, as the display resolution allows you to place. You also have the possibility to increase or decrease the size of the boxes accordingly, saving you from showing too large boxes on a mobile screen.
Basic box-design Basic box-design Basic box-design
Advanced box-design
The third possibility to fill blank space is what I call advanced box-design. An advanced box consists of several elements that have different sizes. The elements and the boxes themselves can be placed dynamically to fill blank space. I worked with such an advanced box-design in the former web design of Footballelixir.com. Every article page had several boxes that consisted of a heading, a text and an image. It scaled according to the width of the browser window. For small screens (speaking of everything under a display-width of 1000 pixel), the picture was placed under the text-section. Going on from 1000 pixel, the picture was placed in a row with the text and both increased in size up to 1600 pixel. From 3500 pixel on, two boxes were placed in a row, making the design perfectly compatible with Ultra HD and 4k resolutions. You can still see the approach in the picture below. I was very proud of that design because it was ultra-responsive, but it limited me to that point, that the elements always had to be in line. The height of the group of heading and text could not exceed the height of the attached image while the whole box needed to have the same height than the other box in the same row. If they were not the same height, it looked broken. I needed more flexibility though. Some texts do not need pictures and some pictures do not need texts. Furthermore, if you want to add embedded content such as tweets or videos, you need even more flexibility. Therefore, I decided to discard that approach and just work with one column on article pages.
Wrap-up
Setting up a responsive web design has been a must. While an adaptive header was already part of the WordPress theme, I used several other ways to adjust the content to the width of the website. I began with the implementation of an adaptive font and image size, so that both are better recognizable in dependence of the screen size. For the scalability of images, I used vector graphics to keep the file size low and not have any losses in regards to the quality of the images. Then I developed a dynamic addition of columns for the overview of articles on both front page and category sites, while I stayed with one column on article pages due to more flexibility. As a future perspective, I am still thinking about adding interesting illustrations to fill up the blank space on the sides in high resolutions. Looking at the final result I am very satisfied with the website theme being flexible, colorful, fresh and modern and I am especially proud, that it serves as a very good basis to present my posts in a visually appealing way.